---
version: alpha
name: Orion (Kagi)
description: Near-white canvas with a faint lavender lift, a single violet-purple brand accent, Lufga's geometric warmth at every size, and a clean precision that says privacy doesn't have to be austere.

colors:
  # Surfaces — off-white with the faintest lavender warmth
  background: "#f8f7fc"       # estimated — near-white lavender-tinted canvas from screenshot
  surface: "#ffffff"
  surface-tint: "#f2f0f9"     # estimated — slightly deeper lavender for inset cards/feature tiles
  surface-dark: "#191919"     # near-black for inverted sections

  # Ink — deep charcoal, not pure black
  ink: "#191919"              # from raw hover/focus source — the true body text color
  on-background: "#191919"
  on-surface: "#191919"
  ink-secondary: "#525252"    # medium gray — supporting copy and nav labels
  ink-muted: "#8e8e8e"        # soft gray — captions, metadata, secondary nav
  ink-inverted: "#ffffff"     # text on dark surfaces

  # Brand accent — violet-purple
  primary: "#914ff2"          # saturated violet — primary CTA button fill
  on-primary: "#ffffff"
  primary-deep: "#7b43ce"     # hover darken of primary — from interactive delta
  primary-soft: "#8d5bbf"     # muted variant — nav links, extensions, About, Help text
  primary-container: "#ede5fb" # estimated — light violet tint for badge containers

  # Interactive states
  hover-bg: "#f7f7f7"         # was rgba(247,247,247,0.95) — nav link hover wash, flattened
  hover-ink: "#1f1f1f"        # nav link ink on hover
  focus-ring: "#914ff2"       # violet focus ring matching primary
  focus-tint: "#ede5fb"       # estimated — soft violet glow for inputs

  # Borders + dividers
  border: "#e5e3f0"           # estimated — hairline lavender divider
  border-soft: "#ebebeb"      # was rgba(0,0,0,0.08) over white — flattened

  # Shadow
  shadow-soft: "#d4cfe8"      # estimated — lavender-tinted soft shadow

typography:
  display:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  heading-small:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.63
    letterSpacing: 0px
  body-lead:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0.4px
  caption:
    fontFamily: "Lufga, Inter, system-ui, -apple-system, 'Segoe UI', sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 100px

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  # Transparent nav — scrolls sticky over lavender canvas
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary-soft}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 12px 40px

  nav-link-hover:
    backgroundColor: "{colors.hover-bg}"
    textColor: "{colors.hover-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.sm}"
    padding: 8px 12px

  # Primary CTA — violet pill ("Download for macOS")
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-focus:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Secondary / ghost button ("+ Orion Plus")
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-secondary-hover:
    backgroundColor: "{colors.hover-bg}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 20px

  # App Store badge — black pill
  button-appstore:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink-inverted}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Feature card — white tile floating on lavender canvas
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px

  # Tinted card — soft lavender inset surface
  card-tint:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px

  # Product screenshot frame — rounded container with diffuse shadow
  media-frame:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.xl}"
    padding: 0px

  # Form input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px

  # Accent badge — violet container
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # Link — violet, inline
  link:
    textColor: "{colors.primary-soft}"
    typography: "{typography.body}"
  link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
---

# Orion Design System

## Overview

Orion by Kagi opens on a canvas that's almost white but not quite — the faintest wash of lavender lifts it off clinical neutrality, hinting at the violet accent before a single button appears. It's a subtle move, the kind designers make when they want warmth without color: not cream, not gray, not pure white, but a page-shade that already belongs to the brand. Against this backdrop the Orion hero sets its stall immediately: "WebKit. Extensions. Privacy." in bold Lufga at 60px, tight-leaded at 1.08, followed by a single violet checkmark icon and the punchline "Pick all three." The page knows exactly what it is and says it in eleven words.

The chromatic discipline is notable. The entire palette is built around one hue: violet-purple. `{colors.primary}` — a saturated `#914ff2` — appears once in the CTA button, once as the checkmark, nowhere else at full saturation. The rest of the purple family (`{colors.primary-soft}`, `{colors.primary-container}`) does the supporting work: nav links, badge tints, hover states. Everything else is white, near-black, and two grays. There are no competing accent families, no teal, no coral — just violet doing all the brand lifting across a narrow range of saturation. The effect is focused and premium, the kind of discipline that reads as confidence rather than constraint.

