Sierra · Full Page
Sierra
Enterprise AI that refuses to shout — ivory light-first, a single forest-green accent, hairline-over-shadow discipline, GT America. Quiet-luxury B2B.

Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
Sierra is what enterprise AI looks like when it refuses to shout. We catalogued it because it proves that the warmest, quietest landing in the room can also be the most authoritative — an ivory canvas, a single forest-green accent, and type that does all the talking without a single illustration to lean on. If you are selling something serious to people who distrust hype, this is the page to study before you reach for another gradient hero.
Design decisions observed
- Warmth as a trust signal — Sierra builds its canvas on a barely-there warm ivory and a soft umber hairline rather than clinical white. The page feels like premium stationery, which is exactly the register enterprise buyers respond to.
- One accent, held in reserve — a deep forest green appears only where it matters (CTAs, brand moments) against a near-black ink. The discipline of a single restrained accent is what makes the page read as expensive rather than busy.
- Editorial typography doing the structural work — GT America carries the entire hierarchy through size and a tight negative-tracking display, with no second display face and no decorative weights. Authority through one family, committed.
- Hairline architecture over boxes and shadows — structure is drawn with 1px warm-umber borders and generous whitespace, not heavy cards. The page breathes; nothing is fighting for elevation.
- Motion you feel but never catch — a single material-standard easing governs every hover and reveal at a quarter-second. The choreography is so even it disappears, which is the whole point for a brand selling calm competence.
- Restraint as the product demo — the site is itself a proof of the thesis: conversational AI that is poised, not frantic. Form and message are the same argument.
What to study
- How a warm light palette can out-authority a dark one — Sierra wins enterprise trust on ivory and umber, not black. Steal the courage to go light when your category defaults to dark-mode bravado.
- Single-accent discipline — study how one forest green, used at single-digit surface area, carries every moment of emphasis. The scarcity is the sophistication.
- Type-only hierarchy with one family — GT America handles display, UI, and body through size and tracking alone. Learn how a single committed family beats a curated pairing for perceived craft.
- Whitespace as the layout system — Sierra structures the page with rhythm and hairlines instead of containers and shadow. The negative space is load-bearing, not leftover.
What to avoid
- Don't read Sierra's restraint as blandness and then add a second accent to 'liven it up' — the entire effect collapses the moment a second color competes with the green.
- Don't reach for heavy cards, drop shadows, or glassmorphism here — Sierra's elevation vocabulary is a 1px hairline and whitespace. Stacking shadows would make a calm page anxious.
- Don't pair GT America with a serif display thinking it adds gravitas — the authority is in the single-family commitment; a second face reads as hedging.
Taste notes
The page feels like a letter from a firm that doesn't need to introduce itself — warm paper-toned ivory, ink that is almost but never quite black, and a forest green that behaves like a wax seal: used once, and unforgettable for it. Borders do the structural speaking in a single hairline weight, whitespace sets the cadence, and the lone ambient shadow it permits is a soft blue bloom so faint it registers as atmosphere rather than depth. Nothing is trying to impress you, which is precisely why it does.
Lineage & references
- Sits in the lineage of Bret Taylor's craft pedigree (Quip, Salesforce, the Stripe-adjacent enterprise-design school) — landings that treat restraint as the highest signal of seriousness to a buyer who has seen every trick.
- Shares a cohort with the warm-minimal enterprise-AI peers (Anthropic, Adept, Cohere) — companies dressing frontier technology in calm, editorial, trust-first clothing rather than neon-futurist hype.
- Part of the 2024+ 'quiet luxury' B2B landing movement (Vercel's editorial restraint, Mercury's paper-toned fintech calm, Notion's whitespace confidence) — pages that win on poise instead of spectacle.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Warm-light editorial minimalism for enterprise. The canvas is a barely-warm ivory, not clinical white; ink is a near-black #302e2d that stops short of pure black to stay soft on paper. GT America carries voice, weight, and rhythm across a restrained 400 / 500 ladder; display headings pull in with negative px tracking (-0.38px at 38px up to -1.3px at 65px) to feel bound and confident. Structure is drawn with 1px warm-umber #e4e0dc hairlines and whitespace — not cards, not shadow. A single forest green #006838 is the only accent, held in reserve for CTAs and brand moments at single-digit surface area. Motion is one material-standard cubic-bezier curve at a quarter second, so even it disappears. Restraint over decoration, warmth over clinical, one accent over many.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (warm ivory canvas + near-black #302e2d ink + warm-umber #e4e0dc hairlines + a single reserved forest-green #006838 accent), typographic rhythm (GT America with a restrained 400/500 weight ladder and negative px tracking on display sizes), the 4px-base spacing scale, hairline-and-whitespace structure (1px borders before any card or shadow), the cubic-bezier(0.4, 0, 0.2, 1) motion curve at 0.25s, and a light-first mode strategy across every page and component I ship. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.
Overview
- Layout
- Editorial
- Content width
- Bounded
- Framing
- Flat
- Grid strength
- Soft
Color philosophy
Warm-light canvas — a barely-warm ivory background paired with near-black ink #302e2d (the dominant reading layer at ~361 measured occurrences) and a softer warm gray #716f6c for de-emphasis. Structure is carried by a single warm-umber hairline #e4e0dc (~553 occurrences — the most frequent token on the page, doing all the bordering). The only chromatic accent is a deep forest green #006838, used sparingly (~8 occurrences) for CTAs and brand moments. Pure black #000000 appears only as a rare high-contrast background.
- Near-black ink #302e2d (weight 400/500) handling ~361 measured surface occurrences — the dominant reading layer on the ivory canvas
- Warm-umber hairline #e4e0dc is the single most frequent token (~553 occurrences) — every border, divider, and structural delimiter draws from it
- Warm gray #716f6c (~87 occurrences) for captions, metadata, and de-emphasized secondary text
- Forest green #006838 reserved for primary CTAs and brand moments only — single-digit surface area (~8 occurrences), never decorative fill
- Pure black #000000 (~31 occurrences) reserved for rare high-contrast inversion sections, never as the default body background
Gradients (paste-ready)
linear-gradient(130deg, rgb(141, 164, 111) 0%, rgb(74, 109, 78) 100%) linear-gradient(131deg, rgb(61, 120, 182) 29.8%, rgb(3, 189, 245) 175.51%) linear-gradient(160deg, rgb(218, 238, 255) -12.67%, rgb(255, 255, 255) 61.84%, rgb(218, 238, 255) 111.51%)
Typography rules
- Primary family: GT America (self-hosted Standard, preloaded woff2). Monospace companion: GT America Mono for code, labels, and tabular numerics. No third family.
- Weight ladder: 400 (reading + most display) / 500 (UI labels, emphasis, medium). Do not introduce 600/700 — Sierra's display authority comes from size and tracking, not heavy weight.
- Display tracking in px, not em: -0.38px at 38px, -0.44px at 44px, and -1.3px at the 65px hero — a constant optical correction that tightens as size grows.
- Type scale (observed): hero 65px/72px, display 44px/48px and 38px/46px, heading-2 24px/32px, body 16px/24px, small 14px/20px and 12px/16px.
- Heading line-height is tight at display sizes (72px on 65px hero ≈ 1.1; 48px on 44px ≈ 1.09); body sits at 24px on 16px (1.5) for comfortable reading.
- No italic for emphasis in UI — GT America Standard Italic is reserved for quoted editorial content. Emphasis shifts to weight 500 or the green accent.
- Body measure 45-65 ch at 16px; the page favors generous leading and short paragraphs over dense blocks.
Spacing rules
- 4px base unit. Scale (observed): 4 / 8 / 12 / 16 / 24 / 32 / 40 / 44 / 48 / 56 / 64 / 80 px. The 8px and 32px steps dominate (114 and 90 occurrences).
- Bounded content rails: 336 / 484 / 508 / 576 / 580 px for narrow clusters; primary page container caps at 1160px (do not exceed).
- Section vertical rhythm leans on 80px (the most frequent large step, ~22 occurrences) and 48-64px secondary spacing — generous breathing room is the signature.
- Card / block padding: 32px desktop (the dominant padding token), 16-24px on tighter clusters and mobile. Always pick from the scale; no magic numbers.
- Gutter values for flex/grid: 4 / 8 / 12 / 16 / 24 / 32 / 48 px — 8px is the dominant gap (42 flex occurrences).
Design tokens
Palette, type, and space — all agent-readable.
5 colors · hex / rgb / hsl / oklch
- neutral53%
- HEX
#E4E0DC - RGB
rgb(228, 224, 220) - HSL
hsl(30, 13%, 88%) - OKLCH
oklch(90.87% 0.0070 67.74)
- HEX
- foreground35%
- HEX
#302E2D - RGB
rgb(48, 46, 45) - HSL
hsl(20, 3%, 18%) - OKLCH
oklch(30.29% 0.0034 48.61)
- HEX
- foreground8%
- HEX
#716F6C - RGB
rgb(113, 111, 108) - HSL
hsl(36, 2%, 43%) - OKLCH
oklch(54.25% 0.0052 78.28)
- HEX
- foreground3%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- accent1%
- HEX
#006838 - RGB
rgb(0, 104, 56) - HSL
hsl(152, 100%, 20%) - OKLCH
oklch(45.41% 0.1136 154.38)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 11 nodes captured; depth capped at 6 for readability.
- body
- └─ div (×2)
- ├─ Nav
- ├─ Main
- │ ├─ Header
- │ └─ Section (×9)
- └─ Footer
- └─ div
- └─ div
- └─ div
- └─ Nav
Accessibility
WCAG contrast matrix.
18 combinations · 6 pass AA · 4 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #E4E0DC | #000000 | 15.99 | AAA | AAA | -88 | neutral on foreground |
Aa | #000000 | #E4E0DC | 15.99 | AAA | AAA | +88 | foreground on neutral |
Aa | #E4E0DC | #302E2D | 10.29 | AAA | AAA | -83 | neutral on foreground |
Aa | #302E2D | #E4E0DC | 10.29 | AAA | AAA | +82 | foreground on neutral |
Aa | #E4E0DC | #006838 | 5.27 | AA | AAA | -69 | neutral on accent |
Aa | #006838 | #E4E0DC | 5.27 | AA | AAA | +65 | accent on neutral |
Aa | #716F6C | #000000 | 4.19 | — | AA | -27 | foreground on foreground |
Aa | #000000 | #716F6C | 4.19 | — | AA | +29 | foreground on foreground |
Aa | #E4E0DC | #716F6C | 3.82 | — | AA | -60 | neutral on foreground |
Aa | #716F6C | #E4E0DC | 3.82 | — | AA | +57 | foreground on neutral |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
Hero image
https://sierra.ai/-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=32&quality=75- Format
- UNKNOWN
- Dimensions
- 32×32
- Loading
- lazy
- srcset
- yes
- srcset descriptor
- /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=32&quality=75 32w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=48&quality=75 48w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=64&quality=75 64w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=96&quality=75 96w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=128&quality=75 128w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=256&quality=75 256w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=384&quality=75 384w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=640&quality=75 640w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=750&quality=75 750w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=828&quality=75 828w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=1080&quality=75 1080w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=1200&quality=75 1200w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=1920&quality=75 1920w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=2048&quality=75 2048w, /-/cdn/image?src=https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fca4jck6w%2Fproduction%2F4cc7c7cd1412bd42f8bb241feb5ff7e259c47671-1000x1000.jpg&width=3840&quality=75 3840w
- Full Page
- ai
- saas
- light
- 2026-06-23
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also


