getrelay 0.1.0

package/design-md/superhuman/DESIGN.md

@@ -0,0 +1,448 @@
+---
+version: alpha
+name: Superhumon Inspired
+description: An inspired interpretation of Superhumon's design language — a fast-email productivity brand split between an editorial dark hero (deep indigo navy with violet-sky atmospheric backdrop and a portrait subject) and a quiet white content body with off-warm-grey ink. The system uses a single proprietary variable display sans, heavy weight 460–540 with tight tracking, and a deep-teal closing CTA band that breaks the indigo/white rhythm with a warm dark interlude. Buttons are tight rounded rectangles, pricing is sober and dense, and the brand reads more like a high-end newsletter than a SaaS app.
+
+colors:
+  primary: "#1b1938"
+  primary-deep: "#0e0c1f"
+  on-primary: "#ffffff"
+  ink: "#292827"
+  ink-mute: "#73706d"
+  ink-faint: "#9a9794"
+  canvas: "#ffffff"
+  canvas-soft: "#fafaf8"
+  surface-violet-soft: "#c9b4fa"
+  surface-teal-deep: "#0e3030"
+  surface-teal-mid: "#155555"
+  hairline: "#e8e4dd"
+  hairline-dark: "#3f3a52"
+  on-dark-mute: "#bcbac9"
+  on-dark-faint: "#5a5772"
+
+typography:
+  display-xxl:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 64px
+    fontWeight: 540
+    lineHeight: 0.96
+    letterSpacing: 0
+  display-xl:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 48px
+    fontWeight: 460
+    lineHeight: 0.96
+    letterSpacing: -1.32px
+  display-lg:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 28px
+    fontWeight: 540
+    lineHeight: 1.14
+    letterSpacing: -0.63px
+  display-md:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 22px
+    fontWeight: 460
+    lineHeight: 1.1
+    letterSpacing: -0.315px
+  heading-lg:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 20px
+    fontWeight: 460
+    lineHeight: 1.2
+    letterSpacing: -0.4px
+  body-lg:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 18px
+    fontWeight: 540
+    lineHeight: 1.5
+    letterSpacing: -0.135px
+  body-md:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 16px
+    fontWeight: 460
+    lineHeight: 1.5
+    letterSpacing: 0
+  body-strong:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 18.72px
+    fontWeight: 700
+    lineHeight: 1.5
+    letterSpacing: 0
+  button-md:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 16px
+    fontWeight: 700
+    lineHeight: 1.0
+    letterSpacing: 0
+  button-cap:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 14px
+    fontWeight: 600
+    lineHeight: 1.0
+    letterSpacing: 0
+  caption:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 14px
+    fontWeight: 460
+    lineHeight: 1.4
+    letterSpacing: 0
+  micro:
+    fontFamily: "'Super Sans VF', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+    fontSize: 12px
+    fontWeight: 540
+    lineHeight: 1.4
+    letterSpacing: 0
+
+rounded:
+  xs: 4px
+  sm: 6px
+  md: 8px
+  lg: 12px
+  xl: 16px
+  full: 9999px
+
+spacing:
+  xxs: 2px
+  xs: 4px
+  sm: 8px
+  md: 12px
+  lg: 16px
+  xl: 24px
+  xxl: 32px
+  huge: 64px
+
+components:
+  button-primary-dark:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+  button-primary-dark-pressed:
+    backgroundColor: "{colors.primary-deep}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+  button-on-dark-pill:
+    backgroundColor: "{colors.surface-violet-soft}"
+    textColor: "{colors.primary}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.full}"
+    padding: 12px 20px
+  button-secondary-outline:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+  button-on-teal:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.surface-teal-deep}"
+    typography: "{typography.button-md}"
+    rounded: "{rounded.md}"
+    padding: 12px 20px
+  text-input:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.sm}"
+    padding: 10px 12px
+  card-feature-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-pricing:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-pricing-featured:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 32px
+  card-teal-band:
+    backgroundColor: "{colors.surface-teal-deep}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-lg}"
+    rounded: "{rounded.lg}"
+    padding: 64px
+  card-feature-row:
+    backgroundColor: "{colors.canvas-soft}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.md}"
+    padding: 24px
+  pill-tab-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.button-cap}"
+    rounded: "{rounded.full}"
+    padding: 8px 16px
+  nav-bar-dark:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 16px 24px
+  nav-bar-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 16px 24px
+  link-on-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.xs}"
+    padding: 0px
+  footer-light:
+    backgroundColor: "{colors.canvas}"
+    textColor: "{colors.ink-mute}"
+    typography: "{typography.caption}"
+    rounded: "{rounded.xs}"
+    padding: 64px 24px
+---
+
+## Overview
+
+Superhumon's marketing pages open in an editorial dark register: a deep indigo navy `{colors.primary}` (`#1b1938`) canvas overlaid with a soft violet-and-sky atmospheric backdrop and a half-bleed portrait subject (often a person looking off-frame, photographed at twilight). Headlines render in `{typography.display-xxl}` (Super Sans VF at 64px / weight 540) with negative tracking, set in white over the indigo. A single rounded-rectangle CTA button anchors each band — never two, never three.
+
+The body of every page flips to white. `{colors.canvas}` (`#ffffff`) takes over below the hero, with body type in `{colors.ink}` (`#292827` — a slightly warm dark grey, never pure black) and feature rows alternating between white and `{colors.canvas-soft}` (a barely-tinted off-white). Pricing tiers sit on this white surface; the featured tier inverts to the indigo navy, completing the brand's binary polarity.
+
+Every page closes with a **deep-teal CTA band** (`{colors.surface-teal-deep}` — `#0e3030`). The teal is a single chromatic interlude: rich, almost-black green-blue, that breaks up what would otherwise be an indigo/white-only page. The teal band always contains the closing CTA in `{typography.display-lg}` paired with a single white-pill button.
+
+Typography runs **Super Sans VF** — a proprietary variable display sans — at unusual mid-weights (460, 540, 600). The variable axes let the brand pick precise sub-default weights that read as warmer and more human than typical 400/500/700 SaaS scales. Display sizes use negative letter-spacing of -1.32px to -0.315px depending on size; line-heights are unusually tight (0.96 on 48px display).
+
+**Key Characteristics:**
+- Three-canvas system: indigo navy (`{colors.primary}`) for hero, white (`{colors.canvas}`) for body, deep teal (`{colors.surface-teal-deep}`) for closing CTA.
+- Half-bleed portrait subject in the hero with violet-sky atmospheric backdrop — the brand uses a person looking off-frame as a recurring visual.
+- Single CTA per band; the marketing pages never crowd actions.
+- Super Sans VF at sub-default weights (460, 540, 600) — the brand's typographic warmth signature.
+- Tight line-heights (0.96) on display sizes — vertical compression as editorial density.
+- Off-warm-grey body ink (`#292827`) — never pure black; the brand's quiet warmth.
+- Pill-shaped on-hero CTA in pale violet (`{colors.surface-violet-soft}`); rounded-rectangle CTAs everywhere else.
+
+## Colors
+
+> **Source pages:** home (`/`), `/products/go-ai-assistant`, `/contact-sales`, `/plans`.
+
+### Brand & Accent
+- **Primary Indigo Navy** (`{colors.primary}` — `#1b1938`): The brand's primary surface and CTA color. Hero canvas, filled rounded-rectangle button, featured pricing tier.
+- **Indigo Deep** (`{colors.primary-deep}` — `#0e0c1f`): Pressed-state lift / deeper navy used in hero gradient stops.
+- **Surface Violet Soft** (`{colors.surface-violet-soft}` — `#c9b4fa`): The hero pill-button fill — pale violet over the indigo canvas. Also appears in atmospheric backdrops.
+- **Surface Teal Deep** (`{colors.surface-teal-deep}` — `#0e3030`): The signature closing-CTA band color. Rich green-blue, almost black.
+- **Surface Teal Mid** (`{colors.surface-teal-mid}` — `#155555`): Slightly lifted teal for nested chrome inside the band.
+
+### Surface
+- **Canvas** (`{colors.canvas}` — `#ffffff`): Default body background.
+- **Canvas Soft** (`{colors.canvas-soft}` — `#fafaf8`): Barely-warm off-white for alternating feature-row bands.
+- **Hairline** (`{colors.hairline}` — `#e8e4dd`): 1px borders, slightly warm grey.
+- **Hairline Dark** (`{colors.hairline-dark}` — `#3f3a52`): 1px borders on dark surfaces.
+
+### Text
+- **Ink** (`{colors.ink}` — `#292827`): Default body text. Warm dark grey, never pure black.
+- **Ink Mute** (`{colors.ink-mute}` — `#73706d`): Secondary text, captions.
+- **Ink Faint** (`{colors.ink-faint}` — `#9a9794`): Tertiary / disabled text.
+- **On Primary** (`{colors.on-primary}` — `#ffffff`): Text on dark navy / teal surfaces.
+- **On Dark Mute** (`{colors.on-dark-mute}` — translucent white): Secondary text on dark.
+- **On Dark Faint** (`{colors.on-dark-faint}` — translucent white): Tertiary text on dark.
+
+## Typography
+
+### Font Family
+
+The display and UI tier is **Super Sans VF** — a proprietary variable sans (variable axes for weight, with the brand using sub-default 460 / 540 / 600 weights). Fallback chain is the system font stack.
+
+For substitution use **Inter Variable** (open-source) at weight 460 / 540 / 600 — Inter's variable axes match Super Sans VF's behavior closely. Avoid fixed-weight Inter at 400 / 500 / 600 — the brand specifically picks the in-between weights.
+
+### Hierarchy
+
+| Token | Size | Weight | Line Height | Letter Spacing | Use |
+|---|---|---|---|---|---|
+| `{typography.display-xxl}` | 64px | 540 | 0.96 | 0 | Hero headline |
+| `{typography.display-xl}` | 48px | 460 | 0.96 | -1.32px | Section opener on light surfaces |
+| `{typography.display-lg}` | 28px | 540 | 1.14 | -0.63px | Sub-section / feature title |
+| `{typography.display-md}` | 22px | 460 | 1.1 | -0.315px | Card title |
+| `{typography.heading-lg}` | 20px | 460 | 1.2 | -0.4px | Compact card title |
+| `{typography.body-lg}` | 18px | 540 | 1.5 | -0.135px | Marketing body lead |
+| `{typography.body-md}` | 16px | 460 | 1.5 | 0 | Default UI body |
+| `{typography.body-strong}` | 18.72px | 700 | 1.5 | 0 | Emphasized body |
+| `{typography.button-md}` | 16px | 700 | 1.0 | 0 | Rounded-rectangle button label |
+| `{typography.button-cap}` | 14px | 600 | 1.0 | 0 | Compact button label |
+| `{typography.caption}` | 14px | 460 | 1.4 | 0 | Helper, footnote |
+| `{typography.micro}` | 12px | 540 | 1.4 | 0 | Pill label, fine print |
+
+### Principles
+- **Sub-default weights.** The brand picks 460 / 540 / 600 instead of 400 / 500 / 700 — a quiet warmth in the typography that distinguishes it from default SaaS systems.
+- **Tight display leading.** 0.96 on 48–64px display — the type stacks unusually compact.
+- **Negative tracking on display sizes.** -1.32px at 48px scaling proportionally — tightens the variable letterforms into editorial density.
+
+### Note on Font Substitutes
+**Inter Variable** (open-source via Google Fonts) is the recommended substitute. Set `font-variation-settings: "wght" 540` for display, 460 for body — Inter's variable axes match. Avoid fixed-weight Inter; the in-between weights are the brand's signature.
+
+## Layout
+
+### Spacing System
+- **Base unit**: 8px (with 2 / 4 / 12 sub-tokens for fine work).
+- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 64px.
+- **Section padding**: 64–96px on most sections; closing teal band uses 96–128px for editorial weight.
+- **Card internal padding**: 32px on pricing cards; 24px on alternating feature rows.
+
+### Grid & Container
+- Hero spans full viewport width with the violet-sky backdrop edge-to-edge; content centers in a ~960px column.
+- Body content centers in ~960–1100px.
+- Pricing collapses 3-up → 2-up → 1-up at 1024 / 768 breakpoints.
+
+### Whitespace Philosophy
+The brand uses generous editorial whitespace on both polarities — dark hero and white body. Section gaps tend toward 96px; the teal closing band gets up to 128px of vertical air. The whitespace itself is part of the brand's "considered, slow-tempo" feel.
+
+## Elevation & Depth
+
+| Level | Treatment | Use |
+|---|---|---|
+| 0 | Flat | Default surface |
+| 1 | `box-shadow: 0 1px 3px rgba(0,0,0,0.08)` | Subtle card lift |
+| 2 | `box-shadow: 0 8px 24px rgba(0,0,0,0.12)` | Floating panels, modals |
+| 3 | Atmospheric backdrop (violet-sky over indigo) | The hero's depth medium |
+
+### Decorative Depth
+The hero's depth is the **violet-sky atmospheric backdrop** — a soft indigo-to-violet-to-sky-blue radial wash that sits behind the portrait subject. Implemented as a CSS radial gradient or large background image. Below the hero, depth is minimal — the white canvas is flat.
+
+## Shapes
+
+### Border Radius Scale
+
+| Token | Value | Use |
+|---|---|---|
+| `{rounded.xs}` | 4px | Hairline tags |
+| `{rounded.sm}` | 6px | Form inputs |
+| `{rounded.md}` | 8px | Buttons (the brand's signature button shape — rounded rectangle, never pill) |
+| `{rounded.lg}` | 12px | Pricing cards, feature cards |
+| `{rounded.xl}` | 16px | Modal dialogs, large feature cards |
+| `{rounded.full}` | 9999px | Pill tabs in feature row, hero CTA |
+
+### Photography Geometry
+The hero uses **half-bleed portrait subjects** — a person photographed at twilight, looking off-frame, occupying the right half of the hero. The portrait extends edge-to-edge vertically and stops mid-canvas horizontally; type sits on the left side. Other photography is rare; product UI mockups handle most other illustrative needs.
+
+## Components
+
+### Buttons
+
+**`button-primary-dark`** — the dominant rounded-rectangle CTA on white surfaces.
+- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}`, padding `{spacing.md} {spacing.xl}` (12px 20px), rounded `{rounded.md}` 8px.
+- Pressed state `button-primary-dark-pressed` shifts to `{colors.primary-deep}`.
+
+**`button-on-dark-pill`** — the hero CTA in pale violet pill shape.
+- Background `{colors.surface-violet-soft}`, text `{colors.primary}`, same typography, padding 12px 20px, rounded `{rounded.full}`. The pill shape only appears on the hero — body CTAs use the rounded rectangle.
+
+**`button-secondary-outline`** — outline alternative on white.
+- Background `{colors.canvas}`, text `{colors.ink}`, 1px solid `{colors.hairline-dark}` border, same shape as `button-primary-dark`.
+
+**`button-on-teal`** — CTA inside the closing teal band.
+- Background `{colors.canvas}`, text `{colors.surface-teal-deep}`, rounded-rectangle, same typography.
+
+### Cards & Containers
+
+**`card-feature-light`** — feature card on white.
+- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`, 1px `{colors.hairline}` border.
+
+**`card-pricing`** — standard pricing tier card.
+- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`, 1px `{colors.hairline}` border.
+
+**`card-pricing-featured`** — inverted indigo featured tier.
+- Background `{colors.primary}`, text `{colors.on-primary}`, otherwise identical to `card-pricing`.
+
+**`card-teal-band`** — the closing CTA band on every page.
+- Background `{colors.surface-teal-deep}`, text `{colors.on-primary}`, padding `{spacing.huge}` 64px, rounded `{rounded.lg}` 12px (often radius-less in practice when full-bleed). Holds a single closing headline in `{typography.display-lg}` and a `button-on-teal`.
+
+**`card-feature-row`** — alternating feature-row card on the body.
+- Background `{colors.canvas-soft}`, text `{colors.ink}`, padding `{spacing.xl}` 24px, rounded `{rounded.md}` 8px. Used in pairs/triplets to explain features below the hero.
+
+### Inputs & Forms
+
+**`text-input`** — standard form input.
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.sm}+ {spacing.md}` (10px 12px), rounded `{rounded.sm}` 6px, 1px `{colors.hairline}` border.
+
+### Navigation
+
+**`nav-bar-dark`** — top nav over the indigo hero.
+- Background `{colors.primary}`, text `{colors.on-primary}`, padding `{spacing.lg} {spacing.xl}`. Logo on the left, nav center, "Get Started" `button-on-dark-pill` on the right.
+
+**`nav-bar-light`** — top nav on body / pricing pages.
+- Background `{colors.canvas}`, text `{colors.ink}`, otherwise same structure with `button-primary-dark` on the right.
+
+### Pills, Tags, and Chips
+
+**`pill-tab-light`** — feature-row tab selector.
+- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.button-cap}`, padding `{spacing.sm} {spacing.lg}`, rounded `{rounded.full}`. Used in the feature category picker (Mail / Channels / Code / AI / Calendar etc.) below the hero.
+
+### Signature Components
+
+**Half-Bleed Portrait Hero** — a person photographed at twilight, occupying the right half of the indigo hero with violet-sky atmospheric backdrop behind. Type and CTA sit on the left side. The portrait is the brand's recurring visual signature.
+
+**Closing Teal Band** — every page closes with a `card-teal-band` containing a `{typography.display-lg}` closing headline and a single `button-on-teal`. The teal is the page's resolving chord.
+
+**`link-on-light`** — inline links on body.
+- Text `{colors.ink}` rendered in `{typography.body-md}` with persistent underline.
+
+**`footer-light`** — site-wide footer.
+- Background `{colors.canvas}`, text `{colors.ink-mute}`, type `{typography.caption}`, padding `{spacing.huge} {spacing.xl}` (64px 24px). Holds 4 columns of link groups, social icons, and a small legal/copyright row.
+
+## Do's and Don'ts
+
+### Do
+- Pair every hero with the violet-sky atmospheric backdrop and a half-bleed portrait subject when possible.
+- Render display tiers at sub-default weights (460 / 540) — the warmth is the typographic signature.
+- Use rounded-rectangle CTAs at 8px radius everywhere except the hero (where pill-shaped is the rule).
+- Close every marketing page with a deep-teal CTA band.
+- Use warm dark grey `{colors.ink}` for body text — never pure black.
+- Apply tight 0.96 line-height on display sizes; the editorial compression is the brand.
+
+### Don't
+- Don't use pill-shaped buttons in the body of the page; the pill is hero-only.
+- Don't bump display weight above 540 unless using `body-strong` (700) for emphasized inline body.
+- Don't render body text in pure black — the warm grey `#292827` is part of the brand.
+- Don't omit the closing teal band — every marketing page closes with it.
+- Don't introduce additional accent colors beyond indigo, violet-soft, teal, and the off-warm-greys.
+
+## Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|---|---|---|
+| Wide | ≥ 1440px | Half-bleed portrait at full scale; teal band 128px tall |
+| Desktop | 1024–1440px | Default content max-width; pricing 3-up |
+| Tablet | 768–1023px | Pricing 2-up; portrait crops tighter |
+| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 64 → 36px |
+
+### Touch Targets
+- Buttons hit ≥ 44×44px on mobile via 12px vertical padding × 16px line-height. WCAG AAA.
+- Form fields stay at the 44px minimum height.
+
+### Collapsing Strategy
+- Display tiers stair-step 64 → 48 → 36 → 28 → 22px.
+- Half-bleed portrait crops to head-and-shoulders on mobile; atmospheric backdrop simplifies.
+- Pricing tiers stair-step 3-up → 2-up → 1-up.
+- Top nav collapses to hamburger below 768px.
+- Closing teal band reduces vertical padding from 128 → 64px on mobile.
+
+### Image Behavior
+Hero portrait uses `srcset` with desktop / mobile crops — desktop favors the full half-bleed composition; mobile crops to head-and-shoulders.
+
+## Iteration Guide
+
+1. Focus on ONE component at a time.
+2. Reference component names and tokens directly.
+3. Run `npx @google/design.md lint DESIGN.md` after edits.
+4. Default body to `{typography.body-md}`; reserve `{typography.body-lg}` for marketing leads.
+5. Keep the three-canvas rhythm (indigo / white / teal) — adding a fourth canvas color breaks the system.
+6. The closing teal band is non-negotiable — every marketing page resolves there.

package/design-md/superhuman/README.md

@@ -0,0 +1,5 @@
+# Superhuman Inspired Design System
+
+Design system details have been moved to: https://getdesign.md/superhuman/design-md
+
+You can also view previews, dark mode examples, and download options on getdesign.md.