Lufga, a self-hosted geometric grotesque, carries all the type at every level. It's a friendlier sibling to Futura — round dots, slightly humanist proportions, optically even at display sizes — and it gives Orion a character that Inter or SF Pro wouldn't. At 700 for the hero and 600 for subheadings, it has authority without heaviness. At 400 for body copy at 18–24px, it reads comfortably. The fallback chain (Inter → system-ui) keeps things coherent everywhere Lufga fails to load.

**Key Characteristics:**
- Lavender-lifted off-white canvas (`{colors.background}`) — warm enough to feel intentional, neutral enough to never intrude
- Single violet brand accent (`{colors.primary}`) at full saturation only for the CTA and iconographic checkmark
- Muted violet (`{colors.primary-soft}`) as the nav and secondary link color — the accent staying legible without shouting
- Lufga geometric grotesque at all sizes (`{typography.display}` through `{typography.caption}`) — one typeface, no serif fallback
- Display text at weight 700, line-height 1.08 — compact and authoritative for the hero
- All-pill CTA button (`{rounded.pill}`) — the one emphatic soft shape in the system
- Generous rounded corners on cards (`{rounded.xl}` 24px) and media frames — approachable, not sharp-edged enterprise
- Diffuse drop shadows (`0 1px 28px -4px rgba(0,0,0,0.14)`) — quiet elevation, never heavy
- Body copy at 24px/400 for the hero subhead — readable at a glance, not a feature list
- Strong typographic contrast between 700 hero and 400 body makes hierarchy scannable without a second typeface
- Breakpoints at 360, 640, 768, 1024px — full mobile-first stack for a browser with iOS and iPadOS builds

## Colors

### Primary
- **Lavender Canvas** (`{colors.background}`): The page ground. Nearly-white with the faintest violet undertone — it belongs to the brand before any button appears.
- **Pure White** (`{colors.surface}`): Cards, modals, inputs, and product screenshot frames. The clean inner surface.
- **Near-Black** (`{colors.ink}`): The body text and most headings. `#191919` rather than pure black — slightly warmer, intentionally not maximum contrast.

### Brand Accent
- **Orion Violet** (`{colors.primary}`): The one saturated brand color. Primary CTA button fill, the checkmark hero icon. Used once or twice per viewport.
- **Violet Deep** (`{colors.primary-deep}`): Button hover darken — the violet pressing a shade darker.
- **Violet Soft** (`{colors.primary-soft}`): Nav links, Extensions, About, Help labels. Muted violet that keeps the brand present without competing with the CTA.
- **Violet Container** (`{colors.primary-container}`): Light violet tint for badge and chip backgrounds.
- **On Primary** (`{colors.on-primary}`): White text and icons sitting on the violet button.

### Text Tiers
- **Secondary Ink** (`{colors.ink-secondary}`): `#525252` medium gray — supporting body copy, feature descriptions.
- **Muted Ink** (`{colors.ink-muted}`): `#8e8e8e` soft gray — captions, metadata, nav items at rest.
- **Inverted Ink** (`{colors.ink-inverted}`): White on the dark App Store badge and any inverted surface.

### Interactive
- **Hover Background** (`{colors.hover-bg}`): Near-white wash for nav link hover states (flattened from `rgba(247,247,247,0.95)`).
- **Hover Ink** (`{colors.hover-ink}`): Near-black ink revealing on nav hover.
- **Focus Ring** (`{colors.focus-ring}`): Violet focus ring — brand-consistent for keyboard navigation.

### Surfaces & Borders
- **Surface Tint** (`{colors.surface-tint}`): Slightly deeper lavender for inset feature tiles.
- **Surface Dark** (`{colors.surface-dark}`): Near-black for the App Store pill button and potential dark sections.
- **Border Soft** (`{colors.border-soft}`): Near-invisible hairline divider, flattened from `rgba(0,0,0,0.08)` over white.
- **Shadow Soft** (`{colors.shadow-soft}`): Lavender-tinted shadow base, giving cards a warm lift.

> Note: Navigation link hover backgrounds were captured as `rgba(247,247,247,0.95)` — flattened to opaque `{colors.hover-bg}` for Google format.

## Typography

