Remixes of wisprflow.ai
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Wisprflow
description: |
Wispr Flow's design language is elegant and refined, blending serif and
sans-serif typography to convey both sophistication and modern accessibility.
The palette emphasizes a warm cream canvas (#FFFFEB) that evokes a paper-like,
approachable quality, paired with a distinctive lavender primary (#F0D7FF)
that signals interaction and brands the service as innovative yet trustworthy.
The rich teal accent (#034F46) grounds hero sections and establishes visual
hierarchy, while supplementary accents (orange, mint, coral) provide playful
depth without overwhelming. Typography favors EB Garamond's classical serifs
for display and headings—conveying intelligence and craft—balanced by
Figtree's clean sans-serif for body and interface text, ensuring clarity and
speed. The overall mood is professional yet warm, positioning Wispr Flow as a
tool for serious creators who value both elegance and efficiency.
source:
url: "https://wisprflow.ai/"
pagesAnalyzed: 1
extractedAt: 2026-11-05
tokensMeasured: true
colors:
primary: "#F0D7FF"
canvas: "#FFFFEB"
surface: "#E4E4D0"
on-primary: "#1A1A1A"
ink: "#1A1A1A"
accent-1: "#034F46"
accent-2: "#FFA946"
accent-3: "#34D399"
accent-4: "#FF6C4C"
neutral-1: "#333333"
neutral-2: "#000000"
typography:
display-xxl:
fontFamily: "Eb garamond"
fontSize: 120px
fontWeight: 400
lineHeight: 0.85
letterSpacing: -3.6px
display-xl:
fontFamily: "Eb garamond"
fontSize: 96px
fontWeight: 400
lineHeight: 0.95
letterSpacing: -2.88px
display-lg:
fontFamily: "Eb garamond"
fontSize: 75px
fontWeight: 400
lineHeight: 1
letterSpacing: -2.25px
display-lg-tight:
fontFamily: "Eb garamond"
fontSize: 75px
fontWeight: 400
lineHeight: 0.5
letterSpacing: -2.25px
display-md:
fontFamily: "Eb garamond"
fontSize: 64px
fontWeight: 400
lineHeight: 0.95
letterSpacing: -1.92px
display-sm:
fontFamily: "Eb garamond"
fontSize: 48px
fontWeight: 400
lineHeight: 0.95
letterSpacing: -1.44px
heading-md:
fontFamily: Figtree
fontSize: 36px
fontWeight: 600
lineHeight: 1.3
letterSpacing: 0px
heading-sm:
fontFamily: "Eb garamond"
fontSize: 32px
fontWeight: 400
lineHeight: 0.95
letterSpacing: -0.96px
heading-xs:
fontFamily: "Eb garamond"
fontSize: 20px
fontWeight: 400
lineHeight: 0.95
letterSpacing: 0px
body-xl:
fontFamily: "Eb garamond"
fontSize: 26.08px
fontWeight: 400
lineHeight: 0.95
letterSpacing: 0px
body-lg:
fontFamily: Figtree
fontSize: 18px
fontWeight: 600
lineHeight: 1.3
letterSpacing: 0px
body-md:
fontFamily: Figtree
fontSize: 16px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0px
body-md-strong:
fontFamily: Figtree
fontSize: 16px
fontWeight: 600
lineHeight: 1.3
letterSpacing: 0px
body-sm:
fontFamily: Figtree
fontSize: 14px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0px
body-sm-uppercase:
fontFamily: Figtree
fontSize: 14px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 1.12px
textTransform: uppercase
nav:
fontFamily: Figtree
fontSize: 16px
fontWeight: 600
lineHeight: 1
letterSpacing: 0px
caption:
fontFamily: Figtree
fontSize: 12px
fontWeight: 600
lineHeight: 1.54
letterSpacing: -0.24px
rounded:
none: 0px
xs: 8px
sm: 16px
md: 32px
lg: 48px
full: 9999px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 20px
xl: 24px
xxl: 28px
xxxl: 32px
section: 40px
band: 44px
borderWidths:
thin: 1px
medium: 2px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFEB"
surface: "#E4E4D0"
surfaceRaised: "#DCDCC9"
text: "#1A1A1A"
textMuted: "#6A6A63"
border: "#E4E4D2"
accent: "#C25DFF"
accentFg: "#000000"
focusRing: "#F0D7FF"
elevation: shadow
dark:
bg: "#0F0E11"
surface: "#1D1C1F"
surfaceRaised: "#29292B"
text: "#FEFDFF"
textMuted: "#A3A2A5"
border: "#353537"
accent: "#F0D7FF"
accentFg: "#0B0B0C"
focusRing: "#F0D7FF"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.nav}"
textColor: "{colors.ink}"
border: "2px solid {colors.on-primary}"
height: 52px
padding: "16px 24px 16px 24px"
rounded: "{rounded.xs}"
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.nav}"
textColor: "{colors.ink}"
height: 32px
padding: "8px 16px 8px 16px"
rounded: 1600px
backgroundColor: "rgb(255, 253, 249)"
button-secondary:
textColor: "{colors.canvas}"
height: 36px
padding: "8px 16px 8px 16px"
fontSize: 16px
fontFamily: Figtree
fontWeight: 400
lineHeight: 1.3
rounded: "{rounded.xs}"
backgroundColor: "{colors.on-primary}"
button-filled-lg:
textColor: "{colors.ink}"
height: 36px
padding: "8px 16px 8px 16px"
fontSize: 16px
fontFamily: Figtree
fontWeight: 400
lineHeight: 1.3
rounded: "{rounded.xs}"
backgroundColor: "{colors.surface}"
card:
textColor: "{colors.ink}"
padding: "55px 0px 0px 0px"
fontSize: 16px
fontFamily: Figtree
fontWeight: 400
lineHeight: 1.3
rounded: "{rounded.sm}"
backgroundColor: "{colors.surface}"
card-sm:
textColor: "{colors.ink}"
padding: "8px 32px 8px 8px"
fontSize: 16px
fontFamily: Figtree
fontWeight: 400
lineHeight: 1.3
rounded: 12px
backgroundColor: "{colors.surface}"
badge-filled:
textColor: "rgb(55, 55, 52)"
border: "1px solid {colors.canvas}"
height: 24px
padding: "0px 7.8px 0px 7.8px"
fontSize: 16px
boxShadow: "rgba(0, 0, 0, 0.1) 1px 1px 3px 0px"
fontFamily: Figtree
fontWeight: 700
lineHeight: 1.3
rounded: 1600px
backgroundColor: "{colors.accent-2}"
badge-text:
textColor: "{colors.ink}"
height: 71.0312px
padding: "16px 16px 16px 16px"
fontSize: 16px
fontFamily: Figtree
fontWeight: 400
lineHeight: 1.3
rounded: 76px
backgroundColor: "{colors.canvas}"
navigation:
textColor: "{colors.ink}"
height: 52px
fontSize: 16px
fontFamily: Figtree
fontWeight: 400
lineHeight: 1.3
footer:
textColor: "{colors.ink}"
padding: "0px 0px 50px 0px"
fontSize: 16px
fontFamily: Figtree
fontWeight: 400
lineHeight: 1.3
link:
textColor: "{colors.ink}"
padding: "16px 16px 16px 16px"
fontSize: 16px
fontFamily: Figtree
fontWeight: 400
lineHeight: 1.3
rounded: "{rounded.lg}"
link-sm:
textColor: "{colors.ink}"
fontSize: 16px
fontFamily: Figtree
fontWeight: 400
lineHeight: 1.3
states:
other-focus:
target: other
state: focus
outline: none
input-focus:
target: input
state: focus
borderColor: "rgb(56, 152, 236)"
other-hover:
target: other
state: hover
opacity: 1
button-hover:
target: button
state: hover
transform: "scale(0.98)"
other-active:
target: other
state: active
outline: "rgb(255, 255, 255) 0px"
borderColor: "{colors.neutral-2}"
borderWidth: 1px
outlineColor: "rgb(255, 255, 255)"
link-hover:
target: link
state: hover
transform: "translate(0px)"
backgroundColor: "rgb(255, 253, 249)"
input-active:
target: input
state: active
outline: "rgb(136, 109, 194) 3px"
outlineColor: "rgb(136, 109, 194)"
outlineWidth: 3px
input-focus-visible:
target: input
state: focus-visible
outline: "rgb(136, 109, 194) 3px"
outlineColor: "rgb(136, 109, 194)"
outlineWidth: 3px
badge-hover:
target: badge
state: hover
boxShadow: none
transform: none
card-hover:
target: card
state: hover
backgroundColor: "{colors.surface}"
other-focus-visible:
target: other
state: focus-visible
outline: "transparent solid 0rem"
outlineColor: transparent
outlineWidth: 0rem
breakpoints:
- width: 375
containerWidth: 1920
gridColumns: 6
navLinksVisible: 0
menuToggleVisible: true
headingPx: 56
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 1920
gridColumns: 8
navLinksVisible: 0
menuToggleVisible: true
headingPx: 96
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1920
gridColumns: 8
navLinksVisible: 4
menuToggleVisible: false
headingPx: 120
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1920
gridColumns: 8
navLinksVisible: 4
menuToggleVisible: false
headingPx: 120
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 246
gridColumns: 8
navLinksVisible: 4
menuToggleVisible: false
headingPx: 120
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 62
gradientsFound: 0
rolesUnassigned: 6
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: false
semanticRampDeclared: false
tokens:
colors:
primary: "#F0D7FF"
accent-1: "#034F46"
accent-2: "#FFA946"
accent-3: "#34D399"
accent-4: "#FF6C4C"
canvas: "#FFFFEB"
surface: "#E4E4D0"
on-primary: "#1A1A1A"
neutral-1: "#333333"
neutral-2: "#000000"
typography:
display-xl:
font-family: "EB Garamond"
font-size: "96px"
font-weight: 400
line-height: 0.95
letter-spacing: "-2.88px"
display-xxl:
font-family: "EB Garamond"
font-size: "120px"
font-weight: 400
line-height: 0.85
letter-spacing: "-3.6px"
display-lg:
font-family: "EB Garamond"
font-size: "75px"
font-weight: 400
line-height: 1
letter-spacing: "-2.25px"
display-md:
font-family: "EB Garamond"
font-size: "64px"
font-weight: 400
line-height: 0.95
letter-spacing: "-1.92px"
display-sm:
font-family: "EB Garamond"
font-size: "48px"
font-weight: 400
line-height: 0.95
letter-spacing: "-1.44px"
display-lg-tight:
font-family: "EB Garamond"
font-size: "75px"
font-weight: 400
line-height: 0.5
letter-spacing: "-2.25px"
heading-md:
font-family: "Figtree"
font-size: "36px"
font-weight: 600
line-height: 1.3
letter-spacing: "0px"
heading-sm:
font-family: "EB Garamond"
font-size: "32px"
font-weight: 400
line-height: 0.95
letter-spacing: "-0.96px"
heading-xs:
font-family: "EB Garamond"
font-size: "20px"
font-weight: 400
line-height: 0.95
letter-spacing: "0px"
body-xl:
font-family: "EB Garamond"
font-size: "26.08px"
font-weight: 400
line-height: 0.95
letter-spacing: "0px"
body-lg:
font-family: "Figtree"
font-size: "18px"
font-weight: 600
line-height: 1.3
letter-spacing: "0px"
body-md-strong:
font-family: "Figtree"
font-size: "16px"
font-weight: 600
line-height: 1.3
letter-spacing: "0px"
body-md:
font-family: "Figtree"
font-size: "16px"
font-weight: 500
line-height: 1.3
letter-spacing: "0px"
body-sm:
font-family: "Figtree"
font-size: "14px"
font-weight: 500
line-height: 1.3
letter-spacing: "0px"
body-sm-uppercase:
font-family: "Figtree"
font-size: "14px"
font-weight: 500
line-height: 1.3
letter-spacing: "1.12px"
text-transform: uppercase
nav:
font-family: "Figtree"
font-size: "16px"
font-weight: 600
line-height: 1
letter-spacing: "0px"
caption:
font-family: "Figtree"
font-size: "12px"
font-weight: 600
line-height: 1.54
letter-spacing: "-0.24px"
spacing:
xxs: "4px"
xs: "8px"
sm: "12px"
md: "16px"
lg: "20px"
xl: "24px"
xxl: "28px"
xxxl: "32px"
section: "40px"
band: "44px"
rounded:
none: "0px"
xs: "8px"
sm: "16px"
md: "32px"
lg: "48px"
full: "9999px"
border-width:
thin: "1px"
medium: "2px"
opacity:
95: "0.95"
75: "0.75"
60: "0.60"
50: "0.50"
35: "0.35"
30: "0.30"
z-index:
base: 1
mid: 5
dropdown: 10
Wispr Flow's design language is elegant and refined, blending serif and sans-serif typography to convey both sophistication and modern accessibility. The palette emphasizes a warm cream canvas ({colors.canvas} — #FFFFEB) that evokes a paper-like, approachable quality, paired with a distinctive lavender primary ({colors.primary} — #F0D7FF) that signals interaction and brands the service as innovative yet trustworthy. The rich teal accent ({colors.accent-1} — #034F46) grounds hero sections and establishes visual hierarchy, while supplementary accents (orange, mint, coral) provide playful depth without overwhelming. Typography favors EB Garamond's classical serifs for display and headings—conveying intelligence and craft—balanced by Figtree's clean sans-serif for body and interface text, ensuring clarity and speed. The overall mood is professional yet warm, positioning Wispr Flow as a tool for serious creators who value both elegance and efficiency.
Key Characteristics:
{colors.on-primary} — #1A1A1A) and canvas for readability{colors.primary} — #F0D7FF): Lavender; primary CTA fills, active states, and brand mark accents. Reserved for high-intent interactions.{colors.accent-1} — #034F46): Deep teal used for hero bands, section dividers, and strong visual anchors. No semantic role.{colors.accent-2} — #FFA946): Warm orange applied to badge fills and accent elements. No semantic role.{colors.accent-3} — #34D399): Fresh green for layered decorative elements. No semantic role.{colors.accent-4} — #FF6C4C): Vibrant coral for accent highlights and motion. No semantic role.{colors.on-primary} — #1A1A1A): Deep charcoal; headings, primary text, and label colour on brand surfaces. High contrast against light backgrounds.{colors.surface} — #E4E4D0): Warm beige; card and panel backgrounds, secondary containers.{colors.neutral-1} — #333333): Dark gray for secondary text and borders.{colors.neutral-2} — #000000): Pure black for maximum contrast in buttons and heavy text.{colors.canvas} — #FFFFEB): Warm cream; default page background and primary surface.Primary (Display & Headings): EB Garamond (serif) with fallback Georgia, serif
Secondary (Body & Interface): Figtree (sans-serif) with fallback Segoe UI, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | EB Garamond | 120px | 400 | 0.85 | -3.6px | Hero headlines; ultra-tight leading for impact |
| Display XL | EB Garamond | 96px | 400 | 0.95 | -2.88px | Primary page titles |
| Display LG (Tight) | EB Garamond | 75px | 400 | 0.5 | -2.25px | Compressed display; alternate hero style |
| Display LG | EB Garamond | 75px | 400 | 1 | -2.25px | Secondary display; more breathing room |
| Display MD | EB Garamond | 64px | 400 | 0.95 | -1.92px | Section headings |
| Display SM | EB Garamond | 48px | 400 | 0.95 | -1.44px | Prominent callouts |
| Heading MD | Figtree | 36px | 600 | 1.3 | 0px | Strong sans-serif emphasis |
| Heading SM | EB Garamond | 32px | 400 | 0.95 | -0.96px | Serif subheadings |
| Heading XS | EB Garamond | 20px | 400 | 0.95 | 0px | Small serif emphasis |
| Body XL | EB Garamond | 26.08px | 400 | 0.95 | 0px | Large serif body text |
| Body LG | Figtree | 18px | 600 | 1.3 | 0px | Emphasis text; strong sans-serif |
| Body MD Strong | Figtree | 16px | 600 | 1.3 | 0px | Semi-bold copy |
| Body MD | Figtree | 16px | 500 | 1.3 | 0px | Standard body copy |
| Navigation | Figtree | 16px | 600 | 1 | 0px | Menu items; tight line height |
| Body SM | Figtree | 14px | 500 | 1.3 | 0px | Secondary text; links |
| Body SM Uppercase | Figtree | 14px | 500 | 1.3 | 1.12px | Labels, all-caps designations |
| Caption | Figtree | 12px | 600 | 1.54 | -0.24px | Fine print; metadata |
-3.6px to -0.96px) applied to serif headlines for sophisticated, tight composition. Never apply positive spacing to display sizes.Primary Button
{colors.primary} (#F0D7FF){colors.on-primary} (#1A1A1A)2px solid #1A1A1A{spacing.md} {spacing.xl} (16px 24px){rounded.xs} (8px)transform: scale(0.98), text color shifts to {colors.on-primary}3px solid #886DC2 (purple)Secondary Button (Filled)
#FFFDF9 (off-white){colors.on-primary} (#1A1A1A){spacing.xs} {spacing.md} (8px 16px){rounded.full} (9999px / pill)Dark Button
{colors.on-primary} (#1A1A1A)#FFFDF9{spacing.xs} {spacing.md} (8px 16px){rounded.xs} (8px)Light Fill Button
{colors.surface} (#E4E4D0){colors.on-primary} (#1A1A1A){spacing.xs} {spacing.md} (8px 16px){rounded.xs} (8px)background-color: #FFFDF9Default Card
{colors.surface} (#E4E4D0){colors.on-primary} (#1A1A1A){spacing.xl} 0 0 0 (24px top){rounded.sm} (16px)background-color: #E4E4D0 (subtle darken)Small Card
{colors.surface} (#E4E4D0){colors.on-primary} (#1A1A1A)2px solid rgba(26, 26, 26, 0) (transparent){spacing.xs} {spacing.xl} {spacing.xs} {spacing.xs} (8px 32px 8px 8px)Text Input (Focus State)
1px solid (default), on focus: 3px solid #8D65C2 (purple outline){rounded.xs} (8px)rgb(136, 109, 194) 3px on focus#FFFDF9{colors.on-primary}{spacing.md} (16px)Navigation Bar
{colors.on-primary} (#1A1A1A)color: #1A1A1A, background-color: transparentFilled Badge
{colors.accent-2} (#FFA946)#373734 (dark brown)1px solid #FFFDF90 7.8px (pill padding){rounded.full} (9999px / pill)rgba(0, 0, 0, 0.1) 1px 1px 3px 0pxText Badge
#FFFDF9{colors.on-primary} (#1A1A1A){spacing.md} (16px)Base unit: {spacing.xs} (8px)
Scale:
{spacing.xxs} = 4px — micro spacing between inline elements{spacing.xs} = 8px — tight spacing, form labels to inputs{spacing.sm} = 12px — small gaps within components{spacing.md} = 16px — standard padding; button internals, card gutters{spacing.lg} = 20px — breathing room between related sections{spacing.xl} = 24px — component-level separation{spacing.xxl} = 28px — section spacing{spacing.xxxl} = 32px — large vertical rhythm{spacing.section} = 40px — major section padding{spacing.band} = 44px — hero band and full-width paddingSpacing emphasizes breathing room around typography and hierarchical separation. Generous vertical padding ({spacing.section} to {spacing.band}) isolates hero sections, testimonials, and call-to-action regions. Horizontal gutters are tight (often 0 to enforce full-width color bands), allowing content to expand edge-to-edge while text remains centered or padded internally.
{rounded.none} = 0px — cards, images, overlays (sharp, flat aesthetic){rounded.xs} = 8px — buttons, inputs (subtle rounding for affordance){rounded.sm} = 16px — card containers (gentle curve){rounded.md} = 32px — large component corners{rounded.lg} = 48px — large link/hero containers{rounded.full} = 9999px — badges, pill buttons (fully rounded)1px) — input borders, subtle dividers2px) — button strokes, primary borders (used on primary button border and card borders)| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow; solid color blocking | Base cards, buttons, default surfaces |
| Lifted | Subtle opacity shift or hover highlight | Hover states; interactive feedback |
| Floating | None defined; system relies on color blocking | (Not used; elevation managed via background colour) |
Shadow Philosophy:
The design system eschews traditional drop shadows in favor of color blocking and opacity shifts. Depth emerges from background colour changes (#E4E4D0 surfaces rising against #FFFFEB canvas) and hover opacity modulations. One exception: badges employ a micro shadow (rgba(0, 0, 0, 0.1) 1px 1px 3px 0px) for subtle dimensionality. This approach prioritizes flatness and clarity, making spatial hierarchy obvious through hue and value rather than simulated light.
EB Garamond headlines with letter-spacing between -3.6px and -0.96px. Never flatten this to 0.#E4E4D0 vs. #FFFFEB). Use opacity modulation (0.95 down to 0.30) for layered interactions.#FFFFEB), beige surfaces (#E4E4D0), and lavender accent (#F0D7FF) create a cohesive, approachable tone. Don't cool or desaturate.{rounded.full} (9999px) consistently to badges and pill buttons. This signals interactive affordance and playfulness.{rounded.full}; standard buttons use {rounded.xs}. Sharp cards (0px) underscore minimalism.{rounded.none} (0px) for sharp, editorial impact.-3.6px to -0.96px range is non-negotiable for display sizes. Positive or zero tracking flattens the distinctive voice.{rounded.xs} to badges. Badges must be pills ({rounded.full}) to signal compactness and playfulness.active, disabled, or focus-visible states are guaranteed across all components; verify against extracted interaction data.| Breakpoint | Width | Grid Columns | Nav Links Visible | Menu Toggle | Largest Heading | Body Text | Section Padding X |
|---|---|---|---|---|---|---|---|
| Mobile | 375px | 6 | 0 | yes | 56px (inferred) | 16px | 0px |
| Tablet | 768px | 8 | 0 | yes | 96px ({typography.display-xl}) | 16px | 0px |
| Desktop | 1024px | 8 | 4 | no | 120px ({typography.display-xxl}) | 16px | 0px |
| Desktop LG | 1280px | 8 | 4 | no | 120px | 16px | 0px |
| Desktop XL | 1440px | 8 | 4 | no | 120px | 16px | 0px |
Navigation collapses to menu toggle at 768px (tablet breakpoint). Display hierarchy escalates from mobile (56px or smaller) through tablet (96px) to desktop (120px), emphasizing progressive disclosure and scalability.
Minimum touch target size: 44–48px (standard mobile affordance). Buttons measured at 36–52px height; badges at 24px are borderline and should include surrounding padding for mobile. Links and tap zones require at least {spacing.lg} (20px) minimum clearance on mobile.
768px, horizontal nav menu collapses into a hamburger toggle. Visible link count drops to 0 at tablet; primary nav moves off-screen.0.85–0.95) to prevent overflow.{colors.primary} — #F0D7FF) — lavender fills on primary buttons{colors.canvas} — #FFFFEB) — warm cream page background{colors.surface} — #E4E4D0) — beige cards and panels{colors.on-primary} — #1A1A1A) — deep charcoal for readability{colors.accent-1} — #034F46) — rich teal for sectional emphasis#FFA946), Mint (#34D399), Coral (#FF6C4C) — layered for visual interest; no semantic roleTypography first: All display and headline text must use EB Garamond with negative letter-spacing (-3.6px to -0.96px). Body and UI copy defaults to Figtree, 16px, weight 500–600.
Color blocking over shadows: Establish depth through surface colour shifts, not drop shadows. Cards are flat (background: #E4E4D0), not lifted. Hover states darken or shift opacity (0.75–0.95).
Button hierarchy: Primary button = lavender (#F0D7FF) + 2px border + {rounded.xs}. Secondary/pill buttons = light fill (#FFFDF9 or #E4E4D0) + {rounded.full}. Dark buttons = #1A1A1A text on solid backgrounds.
Spacing discipline: Use the scale (4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 44px). Never eyeball. Padding inside components: {spacing.md} (16px). Section gaps: {spacing.section} (40px) to {spacing.band} (44px).
Border radius rules: Cards and large containers = 0px (sharp). Small containers and buttons = 8px ({rounded.xs}). Badges and pills = 9999px ({rounded.full}).
Focus / Interaction: Input focus = 3px solid #8D65C2 outline. Button hover = transform: scale(0.98) + color consistency. Link hover = optional background shift (extracted data shows #F0D7FF and #FFFDF9 variants). Verify against interaction extraction before adding undocumented states.
Responsive sizing: Display headline scales 56px (mobile) → 96px (tablet) → 120px (desktop). Body text stays 16px across all breakpoints. Navigation collapses at 768px breakpoint.
Opacity modulation: Use 0.95 for near-opaque overlays, 0.75 for moderate hover, 0.50 for translucent masks, 0.30 for subtle washes. Never rely on shadows.
Brand accent sparingly: Lavender (#F0D7FF) is reserved for primary CTAs, active states, and brand marks. Don't over-apply; it loses impact through repetition.
Accessibility: Always verify sufficient contrast between text and background. Ink (#1A1A1A) on Canvas (#FFFFEB) ≈ 15:1. Accent text on primary background may require validation.
{colors.accent-1} through {colors.accent-4}, plus {colors.neutral-1} and {colors.neutral-2} have no measured application in the extraction. They appear decorative or reserved for context not visible in the landing page.:hover, :focus, and :active states are present but fragmented across components. Not all interactive elements have complete state documentation; verify component-specific interactions during implementation.transform values (e.g., scale(0.98), rotate(45deg)) are noted but no formal motion system was extracted.1–7) and one dropdown layer (10) were measured. A full stacking order for modals, tooltips, sticky headers, and overlays may exceed this list.768px is marked but exact layout shifts (reflow, column changes, font size adjustments at intermediate widths) are not fully documented.Document Version: 1.0
Last Updated: Extracted from https://wisprflow.ai/
Confidence: High for landing-page layout and typography; Medium for component interaction states and responsive detail; Low for authenticated surfaces and dark mode.