--- version: alpha name: "Height" description: "Height's marketing surface reads like an AI-native project tool that grew up reading Linear and Notion at the same time. The canvas is a near-paper `#fdfcf9` cream-white — not pure white — and the type is Inter at modest mid-weights (450/500/600) sitting in generous whitespace. Brand voltage comes from a single chalk-purple `#7551dc` for AI moments and primary CTAs, paired with pastel surface cards in lavender, peach, mint, and butter that punctuate long-scroll feature pages. There is no decorative gradient mesh and no aurora — emphasis is delegated to the pastel cards and a single dark `#0e0e10` mid-page CTA band that resets section rhythm. The whole system reads as \"AI-PM with taste\" — Inter's neutral voice carrying a chalk-pastel palette over an explicitly off-white paper canvas, with the AI-voltage purple held in reserve for the brand's most important moments." colors: bg: "#fdfcf9" bg-soft: "#f7f6f1" bg-elev: "#ffffff" bg-strong: "#ebe9e1" bg-dark: "#0e0e10" bg-dark-elev: "#17171a" surface: "#f7f6f1" text: "#0e0e10" text-body: "#272730" text-muted: "#5a5a66" text-faint: "#9a9aa3" brand: "#7551dc" brand-hover: "#6745c8" brand-active: "#5a3bb2" brand-soft: "#ede7fb" on-brand: "#ffffff" on-dark: "#fbfbf7" link: "#3344c8" link-hover: "#2229a8" pastel-lavender: "#ede7fb" pastel-peach: "#fbe6d3" pastel-mint: "#d9efe1" pastel-butter: "#faf0c8" pastel-blush: "#f7d8da" pastel-sky: "#dbe8f8" border: "#e6e3da" border-strong: "#cfcbbf" border-soft: "#efece4" shadow-tint: "rgba(20, 18, 30, 0.08)" shadow-deep: "rgba(20, 18, 30, 0.16)" info: "#3344c8" success: "#2c8a52" success-soft: "#d9efe1" warning: "#c69022" warning-soft: "#faf0c8" danger: "#cb3946" danger-soft: "#f7d8da" selection: "rgba(117, 81, 220, 0.18)" ring: "rgba(117, 81, 220, 0.45)" typography: display: fontFamily: "Inter Display" fontSize: "72px" lineHeight: 1.55 letterSpacing: "-0.022em" body: fontFamily: "Inter" fontSize: "16px" lineHeight: 1.55 mono: fontFamily: "Berkeley Mono" rounded: button: "10px" card: "14px" pill: "9999px" spacing: xs: "4px" sm: "8px" md: "16px" lg: "32px" xl: "48px" --- ## Overview ## Overview Height's marketing surface is a quiet, deliberately understated AI-PM workspace dressed as a paper publication. The canvas is a near-paper cream `#fdfcf9` — not pure white — with the type set in Inter at modest mid-weights. There is no aurora gradient, no atmospheric mesh, no glassmorphic panels. The page reads, atmospherically, like an editorial product page that happens to ship AI features. Brand voltage comes from a single chalk-purple `#7551dc` for AI moments and primary CTAs, paired with pastel surface cards in lavender, peach, mint, butter, blush, and sky that punctuate long-scroll feature pages. The pastel cards are not decorative — each carries a real product UI fragment (a task list, a sprint kanban, a Copilot prompt) framed in 48px of internal padding. Between pastel bands, Height returns to the cream canvas and a single dark `#0e0e10` mid-page CTA band resets section rhythm with editorial confidence. The voice is calm. Headlines top out at 56–72px in Inter Display 500 — the system never goes 700. Display tracking is gently negative (`-0.018em` to `-0.022em`), enough to compress the headline into a single visual gesture without screaming. Body sits at 16–18px / 400 with 1.55 line-height — generous, paper-like, designed for long scroll. The result is "AI-PM with taste": Inter's neutral voice carrying a chalk-pastel palette over an explicitly off-white paper canvas, with the AI-voltage purple held in reserve for the brand's most important moments. Linear's near-black inheritance is rejected outright; Notion's warm-neutral publication metaphor is borrowed but pivoted toward pastels and chalk-purple instead of black-and-blue. **Key Characteristics:** - Canvas is **off-white cream** (`#fdfcf9`), not pure white — a quiet differentiation from Notion's pure paper. - Display type is Inter at **500 only** — never 700. Emphasis comes from size, not weight. - Brand voltage = `#7551dc` chalk-purple, used for primary CTA and AI moments (Copilot, AI badge, AI-card). - Pastel surface cards (lavender / peach / mint / butter / blush / sky) carry product UI demos; they are the brand's signature. - One dark `#0e0e10` mid-page band resets section rhythm — never a second dark band on the same page. - Section padding is **96px** between every editorial band — the universal vertical rhythm constant. - Hairlines are warm (`#e6e3da`), not cool — they read as paper-fold creases, not steel rules. - Cards round at **20px (xl)** for pastel surfaces, 14px for primary CTAs, 10px for content cards, 6px for inputs. ## Colors ### Primary - **Bg / Canvas** (`#fdfcf9`): Near-paper cream. Not `#ffffff` — the off-tint is intentional and reads as warmer than Notion or Linear. - **Text / Ink** (`#0e0e10`): Display headlines, primary body emphasis, primary button text-on-light surfaces (rare — Height's primary CTA is purple-on-white). - **Brand / AI Purple** (`#7551dc`): The single signature voltage. Used for primary CTA, AI moments, brand wordmark when colored. ### Brand & Dark - **Brand Hover** (`#6745c8`): Press state on primary. - **Brand Active** (`#5a3bb2`): Active / focused. - **Brand Soft** (`#ede7fb`): Tonal pastel surface specifically for AI moments — the "Copilot is enabled" badge background, the pastel-lavender card. - **Bg Dark** (`#0e0e10`): Mid-page dark CTA band, dark popover, and toast surface. - **Bg Dark Elevated** (`#17171a`): Slightly lighter dark surface for elevated dark popovers (rare). - **On-Dark** (`#fbfbf7`): Cream-tinted white over dark surfaces. Never pure `#ffffff` — the cream-tint preserves continuity with the canvas. ### Accent — Pastel Card Surfaces - **Pastel Lavender** (`#ede7fb`): AI / Copilot feature card. - **Pastel Peach** (`#fbe6d3`): Task-creation / inbox demo card. - **Pastel Mint** (`#d9efe1`): Sprint / status demo card. - **Pastel Butter** (`#faf0c8`): Milestone / planning demo card. - **Pastel Blush** (`#f7d8da`): Reminder / alert demo card. - **Pastel Sky** (`#dbe8f8`): Calendar / time-block demo card. ### Interactive - **Link** (`#3344c8`): Inline body links — distinct from brand purple. No underline by default; appears on hover at 1px. - **Link Hover** (`#2229a8`): Pressed state. - **Selection** (`rgba(117, 81, 220, 0.18)`): Text selection background — brand at 18% alpha. - **Disabled**: Use `text-faint` (`#9a9aa3`) for disabled type and `border-soft` (`#efece4`) for disabled outlines. ### Neutral Scale - **Ink** (`#0e0e10`): Display + emphasis. - **Text Body** (`#272730`): Default running-text. - **Text Muted** (`#5a5a66`): Captions, footer links. - **Text Faint** (`#9a9aa3`): Placeholder, disabled. - **Bg Strong** (`#ebe9e1`): Pre-footer cream band (slightly darker than canvas). - **Bg Soft** (`#f7f6f1`): Default card surface. ### Surface & Borders - **Bg** (`#fdfcf9`): Canvas. - **Bg Soft** (`#f7f6f1`): Default card. - **Bg Elev** (`#ffffff`): Pure white only inside elevated modals / popovers. - **Border** (`#e6e3da`): Default 1px hairline — warm-tinted to read as paper-fold not steel. - **Border Strong** (`#cfcbbf`): Stronger card border for elevated cards / inputs. - **Border Soft** (`#efece4`): Softest divider — quiet table dividers. ### Shadow Colors - All shadows use the warm-ink tint `rgba(20, 18, 30, 0.04 → 0.18)`. Never neutral black — Height's shadows are 6% warm to match the cream canvas. - Focus ring is brand-purple at 45% — a chalk-purple halo, not a neon line. ### Semantic - **Info** (`#3344c8`): Inline info badges, focused links. - **Success** (`#2c8a52`) on `#d9efe1` mint: success states. - **Warning** (`#c69022`) on `#faf0c8` butter: caution states. - **Danger** (`#cb3946`) on `#f7d8da` blush: destructive actions. The unusual choice: Height tints **everything** — canvas, hairline, shadow, on-dark text, even the pastel cards — toward warm cream rather than cool grey. This is the brand's quiet differentiation move from Linear (cool dark) and Asana (cool light). ## Typography ### Font Family - **Primary**: `"Inter Display"` for display sizes (≥ 28px); `"Inter"` for everything else. - **Mono**: `"Berkeley Mono"` (with `JetBrains Mono` and `SF Mono` fallback) for code blocks, IDs, command snippets. - **Fallback chain**: `-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif`. - **OpenType features**: `ss01` (single-storey g preserved as Inter's character mark), `cv11` (alternate digit shapes for tabular alignment), `tnum` inside data tables. Inter's default features otherwise — no aggressive feature toggling. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | display-hero | Inter Display | 72 | 500 | 1.05 | -0.022em | ss01, cv11 | Mega hero — single-page anchor only | | display-xl | Inter Display | 56 | 500 | 1.07 | -0.02em | ss01, cv11 | Homepage hero h1 | | display-lg | Inter Display | 44 | 500 | 1.10 | -0.018em | ss01 | Feature section h2 | | display-md | Inter Display | 36 | 500 | 1.14 | -0.014em | ss01 | Pricing-page section heads | | title-lg | Inter Display | 28 | 500 | 1.20 | -0.008em | — | Section titles | | title-md | Inter Display | 22 | 500 | 1.30 | -0.004em | — | Card titles | | title-sm | Inter | 18 | 500 | 1.35 | 0 | — | Small card titles | | label-md | Inter | 16 | 500 | 1.40 | 0 | — | List labels, demo-card titles | | button | Inter | 15 | 500 | 1.20 | 0 | — | CTA button labels | | body-lg | Inter | 18 | 400 | 1.55 | 0 | — | Editorial body, hero subhead | | body-md | Inter | 16 | 400 | 1.55 | 0 | — | Default running-text | | body-sm | Inter | 14 | 400 | 1.50 | 0 | — | Caption support, dense lists | | caption | Inter | 13 | 500 | 1.40 | 0.02em | — | Soft uppercase eyebrow | | caption-tabular | Inter | 13 | 500 | 1.30 | 0 | tnum | Metric / numeric chips | | legal | Inter | 12 | 400 | 1.40 | 0.01em | — | Footer legal, fine print | | code-md | Berkeley Mono | 14 | 400 | 1.50 | 0 | — | Code block default | | code-micro | Berkeley Mono | 12 | 400 | 1.40 | 0 | — | Inline IDs, short snippets | ### Principles - **Display weight is locked at 500.** Going to 700 reads as marketing-template. Height's confidence comes from generous tracking compression, not from weight. - **Negative tracking scales with size.** -0.022em at 72px tightens to 0 at 16px — Inter Display's metric-aware tracking discipline. - **One sub-system, no font swaps.** Unlike Airtable, Height does not swap to a different display family on pricing — Inter Display + Inter carries every page. - **Line-height is generous on body.** 1.55 at 16px reads paper-like and is unusually wide for tech marketing. The whitespace is the brand. - **Mono is reserved for code-only.** Don't reach for Berkeley Mono as a display accent — Inter's `tnum` covers tabular numerics for metric chips. - **Eyebrow tracking is gentle.** 0.02em (not 0.08em or full uppercase) — the eyebrow is a whisper, not a shout. ## Layout ### Spacing System Base unit **4px**. Tokens: `4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 · 96 · 128`. Section padding is **96px** between every major editorial band — universal vertical rhythm constant. Card internal padding is 32px (default cards), 48px (pastel cards), 64px (dark hero band). Inputs use 10–14px internal padding for 40px height. ### Grid & Container - **Max content width**: 1200px centered, 48px horizontal breathing room at desktop, 24px at tablet, 16px at mobile. - **Editorial body**: single-column at the prose width (720px) for hero copy; 2-column or 3-up grid for demo cards. - **Pastel-card grid**: 2-up at desktop, 1-up at mobile. Cards are equal-height inside a row but rows can vary. - **Comparison / pricing**: 3-up tier grid at desktop, stacking to 1-up at mobile. ### Whitespace Philosophy Height uses whitespace as the dominant atmospheric tool. Hero sections sit in 96px+ of cream above and below the headline. The hero is intentionally calm — no gradient, no aurora, no atmospheric mesh. The pastel cards punctuate; the cream canvas breathes between them. ### Section Cadence Page rhythm: cream hero → 2-up pastel grid → cream caption-band → dark mid-page CTA → 3-up pastel grid → cream comparison band → pre-footer cream-strong band → footer. The canvas resets between every dark band — cream + dark + cream creates the rhythm. | Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column body; top nav collapses to hamburger; pastel grid drops to 1-up; hero h1 scales down to 36px / 500; section padding reduces to 64px | | Tablet | 640–1024px | 2-up pastel grid; top nav stays horizontal but tightens; hero scales to 44px | | Desktop | 1024–1200px | 2-up or 3-up pastel grid; full top-nav with all menu items; hero at 56px | | Wide | > 1200px | Same as desktop with more outer breathing room; max content width caps at 1200px and the page adds outer margin rather than scaling type up | ### Touch Targets - `button-primary` and siblings render at 44 × 44px minimum (12px vertical padding + 20px line-height). At desktop padding rises to 12 × 20 = 44px tall, satisfying WCAG AAA. - `button-icon` is 36 × 36px — slightly under WCAG's recommended 44, used only inside dense desktop UI clusters. - `text-input` height is 40px at default; bumps to 44px at mobile breakpoints. ### Collapsing Strategy - Top nav collapses to a hamburger at < 640px; the menu opens as a full-screen sheet rather than a dropdown. - Pastel-card grids reduce columns rather than scaling cards down. - Pricing comparison table converts to horizontally-scrollable swipe at < 1024px; the four plan headers stay visible while body rows scroll. - Footer 6-column link list collapses to 2-up at tablet and 1-up at mobile. ### Image Behavior - Pastel-card UI screenshots crop to fit their container rather than scaling up. - Hero illustrations bleed full-width on mobile, losing horizontal margin. - Customer logo strip wraps to 2 rows at tablet, 3 rows at mobile. ### Container Queries Pricing tier cards use `@container (min-width: 360px)` to switch from stacked-vertical to inline-row pricing layout — independent of viewport width. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, no border | Canvas, top nav background, footer band | | 1 — Hairline | 1px `#e6e3da` border | Default cards, inputs, dividers, secondary buttons | | 2 — Ambient | `0 1px 2px rgba(20,18,30,0.04)` | Resting cards, button rest | | 3 — Standard | `0 6px 20px rgba(20,18,30,0.06)` | Hover state on cards, sticky nav at scroll | | 4 — Elevated | `0 14px 40px rgba(20,18,30,0.10), 0 2px 6px rgba(20,18,30,0.04)` | Pricing-tier cards, integration cards, popovers | | 5 — Deep | `0 28px 60px rgba(20,18,30,0.18), 0 6px 12px rgba(20,18,30,0.08)` | Modals, command palette, large overlays | ### Shadow Philosophy All shadows are warm-ink-tinted (`rgba(20, 18, 30, …)` not pure black) — the 6% warm shift keeps the shadow continuous with the cream canvas. Height does not stack heavy multi-layer shadows on top of pastel cards — the pastel surfaces carry depth through color alone. Shadows appear on elevated cards (pricing, integration) and modals; pastel cards stay flat. ## Shapes | Tier | Token | Value | Use | |---|---|---|---| | Micro | micro | 2px | Cookie / legal bar buttons, hairline accents | | Standard | sm | 6px | Inputs, small chips, status tags | | Comfortable | md | 10px | Default content cards, table cells, inline tags | | Relaxed | lg | 14px | Primary CTAs, secondary buttons, default cards | | Featured | xl | 20px | Pastel surface cards, dark hero card, modals | | Pill | pill | 9999px | Badges, AI tag, status pills | | Full | full | 9999px / 50% | Avatars, icon buttons, carousel arrows | No compound radii. Photography geometry: product UI screenshots inside pastel cards retain native aspect ratios (typically 16:10) and crop into a nested 10px-radius container with a 1px `#e6e3da` outline. Hero illustrations bleed full-width with no rounding. ## Components ### Buttons (5 variants) **`button-primary`** — The signature CTA. Background `#7551dc` chalk-purple, text `#ffffff`, type 15px / 500 Inter, padding 12 × 20px, radius 14px. Used for "Sign up free" / "Get started" — one per viewport. Hover lightens slightly via 4% white overlay; active darkens to `#6745c8`. Focus shows a 3px brand-purple ring at 45% alpha with 2px offset. **`button-secondary`** — Cream-on-cream pair. Background `#fdfcf9` (matches canvas), text `#0e0e10`, type 15px / 500, padding 12 × 20px, radius 14px, 1px hairline `#cfcbbf`. The "Watch demo" / "Talk to sales" pair next to primary. **`button-tertiary`** — Inline text-link button. Background transparent, text `#0e0e10`, padding 10 × 16px, radius 14px. Used for less-committed actions inside dense feature lists. **`button-on-dark`** — Used over the dark mid-page band. Background `#fdfcf9` (cream), text `#0e0e10`, same shape and padding as secondary. The system never inverts to a translucent on-dark style. **`button-icon`** — 36 × 36px circular. Background `#fdfcf9`, 1px hairline border, ink icon. Used for carousel arrows, share, copy-link affordances. ### Cards **`card-pastel-lavender`** — The AI / Copilot signature card. Background `#ede7fb`, text `#0e0e10`, rounded 20px, padding 48px. Carries an h2 in display-lg, supporting copy in body-md, and optionally a product UI screenshot framed inside a smaller nested card (10px radius). **`card-pastel-peach` / `card-pastel-mint` / `card-pastel-butter` / `card-pastel-blush` / `card-pastel-sky`** — Demo-grid pastel siblings. Identical shape and padding to lavender; the surface color signals which feature family ships in that card (peach=task-creation, mint=sprint, butter=milestone, blush=reminder, sky=calendar). **`card-default`** — Default content card on cream canvas. Background `#f7f6f1`, rounded 14px, padding 32px, 1px border `#e6e3da`. Used between pastel bands as a neutral surface. **`card-elevated`** — Pricing tier card, integration card. Background `#ffffff` (pure white), rounded 14px, padding 32px, 1px border `#efece4`, standard shadow. The pure-white surface signals "this is an elevated decision" against the cream canvas. **`hero-card-dark`** — Mid-page dark CTA band. Background `#0e0e10`, text `#fbfbf7` (cream-tinted white, never pure), rounded 20px, padding 64px. Used as the section reset between pastel grids — typically appears once per long-scroll page. ### Badges & Pills - **`badge-ai`** — Inline AI badge. Background `#ede7fb`, text `#5a3bb2` (brand-active), rounded pill, padding 4 × 10px, font-size 12px. Appears next to AI-Copilot demo headlines. - **`badge-tag`** — Category / status pill. Background `#f7f6f1`, text `#5a5a66`, rounded pill, padding 4 × 10px, 12px. - **Status badges** — Use the semantic-soft palettes: success on mint, warning on butter, danger on blush. ### Inputs / Forms **`text-input`** — Default. Background `#ffffff`, text `#0e0e10`, rounded 10px, padding 10 × 14px, height 40px, 1px border `#cfcbbf`. Inter 16px / 400. **`text-input-focus`** — Border recolors to `#7551dc` (brand) and a 3px brand-purple ring at 20% alpha appears outside the border. The chalk-purple focus is unique to Height — Linear and Notion use neutral focus rings; Height uses brand-as-focus. **`text-input-error`** — Border `#cb3946`, helper text `#cb3946`, optional icon-x prefix. ### Navigation **`top-nav`** — 64px-tall sticky bar with `rgba(253,252,249,0.85)` cream-tinted backdrop and 16px backdrop-blur. Wordmark left; primary horizontal menu (Product, Solutions, Pricing, Customers, Resources) center; right cluster carries an "AI Copilot" badge-link, "Talk to sales" text link, "Sign up free" `button-primary`. Stays cream-tinted on every page — never inverted. **`footer`** — `bg-strong` cream band, 96px vertical padding, 6-column desktop link grid (Product / Solutions / Resources / Company / Legal / Social). Lower legal row in legal type at 12px / 400. ### Toasts & Modals **`toast`** — Background `#0e0e10`, text `#fbfbf7`, rounded 10px, padding 12 × 16px, deep shadow. Inline confirmation strings — "Saved to Height", "Copied link". Auto-dismiss after 3s. **Modal** — Background `#ffffff`, rounded 20px, padding 48px, deep shadow, with cream-tinted backdrop overlay at 70% alpha. Close-x in `text-muted` top-right. ### Decorative **`Copilot prompt card`** — A nested pastel-lavender card inside larger feature sections. Carries a fake-input field showing a typed AI prompt with a blinking cursor, plus a generated response in body-md. Uses Berkeley Mono 14px for the prompt text. ### Easing Curves - **Standard** `cubic-bezier(0.4, 0, 0.2, 1)` — default for color, opacity, simple transforms. - **Emphasized** `cubic-bezier(0.16, 1, 0.3, 1)` — pastel card reveals, dark hero band entrance, modal entrance. - **Spring** `cubic-bezier(0.32, 0.72, 0, 1)` — Copilot prompt typing animation, AI badge appearance. ### Duration Buckets - **Instant (80ms)**: Color hover, cursor-state changes. - **Fast (140ms)**: Button hover, focus-ring expansion, input border recolor. - **Standard (220ms)**: Card hover lift, dropdown open, tab switch. - **Slow (360ms)**: Pastel card reveal on scroll, modal entrance, dark hero band fade-in. - **Page (480ms)**: Inter-page route transition (fade + 12px translate-y). ### Per-Component Micro-States - **Button hover (primary)**: Background lightens 4% via white overlay; no transform. 140ms standard ease. - **Button hover (secondary)**: Border thickens from 1px `#cfcbbf` → 1px `#0e0e10`; 140ms. - **Card hover (pastel)**: 4px translate-y lift + standard shadow appears; 220ms emphasized ease. - **Card hover (default)**: Border darkens `#e6e3da` → `#cfcbbf`; 140ms. - **Link hover**: Underline grows 0 → 1px under the text; 140ms. - **Input focus**: Border recolors `#cfcbbf` → `#7551dc`; brand-purple ring expands 0 → 3px at 20% alpha; 140ms. - **AI badge appear**: Spring entrance — scale 0.9 → 1.0 with 0 → 1 opacity; 360ms spring ease. - **Copilot typing**: Mono characters appear one-at-a-time at 40ms each; cursor blinks at 800ms cycle. ### Page Transitions Default Astro / Next-style fade. Inter-page route is a 480ms emphasized fade-in with 12px translate-y. Section-on-scroll reveals are 360ms emphasized fade + 16px offset, gated by `IntersectionObserver`. Pastel cards stagger left-to-right at 80ms increments inside a single grid row. ### Reduced Motion `prefers-reduced-motion: reduce` honored: all transforms removed, transitions reduced to opacity-only at 100ms, pastel-card scroll reveals fade in at their final position with no offset, AI badge appears instantly, Copilot typing animation skips to the final state. ### Contrast Pairs - **Text on bg**: `#0e0e10` on `#fdfcf9` = **18.6** — AAA at every size. - **Body on bg**: `#272730` on `#fdfcf9` = **12.4** — AAA. - **Muted on bg**: `#5a5a66` on `#fdfcf9` = **5.7** — AA at body sizes. - **On-brand**: `#ffffff` on `#7551dc` = **5.6** — AA at body sizes; AAA at display sizes. - **On-dark**: `#fbfbf7` on `#0e0e10` = **17.2** — AAA. - **Link on bg**: `#3344c8` on `#fdfcf9` = **8.1** — AAA. - **AI badge text on brand-soft**: `#5a3bb2` on `#ede7fb` = **6.4** — AA at body sizes. ### Focus Indicators Every focusable element shows a 3px solid brand-purple ring at 45% alpha with 2px offset. The chalk-purple focus reads as branded but never aggressive — it is the same hue as `button-primary` background, scaled down to ring intensity. ### ARIA Patterns - **Buttons**: Native `