--- name: Sierra tagline: Calm enterprise-AI — light canvas, deep-green hero, GT America, full-pill CTAs. updated_at: 2026-05-29T21:43:27.608Z published_at: 2026-05-29T21:43:27.608Z author: webdesignhot source_url: https://sierra.ai spec: webdesignhot/0.1 quality: curated featured: false categories: [ai, saas] tags: [light, minimal, warm, calm, enterprise, green] preview_swatch: ['#ffffff', '#006838', '#302e2d'] related: [anthropic, openai, linear] description: 'Sierra is the conversational-AI agent platform from Bret Taylor and Clay Bavor, and its site reads exactly like the company sounds — calm, credible, enterprise-grade. A light near-white `#ffffff` canvas carries warm near-black `#302e2d` body type set in GT America; the hero inverts to a deep forest-green ground with a 65px white headline. The signature is a deep, confident GREEN `#006838` — the colour of the primary "Customer stories" call-to-action — paired with cream `#f6f5f3` surfaces and full-pill (9999px radius) buttons throughout. Where most AI startups chase neon gradients and chrome-on-black drama, Sierra ships the visual register of an established institution: warm paper light, a single trustworthy green, and a generous restraint that says "we already have the Fortune 500 as customers."' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand muted: text-soft border: border ring: brand colors: # Primary bg: '#ffffff' # light near-white page canvas bg-cream: '#f6f5f3' # warm cream surface — sections, light CTA fill surface: '#f6f5f3' # cream panel / card ground hero-bg: '#05351d' # deep forest-green hero ground (inverted block) text: '#302e2d' # warm near-black — primary ink, never pure #000 text-heading: '#222222' # slightly cooler heading ink for light-section H2s on-brand: '#ffffff' # white label on green / on hero on-hero: '#ffffff' # white type on the dark hero brand: '#006838' # signature deep green — primary CTA, links, accents brand-bright: '#0a7d46' # hover/lift variant of the green brand-deep: '#05351d' # pressed / hero-ground darkest green # Neutral scale (warm-grey ladder off the #302e2d ink) text-soft: '#55524f' # secondary copy, supporting paragraphs text-faint: '#7c7873' # captions, eyebrows, helper text text-muted: '#a39f99' # disabled, footer microcopy # Interactive link: '#006838' # links carry the brand green link-hover: '#05351d' # deepen on hover glass-cta: 'rgba(255, 255, 255, 0.10)' # translucent pill CTA on the dark hero selected-bg: '#eef0ec' # green-tinted selected ground disabled: '#a39f99' # Borders border: '#e4e0dc' # default warm hairline on light border-strong: '#d4cfc9' # emphasized rule / outlined controls border-subtle: '#efece8' # quietest division border-hero: 'rgba(255, 255, 255, 0.16)' # hairline on the dark hero # Semantic success-bg: '#e3efe7' # pale green tint (echoes the brand) success-text: '#05351d' warning-bg: '#f6ecd9' # warm sand tint warning-text: '#6b531c' danger-bg: '#f6e4e1' # warm clay tint danger-text: '#8a3a2e' info-bg: '#e6edf2' # cool slate tint info-text: '#2c4a5e' typography: display: family: '"GT America", gtAmerica, system-ui, -apple-system, "Segoe UI", sans-serif' weights: [400, 500, 600, 700] opentype-features: ['liga', 'kern'] body: family: '"GT America", gtAmerica, system-ui, -apple-system, "Segoe UI", sans-serif' weights: [400, 500, 600] opentype-features: ['liga', 'kern'] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] opentype-features: ['tnum'] scale: display-hero: { size: 80, weight: 400, lineHeight: 1.02, tracking: '-0.02em', family: display } display-lg: { size: 65, weight: 400, lineHeight: 1.05, tracking: '-0.018em', family: display } h1: { size: 48, weight: 500, lineHeight: 1.1, tracking: '-0.015em', family: display } h2: { size: 32, weight: 500, lineHeight: 1.2, tracking: '-0.01em', family: display } h3: { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.005em', family: display } h4: { size: 20, weight: 500, lineHeight: 1.3, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } eyebrow: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0.06em', family: body, transform: uppercase } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0', family: body } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128] layout: page-width: 1280 prose-width: 720 site-gutter: 'clamp(24px, 5vw, 64px)' header-height: 64 grid-columns: 12 section-rhythm: '96-128px' components: button-primary: background: '#006838' text: '#ffffff' padding: '12px 24px' radius: 9999 font: 'GT America 500 / 16px' hover-bg: '#0a7d46' active-bg: '#05351d' use: 'Primary CTA — deep-green full-pill ("Customer stories", "Get a demo")' button-cream: background: '#f6f5f3' text: '#302e2d' padding: '12px 24px' radius: 9999 font: 'GT America 500 / 16px' hover-bg: '#eceae6' use: 'Light secondary pill — cream fill, warm-ink label' button-glass: background: 'rgba(255, 255, 255, 0.10)' text: '#ffffff' padding: '12px 24px' radius: 9999 border: '1px solid rgba(255, 255, 255, 0.16)' font: 'GT America 500 / 16px' hover-bg: 'rgba(255, 255, 255, 0.18)' use: 'Translucent pill on the dark hero — frosted glass, white label' button-ghost: background: 'transparent' text: '#302e2d' padding: '12px 24px' radius: 9999 border: '1px solid #d4cfc9' font: 'GT America 500 / 16px' hover-bg: '#f6f5f3' use: 'Outlined tertiary pill on light surfaces' card: background: '#f6f5f3' border: '1px solid #e4e0dc' radius: 16 padding: 32 use: 'Cream content card — soft warm panel on the white canvas' input: background: '#ffffff' border: '1px solid #e4e0dc' text: '#302e2d' radius: 9999 padding: '12px 20px' font: 'GT America 400 / 16px' placeholder-color: '#a39f99' focus-ring: '0 0 0 3px rgba(0, 104, 56, 0.25)' use: 'Pill-shaped form fields, search — matches CTA geometry' badge: background: '#e3efe7' text: '#05351d' padding: '4px 12px' radius: 9999 font: 'GT America 500 / 13px' use: 'Pale-green status pill — echoes the brand at low saturation' nav-link: background: 'transparent' text: '#302e2d' padding: '8px 12px' font: 'GT America 500 / 15px' hover-text: '#006838' use: 'Top-nav link — warm ink, green on hover' motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce — transitions become opacity-only, durations halved' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: none: 'none' ambient: 'rgba(48, 46, 45, 0.04) 0 1px 3px' standard: 'rgba(48, 46, 45, 0.06) 0 4px 16px' elevated: 'rgba(48, 46, 45, 0.08) 0 16px 40px -12px, rgba(48, 46, 45, 0.04) 0 4px 8px' green: 'rgba(0, 104, 56, 0.18) 0 16px 40px -16px' ring: '0 0 0 3px rgba(0, 104, 56, 0.25)' accessibility: contrast-text-on-bg: 11.9 # #302e2d on #ffffff — AAA at all sizes contrast-text-on-cream: 11.1 # #302e2d on #f6f5f3 — AAA contrast-on-brand: 6.0 # #ffffff on #006838 — AA at all sizes, AAA large contrast-on-hero: 13.9 # #ffffff on #05351d hero — AAA focus-ring: '3px green ring rgba(0,104,56,0.25) with 2px offset' reduced-motion-honored: true keyboard-nav: 'visible focus on every interactive surface; tab order matches visual flow' prose-line-length: 'capped at 720px for comfortable reading' dark-mode: null # marketing surface is light-canvas with an inverted dark-green hero block; no full dark theme offered --- ## 1. Visual Theme & Atmosphere Sierra's site is what enterprise AI looks like when the people building it have already run Salesforce and Google AR. Bret Taylor and Clay Bavor didn't ship a purple-gradient startup page — they shipped something that reads like an established institution that happens to be new. Open the homepage and you land on a light, near-white `#ffffff` canvas carrying warm near-black `#302e2d` body type set in **GT America**. The register is calm, credible, and confidently quiet: this is a company that lists its customers, not its funding round. The defining structural move is the **inverted hero**. While the page body sits on light paper, the hero block drops to a deep forest-green ground (`#05351d`), and the headline lands at 65px in white, weight 400 — large but unhurried, never shouting. That single dark band gives the page its drama without resorting to gradients or motion; the rest of the site returns to light, sectioned by warm cream `#f6f5f3` surfaces that lift content gently off the white without ever introducing a hard edge. The signature is the **green** — `#006838`, the colour of the primary "Customer stories" call-to-action. It is a deep, slightly cool forest green that reads as growth, trust, and money in equal measure: the colour of a financial institution that also cares about the environment, the colour Sierra uses to say *we are serious and we are here to stay*. It appears on the primary CTA, on links, and as the deepest tone in the hero ground. Sierra is disciplined with it — green is the one chromatic note in an otherwise warm-neutral page, so it never has to compete with itself. Every interactive surface is a **full pill**. Buttons, inputs, and tags all carry the 9999px radius (the production site computes it as a `3.35e7px` value that clamps to a full capsule). The pill geometry is the brand's most repeatable signature: combined with the warm light canvas and the single deep green, a Sierra button is recognisable from a thumbnail. The hero adds a third CTA flavour — a frosted-glass pill (`rgba(255,255,255,0.10)`) that lets the green-black ground show through. Atmospheric vocabulary that captures the feeling: *warm-paper-light, forest-green-trust, full-pill-soft, enterprise-calm, institution-credible, GT-America-clean, cream-sectioned, restrained-confident, customer-led, considered.* Every surface lands as if approved by a CMO who has sold to the Fortune 500 before. **Key Characteristics** - Light near-white `#ffffff` canvas — warm, paper-credible, never cold - Inverted **deep forest-green hero** (`#05351d`) with a 65px white headline - Signature deep GREEN `#006838` — the one chromatic note, on the primary CTA - Warm near-black `#302e2d` body ink — never pure `#000` - **GT America** throughout — clean grotesque, set at weight 400/500, low drama - **Full-pill (9999px) geometry** on every button, input, and tag - Cream `#f6f5f3` surfaces section the page without hard borders - A third "glass" CTA on the dark hero — `rgba(255,255,255,0.10)` translucent pill - Restraint as a brand asset — one green, generous whitespace, no gradient - Customer-led layout — logos and stories carry trust, not feature explosions ## 2. Color Palette & Roles ### Primary / Canvas - **bg** `#ffffff` — the light near-white page canvas; the warm-paper ground for all body sections. - **bg-cream / surface** `#f6f5f3` — warm cream; used for sectioned panels, cards, and the light secondary CTA fill. Lifts content off white without a border. - **hero-bg** `#05351d` — the deep forest-green hero ground; the one inverted dark block on the page. - **text** `#302e2d` — warm near-black, the primary ink; never substituted for pure `#000`. - **text-heading** `#222222` — a slightly cooler heading ink used on light-section H2s. ### Brand & Accent - **brand** `#006838` — the signature deep green. Primary CTA fill ("Customer stories", "Get a demo"), links, focus rings. - **brand-bright** `#0a7d46` — hover/lift variant of the green. - **brand-deep** `#05351d` — pressed state and the hero ground; darkest green in the system. - **on-brand / on-hero** `#ffffff` — white label on green fills and on the dark hero. ### Interactive - **link** `#006838` — links carry the brand green on light surfaces. - **link-hover** `#05351d` — deepens to the darkest green on hover. - **glass-cta** `rgba(255,255,255,0.10)` — translucent frosted pill CTA on the dark hero; border `rgba(255,255,255,0.16)`. - **selected-bg** `#eef0ec` — green-tinted selected/active ground. - **disabled** `#a39f99` — muted warm grey for disabled controls. ### Neutral Scale (warm grey off the `#302e2d` ink) - **text** `#302e2d` — primary copy and high-emphasis labels. - **text-soft** `#55524f` — secondary copy, supporting paragraphs. - **text-faint** `#7c7873` — captions, eyebrows, helper text. - **text-muted** `#a39f99` — disabled, footer microcopy. ### Surface & Borders - **surface-0 (page)** — `#ffffff` white. - **surface-1 (panel/card)** — `#f6f5f3` cream. - **surface-hero** — `#05351d` deep green (inverted block). - **border** `#e4e0dc` — default warm hairline on light. - **border-strong** `#d4cfc9` — outlined buttons, emphasized rules. - **border-subtle** `#efece8` — quietest division. - **border-hero** `rgba(255,255,255,0.16)` — hairline on the dark hero. ### Shadow Colors Sierra's shadows are warm-tinted and minimal. Cards lift off the white canvas mostly by the cream value-shift (`#f6f5f3` on `#ffffff`); explicit shadows are soft and low-opacity, tinted with the warm ink (`rgba(48,46,45,0.04–0.08)`) rather than neutral grey. A green-tinted glow (`rgba(0,104,56,0.18)`) is reserved for the rare lifted brand surface. The brand never uses cool blue-tinted shadows — that would crack the warm temperature of the page. ### Semantic - **success** — bg `#e3efe7` (pale brand-green tint), text `#05351d`. Success literally is the brand green at low saturation. - **warning** — bg `#f6ecd9` (warm sand), text `#6b531c`. - **danger** — bg `#f6e4e1` (warm clay), text `#8a3a2e`. - **info** — bg `#e6edf2` (cool slate), text `#2c4a5e`. Note the distinctive choice: success draws *from* the brand green rather than a generic green-500, keeping the page on a single chromatic family. ## 3. Typography Rules ### Font Family - **Display & UI & Body**: `"GT America", gtAmerica, system-ui, -apple-system, "Segoe UI", sans-serif` — Grilli Type's clean American grotesque, a single family across the whole site. Closer in proportions to Helvetica/Akzidenz than to a geometric sans; even, low-contrast strokes that read as trustworthy and neutral. - **Mono**: `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace` — system mono for the rare code or data label. - **OpenType features**: `liga` and `kern` always on; `tnum` enabled in mono for tabular figures. A single-family system is deliberate. Sierra never asks a second typeface to carry contrast; hierarchy comes from size, weight (400 vs 500/600), and colour, not from a serif/sans pairing. The headline weight stays low — the 65px hero ships at weight **400**, an unusually light setting at that size that keeps the page calm rather than declarative. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Notes | |---|---|---|---|---|---|---| | Display Hero | GT America | 80px | 400 | 1.02 | -0.02em | Largest editorial moment | | Display LG | GT America | 65px | 400 | 1.05 | -0.018em | Hero headline (white on green) | | H1 | GT America | 48px | 500 | 1.10 | -0.015em | Page title | | H2 | GT America | 32px | 500 | 1.20 | -0.01em | Major section heading | | H3 | GT America | 24px | 500 | 1.25 | -0.005em | Sub-section / card heading | | H4 | GT America | 20px | 500 | 1.30 | normal | Inline emphasis heading | | Body Large | GT America | 18px | 400 | 1.55 | normal | Lede paragraph | | Body | GT America | 16px | 400 | 1.55 | normal | Default body copy | | Body Small | GT America | 14px | 400 | 1.50 | normal | Captions, footnotes, sidebars | | Eyebrow | GT America | 13px | 500 | 1.40 | 0.06em | Uppercase section pre-label | | Label | GT America | 13px | 500 | 1.40 | normal | UI labels, button text | | Caption | GT America | 12px | 500 | 1.40 | 0.02em | Smallest meta text | | Link (body) | GT America | 16px | 400 | 1.55 | normal | Green underline-on-hover | | Button | GT America | 16px | 500 | 1.0 | normal | Pill CTA label | | Nav Link | GT America | 15px | 500 | 1.40 | normal | Top-nav | ### Principles - **One family, contrast by size and weight.** GT America carries everything; hierarchy never relies on a second typeface. - **Light headline weights.** The hero ships at weight 400 even at 65px — calm over declarative. Section headings sit at 500; the brand rarely reaches 700. - **Negative tracking scales with size.** -0.02em at 80px, -0.018em at 65px, -0.015em at 48px, easing to normal at body sizes — a subtle broadsheet compression on large type only. - **Warm-ink body.** Body copy is `#302e2d`, not black — it sits comfortably on both white and cream without harsh contrast. - **Generous line-height for body.** 1.55 at 16/18px keeps long enterprise copy readable; headings tighten to 1.0–1.25. - **White on the hero only.** White type is reserved for the dark-green hero ground and green CTA fills; everywhere else type is warm near-black. - **Eyebrows in uppercase 13px / 0.06em.** Section pre-labels use letter-spaced small caps in `#7c7873` faint, never coloured. - **Reading column capped at ~720px** even on the 1280px page — comfortable enterprise prose width. ## 4. Component Stylings ### Buttons All buttons are **full pills** (9999px radius) — the brand's defining geometry. **Primary (Green)** - Background: `#006838` deep green. Text: `#ffffff`, GT America 500 / 16px. - Padding: `12px 24px`. Radius: `9999px` (full pill). No border. - Hover: bg → `#0a7d46` (brand-bright); transition `240ms ease-standard`. - Active: bg → `#05351d` (brand-deep). - Use: Primary CTA — *Customer stories, Get a demo, Talk to sales.* **Cream (Light Secondary)** - Background: `#f6f5f3` cream. Text: `#302e2d` warm ink, GT America 500 / 16px. - Same pill shape and padding. No border. - Hover: bg → `#eceae6`. - Use: Secondary pill on light or dark surfaces — *Learn more, Read more.* **Glass (Hero Translucent)** - Background: `rgba(255,255,255,0.10)`. Text: `#ffffff`. Border: `1px solid rgba(255,255,255,0.16)`. - Same pill shape and padding. - Hover: bg → `rgba(255,255,255,0.18)`. - Use: On the dark-green hero only — frosted-glass CTA that lets the ground show through. **Ghost (Outlined Tertiary)** - Background: transparent. Text: `#302e2d`. Border: `1px solid #d4cfc9`. - Same pill shape and padding. - Hover: bg → `#f6f5f3`; border → `#006838` (subtle green hint). - Use: Quiet third action on light surfaces. ### Cards **Cream Card** - Background: `#f6f5f3`. Border: `1px solid #e4e0dc`. Radius: `16px`. Padding: `32px`. - Shadow: none by default — the cream value-shift separates it from the white page. - Hover: shadow → `standard` (`rgba(48,46,45,0.06) 0 4px 16px`); transition `240ms`. - Use: Capability tile, customer-story card, content panel. **Hero Card (on dark)** - Background: `rgba(255,255,255,0.06)`. Border: `1px solid rgba(255,255,255,0.16)`. Radius: `16px`. Padding: `32px`. - Use: Glass panel inside the dark-green hero block. ### Badges, Tags, Pills **Status Pill** — bg `#e3efe7` (pale brand-green tint), text `#05351d`, radius `9999px`, padding `4px 12px`, GT America 500 / 13px. The default tag echoes the brand green at low saturation. **Eyebrow Label** — no chrome, just type. GT America 500 / 13px / uppercase / 0.06em tracking, colour `#7c7873`. Sits above section headlines. **Semantic Pills** — bg from semantic palette (success `#e3efe7`, warning `#f6ecd9`, danger `#f6e4e1`, info `#e6edf2`), radius `9999px`, padding `4px 12px`. ### Inputs / Forms - Background: `#ffffff`. Border: `1px solid #e4e0dc`. Radius: `9999px` (full pill — matches CTA geometry). Padding: `12px 20px`. - Font: GT America 400 / 16px. Placeholder: `#a39f99`. - Focus: `0 0 0 3px rgba(0,104,56,0.25)` green ring; border → `#006838`. - Error: border → `#8a3a2e`, ring → `rgba(138,58,46,0.20)`. - Helper: body-small 14px text-faint below. - Larger textareas relax to a 16px radius (the pill reads only on single-line fields). ### Navigation - Header height `64px`. Background `#ffffff` cream-tinted on scroll; transparent over the hero (white links). - Logo: Sierra wordmark, warm near-black on light / white on hero. - Nav links: GT America 500 / 15px, colour `#302e2d`, padding `8px 12px`. Hover → `#006838` green. - Right-side CTA: a green primary pill ("Get a demo") + a cream or ghost secondary. - Mobile: full-screen sheet, links stack at 20px / 500; the hamburger right-aligns (matches the store's nav fix). ### Optional Components **Customer Logo Rail** — a row of greyed customer wordmarks at `#a39f99`, 32px tall, on cream `#f6f5f3`; the trust device the brand leads with. **Quote / Testimonial** — GT America 24px / 400, warm ink, with a customer attribution in 14px text-faint and a small green accent rule. **Tooltip** — bg `#302e2d`, text `#ffffff`, radius `8px`, padding `8px 12px`, font `13px / 500`. **Modal** — bg `#ffffff`, radius `16px`, shadow `elevated`, max-width `560px`. Warm-ink backdrop overlay at 60% opacity. ## 5. Layout Principles ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. - **Density observation**: Sierra is calm-density — generous but not as airy as a literary magazine. Section gutters run 96–128px; intra-section spacing uses 24–48px; content rows sit on 16–24px gaps. ### Grid & Container - **Page max width**: `1280px` — the standard enterprise container, signalling familiarity over novelty. - **Site gutter**: `clamp(24px, 5vw, 64px)` — comfortable on desktop, accommodating on mobile. - **Grid**: 12 columns with 24px gutters. Hero spans full bleed; capability rails span 8–12 columns; sidebars span 4. - **Hero treatment**: full-bleed deep-green band, 65px white headline anchored left, body confined to a ~720px column, CTAs as a pill cluster below. ### Whitespace Philosophy Whitespace here is a credibility signal, not a flourish. Sierra under-fills relative to a typical SaaS landing so that headlines and customer logos have room to breathe — the page should feel like an institution that doesn't need to crowd you. Cream `#f6f5f3` sections do the heavy lifting of separation: rather than hard dividers, the page alternates white and cream bands so the rhythm reads as quiet zoning. ### Section Cadence - Hero (deep-green, inverted) → Customer Logo Rail (cream) → Capability Rail (white card grid) → Customer Story (cream, large quote) → Product Detail (white, 720px column) → CTA Band (green or cream) → Footer (cream). - The dark-green hero is the single inverted block; everything below returns to light. A green CTA band may reprise the hero colour once near the page foot. - Adjacent white/cream sections separate by spacing and value-shift alone — hard borders are rare. ## 6. Shapes & Radius Scale | Tier | Value | Use | |---|---|---| | Micro | 2px | Decorative dividers, slim chip corners | | Standard (sm) | 4px | Inline tags, compact chips | | Comfortable (md) | 8px | Tooltips, small dropdowns, code blocks | | Relaxed (lg) | 12px | Larger dropdowns, popovers | | Featured (xl) | 16px | Cards, panels, modals, textareas | | Pill | 9999px | **Buttons, single-line inputs, status tags — the signature** | Sierra's signature radius is the **full pill** (9999px) on every button, single-line input, and tag. The production site computes this as a `3.35e7px` value that clamps to a capsule. Cards and panels use a softer **16px**; there are effectively no sharp-cornered interactive surfaces. The system reads as a flat ladder of soft corners, with the pill as the loudest repeated shape. ## 7. Depth & Elevation | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections | | 1 | Value-contrast (cream card on white) | Cream content cards, capability tiles | | 2 | `rgba(48,46,45,0.04) 0 1px 3px` | Sticky nav, small dropdowns | | 3 | `rgba(48,46,45,0.06) 0 4px 16px` | Hover-lifted cards | | 4 | `rgba(48,46,45,0.08) 0 16px 40px -12px` | Popovers, overlay menus | | 5 | `rgba(0,104,56,0.18) 0 16px 40px -16px` | Rare green-glow brand lift | ### Shadow Philosophy Sierra's depth is **warm-tinted and minimal**. Cards lift primarily by the cream value-shift (cream-on-white) rather than by explicit shadow. When shadows appear, they're tinted with the warm ink (`rgba(48,46,45,0.04–0.08)`), never neutral grey and never cool blue — a blue shadow would crack the warm temperature of the page. The one chromatic shadow is a soft green glow reserved for a hero-adjacent brand surface. The brand reads as confident paper-light interface, not a heavily layered dashboard. ## 8. Interaction & Motion ### Easing Curves - `ease-standard`: `cubic-bezier(0.4, 0, 0.2, 1)` — Material-style; default for hover, focus, colour transitions. - `ease-emphasized`: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; used on modal/hero reveal. ### Duration Buckets - **Fast (150ms)** — colour transitions, focus rings, link hovers. - **Standard (240ms)** — button hover, card hover, dropdown reveal. - **Slow (320ms)** — modal enter/exit, section fade-in. ### Per-Component Micro-States - **Button hover**: bg colour shift only (green → brighter green) — no lift, no scale. `transition: background-color 240ms ease-standard`. - **Card hover**: shadow fades from none to `standard`; no border colour change. - **Link hover**: colour `#006838` → `#05351d` over 150ms; underline thickens. - **Input focus**: 3px green ring (`rgba(0,104,56,0.25)`) fades in over 150ms; border darkens to green. - **Nav link hover**: warm ink `#302e2d` → green `#006838` over 150ms. ### Page Transitions Calm reveals: hero text and below-fold sections fade in via `IntersectionObserver` at ~80% viewport, 320ms duration, with a small 16px translate-up. No parallax, no scroll-jacking — the brand's restraint extends to motion. ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — all transitions become opacity-only, durations halved. Translate animations are disabled; scroll-linked reveals snap to final state. ## 9. Accessibility & A11y ### Contrast Pairs - **`#302e2d` text on `#ffffff` bg**: 11.9:1 — AAA at all sizes. - **`#302e2d` text on `#f6f5f3` cream**: 11.1:1 — AAA at all sizes. - **`#55524f` text-soft on `#ffffff` bg**: 7.3:1 — AAA at body sizes. - **`#7c7873` text-faint on `#ffffff` bg**: 4.0:1 — AA at large sizes only (≥18px or ≥14px bold); use for eyebrows/captions, not body. - **`#ffffff` text on `#006838` green**: 6.0:1 — AA at all sizes, AAA at large; safe for buttons. - **`#ffffff` text on `#05351d` hero**: 13.9:1 — AAA. - **`#006838` link on `#ffffff` bg**: 6.0:1 — AA; underline-on-hover supplies a non-colour cue. ### Focus Indicators - Default focus ring: `0 0 0 3px rgba(0,104,56,0.25)` green ring with 2px offset on light surfaces. - On the dark-green hero: `0 0 0 3px rgba(255,255,255,0.5)` white ring. - Every interactive surface must have a visible focus state — no `outline: none` without a replacement. ### ARIA Patterns - **Navigation**: `