Sienna

Sienna is a warm editorial workspace identity. A tinted cream canvas (#faf9f5) supports slab-serif display headlines at weight 400 with negative letter-spacing, paired with a humanist sans for body copy.

Visual emphasis comes from the cream + coral pairing. Coral (#B15F45) marks primary actions and full-bleed callout cards. It is warm and slightly muted, deliberately avoiding the cool blue-and-slate defaults common to technical interfaces.

Sienna has three surface modes that alternate page-by-page:

1. Cream canvas — default body floor

2. Light cream cards — feature card backgrounds

3. Dark navy product surfaces — code panel mockups, showcase cards, pre-footer CTAs, footer itself

The dark surfaces are where Sienna shows its product chrome — code blocks, terminal output, comparison tables, flow diagrams. The cream-to-dark contrast is the page's pacing rhythm.

Key Characteristics:

• Warm cream canvas (#faf9f5) with dark warm-ink text (#141413). Sienna's defining color choice.
• Coral primary CTA (#B15F45). Used scarcely on individual buttons, generously on full-bleed coral callout cards.
• Serif display headlines use Fraunces at weight 400 with negative letter-spacing, paired with a humanist sans body for a literary editorial voice.
• Dark navy product mockup cards (#181715) carrying code blocks, terminal panels, comparison data — Sienna shows the product chrome at scale rather than abstract decorative illustrations.
• Light cream feature cards (#efe9de) — slightly darker than canvas, used for content-driven feature explanations.
• Sienna grid-marker — a small black asterisk-like glyph (4-spoke radial) — appears as the wordmark prefix and as a content marker.
• Border radius is hierarchical: (8px) for buttons + inputs, (12px) for content + product cards, (16px) for the hero illustration container, for badges.
• Section rhythm (96px) — a generous, modern page standard. Internal card padding stays generous at (32px).

One value per role — no ranges, no alternatives.

• Pack: Heroicons — editorial and calm, with the outline/solid pair an article layout needs.
• Style: outline variant, 1.5px stroke.
• Weight rule: outline for chrome, solid for the one action a page is about.
• Size: 24px in controls and nav; 16px inline with body text; 24px for empty states and feature moments.
• Colour: icons inherit currentColor — never a hardcoded hex, so they follow the text token they sit beside.
• Import: pull in icons individually, never the whole set.

Breakpoints

Touch Targets

• at minimum 40 × 40px.
• at exactly 36 × 36 — slightly under WCAG 44 but visually centered.
• height is 40px.
• The integration tile's entire card area is tappable; effective tap area >> 44px.

Collapsing Strategy

• Top nav collapses to hamburger at < 768px; menu opens as a full-screen cream sheet.
• Hero band's 6-6 grid collapses to single-column on mobile — h1 + sub-head + buttons first, then the illustration / mockup card below.
• Feature grids reduce columns rather than scaling cards down.
• Pricing tier cards collapse 4 → 2 → 1; featured-tier dark surface stays visually distinct at every breakpoint.
• Code-window cards retain code legibility at every breakpoint by allowing horizontal scroll within the card rather than wrapping code lines.

Image Behavior

• Code blocks inside dark mockups stay at fixed font-size; horizontal scroll on mobile rather than wrapping.
• Hero illustrations scale proportionally; line-art strokes thin slightly on mobile.
• Avatar photos in testimonials crop to circles at every breakpoint.

1. Focus on ONE component at a time. Reference its YAML key (, ).

2. Variants of an existing component (-active, -disabled, -focused) live as separate entries in components:.

3. Use everywhere — never inline hex.

4. Never document hover. Default and Active/Pressed states only.

5. Display headlines stay Fraunces serif 400 with negative tracking. Body stays Hanken Grotesk / Inter 400. The split is unbreakable.

6. Cream + coral + dark navy is the trinity. Don't introduce a fourth surface tone (no purple cards, no green sections).

7. When in doubt about emphasis: bigger Fraunces serif before bolder weight.

• Fraunces, Hanken Grotesk, and JetBrains Mono must be loaded by the host; system fallbacks preserve the hierarchy when they are unavailable.
• The Sienna grid marker is a small inline SVG asset; its geometry is intentionally outside the token contract.
• Animation and transition timings for content reveals, code typing, and flow diagrams are not in scope.
• Form validation states beyond are not extracted — error / success states would need a sign-up or feedback flow to confirm.
• Dense conversation surfaces add product-specific components—inline tools, upload chips, and history navigation—that need separate contracts.
• The animated demo cards on certain pages show product chrome moving on its own — the static screenshot doesn't fully capture the animation chrome.