### Font Family
- **Primary**: `Lufga` — a self-hosted geometric grotesque. Two weights: regular (400) and semibold (600) are served via `.woff2`. Bold (700) is synthesized or loaded separately for display. Fallbacks: `Inter, system-ui, -apple-system, 'Segoe UI', sans-serif`.
- **System Fallback**: `SF Pro Text` appears for some macOS-specific body contexts (size 15px/400) — the brand yields to system type when appropriate for a macOS browser.
- No serif, no mono, no variable axes detected — Lufga does everything.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Reference those tokens directly (`{typography.display}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display` | 60px/700 hero headline ("WebKit. Extensions. Privacy.") |
| `heading-section` | 36px/600 section headings |
| `heading-sub` | 24px/600 feature subheadings |
| `heading-small` | 20px/600 card titles and sub-feature labels |
| `body-large` | 24px/400 hero subhead paragraph — large, airy, approachable |
| `body-lead` | 18px/400 lead paragraphs and feature descriptions |
| `body` | 16px/400 general body copy |
| `nav-link` | 16px/500 navigation items |
| `button-ui` | 16px/600 with 0.4px tracking — button labels, slightly spaced |
| `caption` | 12px/400 fine print and metadata |

### Principles
- **One typeface for everything**: Lufga from 12px captions to 60px heroes. No contrast typeface, no serif moment — consistency is the brand.
- **Weight does the hierarchy work**: 700 for hero, 600 for subheadings, 400 for body — clear gradation without font-switching.
- **Tight display leading**: 1.08 at 60px creates a compact headline block that reads as a single graphic unit.
- **Letter-spacing only on buttons**: The 0.4px tracking on `{typography.button-ui}` opens up the label text at action size. All other type tracks at 0.
- **Generous body leading**: 1.5–1.63 across body sizes keeps paragraphs scannable and open.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Spacing is practical rather than theatrical — it doesn't try to buy calm through excessive whitespace the way Zen Browser does. The rhythm is confident: 40–64px between feature sections, 100px only for the grandest separations. The product page is dense enough to communicate a feature-rich browser, airy enough to not feel like an enterprise spec sheet.

### Grid & Container
- Max content width: approximately 1080px, centered
- Hero: two-column centered with product screenshots flanking the CTA area on desktop
- Feature sections: alternating text-and-screenshot layouts, swapping sides
- Platform badge row: horizontal flex of pill chips (macOS, iOS, iPadOS) centered below CTAs
- Breakpoints: 360px (small mobile) → 640px (mobile) → 768px (tablet) → 1024px (desktop)

### Whitespace Philosophy
- **Functional generosity**: enough breathing room that the feature copy reads without competition, never so much that the page feels thin.
- **Sections divide by feature, not visual drama**: each scroll depth introduces a new capability of the browser, not a new art direction.
- **CTAs breathe with 40px of vertical padding** above and below the action zone.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page text and the lavender canvas itself |
| Subtle (Level 1) | `0 1px 18px -4px rgba(0,0,0,0.12)` | Resting cards and nav containers |
| Card (Level 2) | `0 1px 28px -4px rgba(0,0,0,0.14)` | Product screenshot frames, feature cards |
| Elevated (Level 3) | `0 4px 24px -4px {colors.shadow-soft}` | Primary CTA hover, modals (estimated) |
| Focus Ring | `0 0 0 3px {colors.focus-ring}` | Keyboard focus — violet ring |

**Shadow Philosophy**: Orion uses diffuse, long-range shadows — `28px blur, -4px spread` at only 14% opacity. The result is a soft aureole around product frames and cards that reads as "floating on the lavender canvas" rather than depth-stacking. There is no colored glow, no inner highlight, no heavy drop. The lavender tint of `{colors.shadow-soft}` keeps shadows from looking purely black, staying brand-adjacent. Focus rings break from the shadow neutrality with full-saturation violet.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard-edged dividers (rare) |
| `sm` | 6px | Small interactive chips, dropdown items |
| `md` | 10px | Inputs, small cards |
| `lg` | 16px | Feature list items, inner tiles |
| `xl` | 24px | Feature cards, product screenshot frames |
| `pill` | 9999px | Primary CTA and secondary buttons — the signature shape |

Orion's radius personality is binary at the extremes: the most prominent interactive elements are full pills (`{rounded.pill}`), while content cards are gently large-rounded (`{rounded.xl}` 24px). The pill CTA is the signature — it reads as friendly and approachable, at odds with the idea that a privacy browser must look austere or technical.

## Components

The complete component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Button variants
- **`button-primary`** — Violet pill (`{colors.primary}`) with white label, 16px/600 Lufga. The single prominent download CTA. On hover, deepens to `{colors.primary-deep}`.
- **`button-secondary`** — White pill with dark label — the "Orion Plus" upgrade and ghost action style. On hover, washes to `{colors.hover-bg}` and shifts label to violet.
- **`button-appstore`** — Black pill, white label — the App Store badge in-line with the primary CTA.

### Cards
- **`card`** — White tile on the lavender canvas, `{rounded.xl}` corners, soft diffuse shadow. The feature section building block.
- **`card-tint`** — Slightly lavender-tinted surface for inset detail content.

### Media
- **`media-frame`** — Product screenshots in a `{rounded.xl}` frame with diffuse shadow, suggesting a window into the actual browser UI.

### Inputs
- **`input`** — White field, hairline border, `{rounded.md}`. Focus state brings the violet ring (`{colors.focus-ring}`).

### Badges
- **`badge`** — Violet-tinted container (`{colors.primary-container}`) with violet text — for "New", version chips, or platform labels.

### Navigation
- **`nav-bar`** — Transparent bar on the lavender canvas. Violet-soft nav links at rest; a white pill button ("+ Orion Plus") on the right. On hover, links wash to near-white with near-black ink — intentionally retreating from brand color into legibility.

### Links
- **`link`** — Violet-soft (`{colors.primary-soft}`) for inline links. Hover deepens to full `{colors.primary}`.

## Do's and Don'ts

### Do
- Open every layout on the lavender canvas (`{colors.background}`) — the off-white warmth is the brand
- Reserve full-saturation violet (`{colors.primary}`) for the single primary CTA and brand iconography only
- Use `{colors.primary-soft}` for navigation and supporting interactive elements — keep the primary rare
- Always pill-radius (`{rounded.pill}`) the main CTA button — no other shape reads as "Orion"
- Float product screenshots and cards in `{rounded.xl}` frames with diffuse, low-opacity shadows
- Let Lufga's 700 weight do display work; drop to 400 for body — the single-typeface system relies on weight contrast
- Match the 0.4px letter-spacing on button labels (`{typography.button-ui}`) — it's the one place tracking is intentional
- Keep the near-black (`{colors.ink}`) for body text rather than pure black — the slight warmth matters at reading density

### Don't
- Don't add a second accent color — the entire brand runs on a single violet hue at varying saturation
- Don't use `{colors.primary}` for body text or decorative elements — it belongs to interactive intent only
- Don't use sharp corners on buttons — the pill (`{rounded.pill}`) is the Orion button signature; square CTAs look wrong
- Don't break from Lufga for any display or body context — the single-typeface discipline is the typographic identity
- Don't use heavy or black-tinted shadows — diffuse, 14%-opacity drops only; colored shadows (`{colors.shadow-soft}`) stay faint
- Don't use white as the base page color — the background is the faintly-lavender `{colors.background}`, not `{colors.surface}`
- Don't set secondary nav text to near-black at rest — `{colors.ink-muted}` or `{colors.primary-soft}` keeps them receding until hover
- Don't mix letter-spacing values across buttons — the system has one tracking value (0.4px on `{typography.button-ui}`) and zero elsewhere

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <360px | Single column, hero font scales down, CTAs stack vertically |
| Mobile | 360–640px | Single column, product screenshots stack below CTA |
| Tablet | 640–1024px | Two-column feature rows may begin, nav may condense |
| Desktop | 1024px+ | Full two-column hero and alternating feature sections |
| Large Desktop | >1280px | Wide lavender margins, content stays ~1080px centered |

### Touch Targets
- Pill buttons have 12px vertical padding rendering at ~42px tall — meets 44px tap-target guideline within margin
- Nav items have 8px padding on hover zones for generous tapping on touch devices
- Platform chips (macOS, iOS, iPadOS, Linux, Windows) row is touch-friendly at their native 40–45px height

### Collapsing Strategy
- Hero two-column layout collapses to centered single-column on tablet and below
- The 60px Lufga display scales proportionally on mobile (likely 36–40px at small viewport)
- Two CTA pills stack vertically below the hero copy on narrow widths
- Platform badge strip may wrap to two rows at mobile widths
- Feature screenshot-and-text alternating sections collapse to stacked order (screenshot below text)

### Image Behavior
- Product screenshots stay in their `{rounded.xl}` frames at all sizes
- Screenshots scale to container width, never tile
- macOS and iOS browser screenshots may swap prominence (iOS screenshot leads on small viewports)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Lavender canvas (`{colors.background}`)
- Text: Near-black (`{colors.ink}`)
- Secondary text: `{colors.ink-secondary}`
- Muted text / nav: `{colors.ink-muted}`
- Brand accent / CTA: Orion Violet (`{colors.primary}`)
- Nav links: `{colors.primary-soft}`
- CTA on: `{colors.on-primary}`
- Border: `{colors.border-soft}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Build the Orion hero section: lavender canvas background (`{colors.background}`). Centered headline in Lufga 700 at 60px, line-height 1.08, color `{colors.ink}`. Second line pairs a violet checkmark icon with the phrase 'Pick all three.' in the same size. Below it, a 24px/400 subhead paragraph in `{colors.ink-secondary}`. Two pill CTAs side by side: a violet primary (`{components.button-primary}`) labeled 'Download for macOS' and a black App Store pill (`{components.button-appstore}`). Map the CTAs using `{typography.button-ui}` (600 weight, 0.4px letter-spacing)."
- "Design an Orion feature card: white background (`{colors.surface}`), `{rounded.xl}` corners (24px), a diffuse drop shadow `0 1px 28px -4px rgba(0,0,0,0.14)`, 32px padding, Lufga heading in `{typography.heading-sub}` at `{colors.ink}`, body text in `{typography.body-lead}` at `{colors.ink-secondary}`."
- "Create the Orion primary CTA button: violet fill (`{colors.primary}`), white label (`{colors.on-primary}`), Lufga 600 16px (`{typography.button-ui}`) with 0.4px letter-spacing, full pill radius (`{rounded.pill}`), 12px 24px padding. On hover, darken fill to `{colors.primary-deep}`. On focus, add `0 0 0 3px {colors.focus-ring}` outline."
- "Build the Orion nav bar: transparent lavender-canvas background (`{colors.background}`), logo left, centered platform links in `{typography.nav-link}` at `{colors.primary-soft}`. On hover each link gets a near-white wash (`{colors.hover-bg}`) with near-black ink (`{colors.hover-ink}`) using `{rounded.sm}` corners. A 'Orion Plus' ghost pill on the right using `{components.button-secondary}`."
- "Add an Orion platform badge strip: row of horizontal pill chips ('macOS', 'iOS', 'iPadOS', 'Linux', 'Windows') centered below the hero CTA. Each chip uses `{typography.caption}`, `{colors.ink-muted}` text, `{colors.border-soft}` outline, `{rounded.pill}` radius, and 4px 10px padding. Chips flush-adjacent with 8px gap."
- "Render an Orion product media frame: browser screenshot in a `{rounded.xl}` (24px) container on the lavender canvas (`{colors.background}`) with shadow `0 1px 28px -4px rgba(0,0,0,0.14)`. No border. The frame should appear to float — a quiet, soft-edged window into the browser UI."

### Iteration Guide

1. **Start on lavender canvas** (`{colors.background}`) — this is not white and not gray; the faint violet warmth is the first brand signal.
2. **Text defaults to near-black** (`{colors.ink}`) — supporting copy steps down to `{colors.ink-secondary}` then `{colors.ink-muted}`. Never pure black.
3. **Violet is one instrument** — `{colors.primary}` fires once: the primary CTA. `{colors.primary-soft}` handles nav and links. No other hue family exists.
4. **Every button is a pill** — `{rounded.pill}` for CTAs is non-negotiable. Cards and frames use `{rounded.xl}` (24px). Nothing sharper than `{rounded.md}` (10px) on interactive elements.
5. **Lufga only** — no serif, no mono, no mixed font strategy. Weight (400 → 700) is the hierarchy.
6. **Shadows are diffuse and faint** — `1px 28px -4px` at 14% black. Anything heavier reads as decoration, not depth.
7. **Let the checkmark land** — the single violet `{colors.primary}` checkmark or icon in the hero is the emotional punctuation. Don't dilute it with more violet elements nearby.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Orion (Kagi). Brand names and trademarks belong to their respective owners.