kivi

Overview

kivi is a voice dictation utility for macOS that bridges the gap between spoken thought and polished written text. It serves developers, writers, and knowledge workers who value precision and speed. The design aesthetic is "Dithered Naturalism"—a near-black canvas (#0b0e0a) layered with subtle, dithered artwork (moon, flowers, trails) that emerges at rest and clarifies under the pointer's lens, creating a sense of discovery and depth. The interface itself is minimal and direct: a vibrant lime-green accent (#a8e063, or display-p3 0.62 0.9 0.32 in wide gamut) commands attention on CTAs and interactive states, while warm amber (#e8892b) and cool blue (#0a66ff) provide secondary accents for status and feedback. The emotional response is calm precision—never frantic, never cluttered. The user feels in control, with the app receding into the background.

The brand voice is direct, technical, and warm. Sentences are short and active: "hold fn and talk," "fix it once. kivi remembers," "choose how you sound, app by app." The vocabulary avoids marketing jargon; instead, it names concrete actions and outcomes. Tone is confident without arrogance, helpful without condescension. Example: "Filler words, spoken email addresses and last-second corrections are handled as you speak."

Colors

The color system operates on a principle of "luminous minimalism": a near-black ground (#0b0e0a, --stage) provides a neutral canvas, while a single bright accent (lime-green #a8e063) dominates all interactive moments. This accent is the primary color—used on the hero CTA ("download for mac"), hover states, focus rings, and badges. It is never used for body text or backgrounds, preserving its power as a call-to-action signal.

Surface colors form a tight stack within the dark register: surface (#0b0e0a) is the page ground; surface-dim (#060a05) is the deepest layer; surface-bright (#121710) and surface-container (#1a2016) provide subtle elevation for cards and panels. On-surface text is a warm cream (#f4f1e6, --dusk-ink), with a muted variant (#b9b6a8, --dusk-ink-2) for secondary informatio

Typography

The type system pairs two distinct families: Fraunces (serif, variable weight 100–900) for display and headlines, and Switzer (sans-serif, variable weight 100–900) for body and UI. This pairing creates a visual hierarchy that feels both editorial and technical—Fraunces brings warmth and personality to headings ("you talk. kivi types."), while Switzer provides clarity and precision for instructions and labels. Display text (97px, fontWeight 460, lineHeight 104px, letterSpacing -0.02em) is set loose and generous, inviting the eye to linger. Headline-lg (48px, fontWeight 460) and headline-md (32px, fontWeight 460) maintain the same weight, relying on size alone for distinction. Body text (16px, fontWeight 460, lineHeight 24px, letterSpacing -0.011em) is set tight and readable, with generous l

Layout

The page uses a 12-column grid with a max-width of 1160px and a 32px gutter, centered with calc(100% - 64px) to maintain breathing room on all sides. Sections are separated by lg spacing (40px) for rhythm, with xl spacing (64px) reserved for major chapter breaks. The hero section occupies the full viewport height, with the headline centered and the CTA positioned below. Cards and content blocks use md spacing (24px) for internal padding and sm spacing (12px) for element separation. The dithered artwork layer extends beyond the viewport boundaries (via --art-overlap-top and --art-overlap-bottom), creating a sense of continuous depth. Container padding is 32px on desktop, reducing to 24px on tablet and 16px on mobile. The grid is fluid, using clamp() for responsive sizing of sheet-radius (28

Elevation & Depth

Depth is conveyed through a layered shadow system and subtle background shifts rather than bold contrast. The base layer (Level 0) is the stage itself—a fixed, near-black gradient with animated aurora glows (green radial-gradient at 74vw 66vw, gold at 72vw 58vw) that drift subtly over 24–36 seconds. Level 1 (cards on dark) uses a soft shadow (0 2px 4px rgba(10, 12, 8, 0.12)) and a 1px hairline border at rgba(255, 255, 255, 0.08), creating a barely-visible frame. Level 2 (elevated panels) applies a medium shadow (0 4px 24px rgba(10, 12, 8, 0.16)) and a stronger border at rgba(255, 255, 255, 0.1

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners are used sparingly and intentionally, never as decoration. Buttons use xl radius (20px) to feel approachable and clickable, with a 1px border that reinforces the interactive boundary. Input fields and small UI elements use DEFAULT radius (4px) for a crisp, technical appearance. Cards and panels use lg radius (12px) as a middle ground, suggesting containment without softness. The sheet-radius (28px to 44px, responsive via clamp()) is reserved for major content blocks and modals, creating a sense of enclosure. The full radius (99

Components

Action Elements Buttons are the primary interactive element. The button-primary uses the lime-green accent (#a8e063) with a 1px inset highlight (0 1px rgba(255, 255, 255, 0.12) inset) to suggest depth. On hover, the background darkens to #24684a and the inset shadow strengthens to 0 1px rgba(255, 255, 255, 0.16) inset, plus a 3px outer ring at rgba(31, 90, 63, 0.35). On active, the button scales to 0.98 and translates down 1px (transform: translateY(1px) scale(0.98)), providing tactile feedback. On focus-visible, a 3px outline in orange (#e8892b) appears with a 2px offset, and the box-shadow expands to 0 0 0 8px rgba(251, 250, 245, 0.85), creating a soft halo. The transition duration is 150ms (--dur-micro) with cubic-bezier(0.16, 1, 0.3, 1) easing (--ease-enter). Button-secondary uses

Do's and Don'ts

**Do**

• Do use the lime-green accent (#a8e063) exclusively for CTAs, focus states, and interactive highlights—never for body text or passive surfaces.
• Do maintain the dithered artwork layer as a subtle background presence (12% opacity at rest, full clarity under pointer lens) to create visual depth without distraction.
• Do pair Fraunces headlines with Switzer body text to create a warm-technical hierarchy that feels both editorial and precise.
• Do use the full window-shadow-dusk stack (8-layer shadow with 1px borders) only for modals and floating sheets; reserve sm and md shadows for cards and panels.
• Do apply 150ms transitions (--dur-micro) with cubic-bezier(0.16, 1, 0.3, 1) easing to all interactive state changes (hover, focus, active) for a snappy, responsive feel.
• Do respect prefers-reduced-motion by removing all animations and transitions when the user has enabled reduced motion in their OS settings.

**Don't**

• Don't use the lime-green accent for anything other than interactive elements—it loses its power if diluted across passive surfaces.
• Don't apply rounded corners to the body or stage; reserve them for interactive elements (buttons, cards, inputs) to create a visual grammar of interactivity.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; instead, use the warm-neutral palette (cream #f4f1e6 on dark, ink #1b1d18 on light) to maintain the dusk-to-daylight aesthetic.
• Don't apply shadows to elements on the dithered artwork layer without first checking the z-index stack; shadows should never obscure the artwork or create visual confusion.
• Don't mix Fraunces and Switzer weights arbitrarily; use Fraunces (460 weight) for all headlines and Switzer (460 for body, 640 for labels) to maintain consistency.
• Don't animate the aurora glows (stage-drift-green, stage-drift-gold) on reduced-motion; instead, set animation-play-state: paused and keep the glows static.