--- version: alpha name: Hey description: An opinionated email product by 37signals built on a white-plus-warm-parchment canvas, a single bruising violet as the sole CTA color, two custom typefaces (Really Sans Large and Moniker), and a deliberate rainbow of categorical badge colors — confident, anti-corporate, and unmistakably loud. colors: # Surface / canvas background: "#ffffff" # primary page canvas surface: "#ffffff" # card / testimonial fill surface-parchment: "#edeae6" # warm off-white — testimonial card tint, form backgrounds # Ink / text — "--color-black" from CSS variables ink: "#231c33" # near-black with a purple undertone — all headings + body ink-secondary: "#736c83" # muted violet-gray — supporting copy /* estimated from --color-grey */ on-dark: "#ffffff" # text on primary/dark fills # Brand accent — the signature bruising violet primary: "#5522fa" # CTA buttons, active links, focus indicators (dembrandt high-confidence) primary-hover: "#6629ff" # dembrandt interactive delta hover primary-container: "#d5d2ff" # lavender tint — "--color-lavender" — badge fills, hover tints on-primary: "#ffffff" # white text on violet buttons # Secondary / expressive badge palette (css variables — all opaque 6-digit hex) cobalt: "#0074e4" # --color-cobalt teal: "#5fddc5" # --color-teal rgb(95,221,197) hex conversion yellow: "#f5d652" # --color-yellow rgb(245,214,82) canary: "#fff5ca" # --color-canary rgb(255,245,202) — soft yellow badge fill orange: "#f87917" # --color-orange rgb(248,121,23) coral: "#f95c5c" # --color-coral rgb(249,92,92) coral-dark: "#ec4343" # --color-coral-dark rgb(236,67,67) salmon: "#ec8580" # --color-salmon rgb(236,133,128) green: "#299850" # --color-green rgb(41,152,80) green-light: "#16ba5b" # --color-green-light rgb(22,186,91) sky: "#b6dbff" # --color-sky rgb(182,219,255) lavender: "#d5d2ff" # --color-lavender rgb(213,210,255) purple: "#7700a2" # --color-purple rgb(119,0,162) pink: "#cf6fb6" # --color-pink rgb(207,111,182) pink-light: "#efdaf5" # --color-pink-light rgb(239,218,245) # Semantic success: "#299850" # green — positive states, checkmarks error: "#f95c5c" # coral — error / warning # Borders border: "#edeae6" # hairline warm parchment separators border-muted: "#d6d2cc" # slightly darker — input outlines /* estimated */ # Shadow tints shadow-soft: "#231c33" # was rgba(35,28,51,…) — opaque ink approx; Google format requires hex typography: display-hero: fontFamily: "Really Sans Large, system-ui, -apple-system, sans-serif" fontSize: 83px fontWeight: 900 lineHeight: 1.10 letterSpacing: 0px fontFeature: '"case", "liga", "ss04"' display: fontFamily: "Really Sans Large, system-ui, -apple-system, sans-serif" fontSize: 83px fontWeight: 900 lineHeight: 1.10 letterSpacing: 0px fontFeature: '"case", "liga", "ss04"' heading: fontFamily: "Really Sans Large, system-ui, -apple-system, sans-serif" fontSize: 48px fontWeight: 850 lineHeight: 1.10 letterSpacing: 0px fontFeature: '"case", "liga", "ss04"' heading-sub: fontFamily: "Really Sans Large, system-ui, -apple-system, sans-serif" fontSize: 40px fontWeight: 900 lineHeight: 1.10 letterSpacing: 0px fontFeature: '"case", "liga", "ss04"' body-large: fontFamily: "Moniker, system-ui, -apple-system, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.40 letterSpacing: -0.5px fontFeature: '"case", "liga"' body: fontFamily: "Moniker, system-ui, -apple-system, sans-serif" fontSize: 21px fontWeight: 400 lineHeight: 1.60 letterSpacing: -0.4px fontFeature: '"case", "liga"' body-small: fontFamily: "Moniker, system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.20 letterSpacing: -0.22px fontFeature: '"case", "liga"' label-small-caps: fontFamily: "Moniker, system-ui, -apple-system, sans-serif" fontSize: 27px fontWeight: 500 lineHeight: 1.00 letterSpacing: -0.48px fontFeature: '"c2sc", "smcp"' button-ui: fontFamily: "Moniker, system-ui, -apple-system, sans-serif" fontSize: 21px fontWeight: 500 lineHeight: 1.00 letterSpacing: -0.26px fontFeature: '"case", "liga"' nav-link: fontFamily: "Moniker, system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.45 letterSpacing: -0.22px fontFeature: '"case", "liga"' caption: fontFamily: "Moniker, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.00 letterSpacing: -0.18px fontFeature: '"case", "liga"' spacing: xs: 4px sm: 10px md: 16px lg: 32px xl: 45px 2xl: 64px 3xl: 90px 4xl: 128px 5xl: 160px rounded: sm: 6px md: 12px lg: 20px xl: 32px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 16px 32px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-ghost: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 16px 32px button-ghost-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 32px card-testimonial: backgroundColor: "{colors.surface-parchment}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 32px badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px badge-category: backgroundColor: "{colors.canary}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 14px 18px border: "1px solid {colors.border-muted}" input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" border: "1px solid {colors.primary}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 16px 45px link: textColor: "{colors.primary}" typography: "{typography.body}" padding: 0px link-hover: textColor: "{colors.ink}" padding: 0px --- # Hey Design System ## Overview HEY arrives on a pure white canvas with the bearing of a product that has never once worried about looking like enterprise software. The whole surface is white with occasional warm-parchment tints (`{colors.surface-parchment}`) borrowed from the feel of physical correspondence — a gentle nod to the thing email replaced. Against that quiet ground, a single bruising violet (`{colors.primary}`) does every piece of persuasive work: "TRY HEY FREE" in the sticky nav, the final CTA, links in the body. The discipline of giving one color all the action signals are the whole page's argument: this is a product with strong opinions and no interest in hedging. The typeface story is two-part. "Really Sans Large" is HEY's custom display face — ultra-heavy at weight 900, uppercase via the `case` OpenType feature, and visually massive at 83px for hero headlines. It reads the way a rubber stamp reads: punchy, emphatic, a little blunt. Paired beneath it, "Moniker" handles every line of body copy, navigation, and UI labels — a refined variable grotesk with a legible, slightly humanist disposition. The contrast between these two faces is the brand's voice made physical: shout the headlines, speak the details. A third typeface, Shantell Sans, appears in `{colors.surface-parchment}` feature callouts as a hand-drawn accent — unruly and warm, clearly drawn by a person, not a grid. The color system is deceptively expansive. While `{colors.primary}` runs the interface, the CSS defines a full rainbow of named categorical hues — lavender, cobalt, coral, teal, yellow, canary, orange, green, salmon, sky, pink — each an explicit `--color-*` variable. These are the palette for email categories, message badges, and contextual label chips: a joy-forward system that lets users identify their inbox zones by color the way you'd color-code index cards. The whole effect is one of unusual confidence: a business product that lets itself be colorful, hand-drawn, and a little loud. HEY doesn't design like it's afraid of you. **Key Characteristics:** - White canvas with warm parchment section tints (`{colors.surface-parchment}`) — clean but never sterile - A single bruising violet (`{colors.primary}`) owns every CTA and focus state — no dilution - Pill-shaped primary button (`{rounded.pill}`) — friendly, physical, hard to miss - "Really Sans Large" at weight 900, `case` + `liga` + `ss04` features — uppercase by default, maximum mass - "Moniker" grotesk for body and UI — variable font, negative-tracked, humanist and calm - "Shantell Sans" as a hand-drawn highlight accent — drawn warmth layered into a feature section - Named rainbow CSS color palette (`{colors.cobalt}`, `{colors.teal}`, `{colors.yellow}`, etc.) for email category chips - Testimonial cards in warm parchment (`{colors.surface-parchment}`) — a deliberate break from white-on-white flatness - Ultra-generous spacing (`{spacing.5xl}` at 160px for major section gaps) — confident use of air - Motion is a single easing curve: `cubic-bezier(0.37, 1, 0.74, 1)` at 150ms — quick with a spring, never linear - Anti-corporate copy voice: opinionated, first-person, occasionally conversational ("HEY assumes that only the people you want email from should be able to email you") ## Colors ### Surface & Canvas - **White** (`{colors.background}` / `{colors.surface}`): The baseline page canvas and testimonial card fill. - **Warm Parchment** (`{colors.surface-parchment}`): Section alternation tint — testimonial grids, form backgrounds. Warm enough to feel physical; pale enough to stay background. ### Ink / Text - **Purple-Black** (`{colors.ink}`): Primary text — the darkest color on the page, a near-black with a violet undertone that echoes the brand accent. All headings and body copy. - **Muted Violet-Gray** (`{colors.ink-secondary}`): Supporting and secondary copy — quieter without going neutral. ### Brand Accent - **Bruising Violet** (`{colors.primary}`): The one action color. Every primary button, active nav link, focus ring, and hyperlink uses this. The hover state darkens only slightly to `{colors.primary-hover}`. - **Lavender Tint** (`{colors.primary-container}`): Badge fills, hover backgrounds, container tints — the violet lightened to a pastel that keeps categorical color legible. ### Categorical Badge Palette HEY's email system uses named CSS variables as a full identity layer for category chips. Each is a saturated hue designed for legibility on white or parchment: - **Cobalt** (`{colors.cobalt}`) — Work / professional category - **Teal** (`{colors.teal}`) — Newsletters - **Yellow** (`{colors.yellow}`) / **Canary** (`{colors.canary}`) — Pending, screener imbox - **Orange** (`{colors.orange}`) / **Coral** (`{colors.coral}`) — Receipts / transactions - **Green** (`{colors.green}`) / **Green Light** (`{colors.green-light}`) — Positive states - **Lavender** (`{colors.lavender}`) / **Sky** (`{colors.sky}`) — Personal / social - **Pink** (`{colors.pink}`) / **Salmon** (`{colors.salmon}`) — Subscriptions, paper trail ### Semantic - **Green** (`{colors.success}`): Completion, positive confirmation. - **Coral** (`{colors.error}`): Error, destructive actions. ### Borders & Shadow - **Parchment Hairline** (`{colors.border}`): Section and card borders — barely-there dividers that feel paper-like. - **Shadow** (`{colors.shadow-soft}`): Opaque proxy for the ink-tinted box shadows (originals were rgba over the ink color — flattened for the Google spec). ## Typography ### Font Family - **Display**: `Really Sans Large` — a custom ultra-black grotesk at weight 900, used exclusively for headlines and section titles. OpenType features `case` (uppercase coercion), `liga`, and `ss04` active. Not available on Google Fonts — fallback to `system-ui, -apple-system, sans-serif`. - **Body / UI**: `Moniker` — a custom variable grotesk, humanist and readable, with `c2sc`/`smcp` small-caps features available and `case`/`liga` active for most body contexts. Not available on Google Fonts — fallback to `system-ui, -apple-system, sans-serif`. - **Hand-drawn accent**: `Shantell Sans` — a bouncy, handwritten display font from Google Fonts (available as `Shantell Sans` at `fonts.googleapis.com`). Used for a single emphasis line or feature callout word. - **Weights**: Really Sans Large at 850-900; Moniker at 400-500. No light weights anywhere — the system has mass. ### Hierarchy The complete type scale is declared in the `typography:` token block. Reference tokens directly via `{typography.*}`. | Token | Use | |---|---| | `display-hero` | 83px / 900 — the marquee hero headline, uppercase via `case` feature | | `display` | 83px / 900 — repeated hero-scale usage in major section openers | | `heading` | 48px / 850 — feature section headings | | `heading-sub` | 40px / 900 — secondary heads, subfeature labels | | `body-large` | 32px / 400 — lead paragraphs, hero support sentences | | `body` | 21px / 400 — standard copy, feature descriptions | | `body-small` | 18px / 400 — dense supporting text, footer copy | | `label-small-caps` | 27px / 500 — small-caps via `smcp` — email type labels, category names | | `button-ui` | 21px / 500 — CTA and nav button labels | | `nav-link` | 18px / 500 — navigation items | | `caption` | 14px / 500 — badges, tags, micro labels | ### Principles - **Maximum mass at hero**: Really Sans Large at 900 weight and 83px defaults to uppercase — each headline lands like a rubber stamp on the page. - **Moderate at body**: Moniker at 400 provides an easy reading experience under the heavy display. The contrast is intentional — shout at the top, speak in the details. - **Negative tracking throughout**: body and UI type runs at -0.22 to -0.56px letter-spacing — tighter than convention, slightly editorial. - **Small-caps via OpenType**: the `c2sc`/`smcp` feature pair on Moniker activates true small-caps for category labels — a notch above faking it with font-size reduction. - **Shantell Sans sparingly**: one hand-drawn word or phrase per major section at most — its value is in contrast, not repetition. ## Layout ### Spacing System The full scale is in the `spacing:` token block. HEY uses a fairly coarse scale, anchored around 10px increments, with the outer spacing values (128-160px) used for major section gaps. The overall rhythm is generous — the page breathes as much as it shouts. ### Grid & Container - Centered max-width container; hero sections pair a large left-aligned or centered headline with product screenshots or testimonial grids on the right or below - Testimonial section is a masonry-ish grid of parchment-tinted cards — dense, but each card is fully contained - Feature sections alternate between pure-white and parchment backgrounds to produce page rhythm without visible dividers - Sticky nav is minimal: logo left, navigation links center, violet "TRY HEY FREE" pill-button right ### Whitespace Philosophy - **Air is an argument**: 128-160px gaps between major sections (`{spacing.4xl}`–`{spacing.5xl}`) communicate that HEY isn't afraid to claim space — confident products don't rush - **Parchment for density**: when content gets denser (testimonials), the warm background tint keeps it from feeling cramped - **One focal point per viewport**: the system avoids stacking multiple CTAs — each section has one clear next step ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, parchment border (`{colors.border}`) | Page regions, nav at rest | | Card (Level 1) | Subtle soft box-shadow — ink-tinted at low opacity (`{colors.shadow-soft}`) | Testimonial cards, feature panels | | Elevated (Level 2) | Deeper ink-tinted shadow | Modals, floating menus (app context) | | Focus Ring | `0 0 0 3px {colors.primary}` | Keyboard-focused interactive controls | **Shadow Philosophy**: HEY's elevation is understated — the surface color change (white → parchment) does more visual separation work than shadows do. Where shadows appear, they borrow the ink's purple undertone (`{colors.shadow-soft}`) rather than neutral black, subtly tying depth to the brand's pigment. Nothing is dramatic. The product lets the colors and typography carry the energy. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `sm` | 6px | Small chips, tight UI elements | | `md` | 12px | Input fields, secondary cards | | `lg` | 20px | Standard cards, feature panels | | `xl` | 32px | Large testimonial cards, hero panels | | `pill` | 9999px | Primary CTA buttons, badge chips | The defining shape choice is the pill primary button — fully rounded ends, a form that reads as approachable and physical, like a candy or a postage stamp. Badges inherit the same pill treatment. Cards stay in the 20-32px range — soft but structured. There are no sharp corners on interactive elements. ## Components The complete component spec lives in the `components:` token block. ### Button Variants - **`button-primary`** — Violet (`{colors.primary}`) fill, white text, pill radius (`{rounded.pill}`), 16px × 32px padding. The single go-action per view. Hover brightens to `{colors.primary-hover}`. - **`button-ghost`** — Transparent fill, violet text, same pill radius and padding. Used for secondary actions or when placed over a parchment section. ### Cards - **`card`** — White fill, 20px radius, 32px padding, light ink-tinted shadow. - **`card-testimonial`** — Warm parchment fill (`{colors.surface-parchment}`), 32px radius, generous 32px padding. Used for the customer quote grid. ### Badges - **`badge`** — Lavender tint (`{colors.primary-container}`) fill, dark ink text, caption typography, pill radius. Default badge for feature labels. - **`badge-category`** — Canary yellow fill (`{colors.canary}`). One of the named categorical hues; swap fill to any `--color-*` variable for the appropriate inbox category color. ### Inputs - **`input`** — White fill, 1px parchment-border outline, 12px radius. **`input-focus`** swaps border to violet (`{colors.primary}`) — the accent reasserts at keyboard contact. ### Navigation - **`nav-bar`** — White background, ink text for links, Moniker nav-link weight. The violet "TRY HEY FREE" pill-button is the only colored element; everything else is typographic. ### Links - **`link`** — Violet primary color by default, underlined. **`link-hover`** shifts to full ink color with underline retained. ## Do's and Don'ts ### Do - Use `{colors.primary}` for exactly one CTA per view — the violet button should be the only colored interactive element in the field - Render display headlines in Really Sans Large at weight 900 with the `case` OpenType feature forced — HEY's headlines are always uppercase - Use pill radius (`{rounded.pill}`) on all buttons and badge chips — it's the brand's defining shape - Alternate sections between white (`{colors.background}`) and warm parchment (`{colors.surface-parchment}`) for rhythm without heavy borders - Pull categorical badge colors from the named CSS variable set (`{colors.cobalt}`, `{colors.teal}`, `{colors.yellow}`, etc.) — they're tuned for legibility on white and parchment - Keep the `cubic-bezier(0.37, 1, 0.74, 1)` easing curve at 150ms for all interactive transitions — springy without being bouncy - Reserve Shantell Sans for a single handwritten emphasis per section at most — its warmth evaporates with repetition - Size primary CTAs generously (at least 16px top/bottom padding) — HEY's CTA is meant to be hit on a phone, not hunted with a cursor ### Don't - Don't add a second accent color for CTAs — `{colors.primary}` is the only action color; secondary actions use ghost style or are plain text links - Don't mix Really Sans Large into body text — its 900 weight and OpenType uppercase are display-only; body belongs to Moniker - Don't use sharp corners on buttons or badges — the system has no `{rounded.none}` use case on interactive elements - Don't let Shantell Sans carry meaning-bearing UI labels — it's a decorative accent, not an information font - Don't introduce new accent hues outside the defined CSS `--color-*` palette for badge chips; the rainbow is intentionally bounded - Don't crowd sections — the confidence of the design depends on the 128-160px breathing room (`{spacing.4xl}`–`{spacing.5xl}`) between features - Don't use low-contrast warm grays for body text — `{colors.ink}` is the floor; `{colors.ink-secondary}` only for genuinely secondary metadata - Don't apply the full rainbow palette outside of categorical email labels — in non-inbox contexts, it reads as visual noise --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Single column; hero type scales 83px → ~32px; nav collapses to logo + hamburger | | Mobile | 375–639px | Single column; pill CTA goes full-width; testimonial grid stacks | | Tablet | 640–1023px | Two-column feature sections begin; sticky nav gains breathing room | | Desktop | 1024–1279px | Full layout; hero headline at full 83px scale | | Large Desktop | ≥1280px | Centered max-width container; section gaps expand to `{spacing.5xl}` | ### Touch Targets - Primary pill button with 16px vertical padding is a comfortable thumb target at all viewport sizes - Nav links maintain generous tap areas; the "TRY HEY FREE" pill is always visible in the sticky nav ### Collapsing Strategy - **Navigation**: horizontal links collapse to a hamburger toggle on mobile; the violet CTA pill persists as the hero action - **Hero**: display headline scales down proportionally; lead paragraph shrinks to `{typography.body}`; product screenshot stacks below copy - **Testimonial grid**: masonry grid collapses to a single-column stack of parchment cards - **Feature sections**: side-by-side layouts stack vertically; parchment alternation is preserved - **Spacing**: major section gaps compress from 128-160px toward 48-64px at mobile ### Image Behavior - Product screenshots and inbox illustrations reflow as fluid images within their soft-rounded card frames - Hand-drawn Shantell Sans accent text scales proportionally with its section --- ## Agent Prompt Guide ### Quick Color Reference - Background: White (`{colors.background}`) - Section tint: Warm Parchment (`{colors.surface-parchment}`) - Text: Purple-Black (`{colors.ink}`) - Brand accent: Bruising Violet (`{colors.primary}`) - Secondary text: Muted Violet-Gray (`{colors.ink-secondary}`) - Border: Parchment Hairline (`{colors.border}`) - CTA: Violet (`{colors.primary}`) — exactly one per view, pill-shaped ### Example Component Prompts - "Create a hero section on white (`{colors.background}`). Headline in Really Sans Large 900 weight, `case` OpenType feature, 83px, `{colors.ink}` color (`{typography.display-hero}`). Below it, a lead paragraph in Moniker 400 at 32px (`{typography.body-large}`). One primary CTA: violet (`{colors.primary}`) pill button, white text at `{typography.button-ui}`, `{rounded.pill}` radius, 16px × 32px padding." - "Build a primary button: violet (`{colors.primary}`) fill, white text in Moniker 500 at 21px (`{typography.button-ui}`), fully pill-rounded (`{rounded.pill}`), 16px vertical × 32px horizontal padding. On hover, lighten fill to `{colors.primary-hover}`." - "Design a testimonial card: warm parchment fill (`{colors.surface-parchment}`), 32px radius (`{rounded.xl}`), 32px padding. Inside: quote body in Moniker 400 at 21px (`{typography.body}`), ink color (`{colors.ink}`). Below: reviewer name in Moniker 500 at 18px (`{typography.nav-link}`), ink-secondary color (`{colors.ink-secondary}`)." - "Create an email category badge chip: canary yellow fill (`{colors.canary}`), ink text (`{colors.ink}`) in Moniker 500 at 14px (`{typography.caption}`), pill radius (`{rounded.pill}`), 4px × 12px padding. Swap fill to `{colors.cobalt}` (white text) for a work-category badge variant." - "Build a feature section with alternating parchment background (`{colors.surface-parchment}`): centered Really Sans Large heading 48px/850 (`{typography.heading}`), then a two-column grid of white cards (`{rounded.lg}`) with Moniker body copy. One violet pill CTA (`{colors.primary}`) centered below the grid." - "Design a sticky nav: white background (`{colors.background}`), logo left, Moniker nav links centered at 18px/500 (`{typography.nav-link}`) in `{colors.ink}`, right-aligned violet pill button ('TRY HEY FREE') using `{colors.primary}` fill and white text. On link hover, color shifts to `{colors.primary}` with `cubic-bezier(0.37, 1, 0.74, 1)` at 150ms." ### Iteration Guide 1. Start on white (`{colors.background}`). Flip any testimonial or dense-content section to parchment (`{colors.surface-parchment}`) — that's the only background variant. 2. Place exactly **one** violet pill button (`{colors.primary}`, `{rounded.pill}`) per view as the primary CTA. If two actions compete, make the second a ghost button or a plain text link. 3. Set all display headlines in Really Sans Large at 900 weight with the `case` feature forcing uppercase. Body copy switches to Moniker at 400 with slight negative tracking. 4. Color any category badge chips from the named CSS variable rainbow — `{colors.canary}`, `{colors.cobalt}`, `{colors.teal}`, etc. Each should be a single saturated hue on a white or parchment ground. 5. Size section gaps generously: 128-160px (`{spacing.4xl}`–`{spacing.5xl}`) between major features. If a section feels crowded, add space before changing color or layout. 6. For all transitions, use `cubic-bezier(0.37, 1, 0.74, 1)` at 150ms. It feels springy and quick — consistent across links, buttons, and inputs. 7. Add one Shantell Sans hand-drawn accent word per major section — a single styled span inside a paragraph or headline. Then stop. --- ## 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 Hey. Brand names and trademarks belong to their respective owners.