---
version: alpha
name: Superlist
description: Midnight indigo held steady while a marker scribbles in the margin
colors:
  on-surface: "#FFFFFF"
  surface: "#181824"
  primary: "#FF3A27"
  canvas-twin: "#181825"
  raised-navy: "#26253B"
  pricing-panel: "#1D1F31"
  toggle-track: "#1D2031"
  overlay-black: "#000000"
  nav-ink: "#F7F7FF"
  bone: "#EEEEEE"
  pricing-ink: "#E7E7F6"
  link-grey: "#8E8DA0"
  meta-grey: "#8B8AA0"
  second-clause-grey: "#696F81"
  periwinkle: "#6B66DA"
  footer-category-inks: "#F739F7"
typography:
  caption:
    fontFamily: Haffer XH
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14.4px
    letterSpacing: 0em
  link-meta:
    fontFamily: Haffer XH
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18.2px
    letterSpacing: -0.07px
  meta-emphasis:
    fontFamily: Haffer XH
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: -0.07px
  quote-body:
    fontFamily: Haffer XH
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20.8px
    letterSpacing: 0em
  ui-body:
    fontFamily: Haffer XH
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.4px
  nav-label:
    fontFamily: Haffer XH
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19.2px
    letterSpacing: 0em
  feature-row:
    fontFamily: Haffer XH
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.24px
  compact-button:
    fontFamily: Haffer XH
    fontSize: 16px
    fontWeight: 400
    lineHeight: 19.2px
    letterSpacing: -0.16px
  button:
    fontFamily: Haffer XH
    fontSize: 18px
    fontWeight: 400
    lineHeight: 21.6px
    letterSpacing: -0.18px
  lede:
    fontFamily: Haffer XH
    fontSize: 18px
    fontWeight: 400
    lineHeight: 25.2px
    letterSpacing: -0.36px
  subheading:
    fontFamily: Haffer XH
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28.8px
    letterSpacing: -0.48px
  highlight-heading:
    fontFamily: Haffer XH
    fontSize: 26px
    fontWeight: 400
    lineHeight: 36.4px
    letterSpacing: -0.52px
  tier-name:
    fontFamily: Haffer XH
    fontSize: 30px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.6px
  headline:
    fontFamily: Haffer XH
    fontSize: 40px
    fontWeight: 400
    lineHeight: 44px
    letterSpacing: -0.8px
  section-head:
    fontFamily: Haffer XH
    fontSize: 48px
    fontWeight: 400
    lineHeight: 52.8px
    letterSpacing: -0.96px
  section-head-loose:
    fontFamily: Haffer XH
    fontSize: 48px
    fontWeight: 400
    lineHeight: 57.6px
    letterSpacing: -0.96px
  scroll-word:
    fontFamily: Haffer XH
    fontSize: 51px
    fontWeight: 400
    lineHeight: 61.2px
    letterSpacing: -1.02px
  pixel-line:
    fontFamily: Haffer XH
    fontSize: 51px
    fontWeight: 400
    lineHeight: 45.9px
    letterSpacing: -1.02px
  display:
    fontFamily: Haffer XH
    fontSize: 64px
    fontWeight: 400
    lineHeight: 60.8px
    letterSpacing: -1.28px
rounded:
  testimonial-card-inner-product-frame-med: 20px
  pills-buttons-cookie-button: 100px
  anchor-wrapper-home-page-mini-boxes: 8px
  inline-highlight-token: 6px
  blog-media-well: 14px
  footer-update-card: 10px
  version-pill: 999px
  billing-toggle-track: 31px
  outer-product-frame: 38px
  pricing-head-pricing-body: 30px
  footer-inner-arch: 200px
  micro-element: 2px
  page-shell-footer: 0px
spacing:
  hairline: 2px
  tight: 6px
  snug: 8px
  default: 10px
  cosy: 12px
  inset: 16px
  group: 20px
  block: 30px
  card: 40px
  gutter: 50px
  footer-band: 80px
  section: 100px
  long-section: 150px
---
# Superlist — Style Reference

> Midnight indigo held steady while a marker scribbles in the margin

**Theme:** dark

One canvas carries the captured site — home, updates log, pricing and blog all sit on the same indigo. The palette is a muted ladder of lilac-greys spent almost entirely on text, with a hot red kept for the thing you press and for the headline announcing a release. The signature move is a card whose fill is exactly the canvas hex: the testimonial tiles cast a drop shadow instead of lightening, so depth arrives as blur rather than luminance. Type is Haffer XH SemiBold from button label to display line, negatively tracked the whole way, and hierarchy comes from splitting one heading across two inks — a white clause, then a grey one at the same size. Against that discipline the brand is silly in two registers: marker strokes above section heads, and a pixel face that shows up for a sentence and leaves.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Indigo | `#181824` | `--color-canvas` | Page ground, the band `.framer-XdwWf.framer-1141cx8`, and the testimonial card's own fill — which is why cards read as shadow. |
| Canvas Twin | `#181825` | `--color-canvas-alt` | One value off the canvas on `.framer-1ilkunk` and two home-page siblings. The same plane, not a step in a ramp. |
| Raised Navy | `#26253B` | `--color-surface-raised` | The footer update card `.framer-119rj5.framer-1w4dxgh`, and the ink of the cookie button's label. |
| Pricing Panel | `#1D1F31` | `--color-panel` | The paid tiers' head and body halves; it shades the plan you are meant to buy. |
| Toggle Track | `#1D2031` | `--color-track` | `.framer-MY9Ck.framer-QFIKk.framer-hXrCJ.framer-pujuH`, the billing switch shell: a control colour rather than a surface. |
| Overlay Black | `#000000` | `--color-overlay` | The cookie banner's fill; elsewhere an inherited text colour on containers, so do not read it as a background. |
| Ink White | `#FFFFFF` | `--color-ink` | Display, headings, body, button labels, cookie button fill — the default ink, not a highlight. |
| Nav Ink | `#F7F7FF` | `--color-ink-bright` | The 16px/600 nav label preset ("Features"). Keep it to that label. |
| Bone | `#EEEEEE` | `--color-ink-bone` | Footer column heads ("Company"), the updates headline variant, the pixel letters. |
| Pricing Ink | `#E7E7F6` | `--color-ink-pricing` | Tier names, the `$`, entitlement rows: a lilac-warmed white that keeps the plan table quiet. |
| Link Grey | `#8E8DA0` | `--color-ink-link` | Footer links at 14px and the 12px "version" caption — the resting state of a navigational word. |
| Meta Grey | `#8B8AA0` | `--color-ink-meta` | Timestamps, version strings, "/person": text that is data rather than a destination. |
| Second-Clause Grey | `#696F81` | `--color-ink-second` | The greyed half of a split headline and the paragraph beneath it — a hierarchy device, not a disabled state. |
| Signal Red | `#FF3A27` | `--color-accent` | The action colour and the updates headline ink; `#FF4A36` paints the hero's second line, `#F84F39` the updates card link. No body row in the text census carries it. |
| Periwinkle | `#6B66DA` | `--color-highlight` | The ink of `strong` inside `.framer-text`, over its own wash `rgba(107, 106, 218, 0.1)`. |
| Footer Category Inks | `#F739F7` `#FBE74E` `#2590F1` `#22C55E` | `--color-cat-app` `--color-cat-usecase` `--color-cat-social` `--color-cat-updates` | Four h5 column heads, four elements each: a wayfinding joke at the foot of the page. |

## Tokens — Typography

### Haffer XH — display, headings, button labels and pricing rows, one family from 16px to 64px · `--font-display`
- **Substitute:** Söhne, Helvetica Now Display, Inter Tight
- **Weights:** 400 and 600 (Haffer XH SemiBold); 700 (Haffer XH Bold); 600 (Haffer XH SemiBold Italic); 400 (Haffer XH Regular)
- **Sizes:** 16px, 18px, 24px, 26px, 30px, 40px, 48px, 51px, 64px
- **Line height:** 60.8px at 64px (0.95) up to 24px at 16px (1.5); the 40–51px band sits at 1.1–1.2
- **Letter spacing:** −0.02em flat from 24px through 64px (−0.48px, −0.52px, −0.6px, −0.8px, −0.96px, −1.02px, −1.28px); −0.24px at 16px, −0.18px at 18px, `normal` on the 16px/600 nav label
- **Role:** Every heading and button word; the display line runs 64px/600 on 60.8px, so two lines interlock.

### CUSTOM;Blender Medium — the testimonial voice, one size, one weight · `--font-quote`
- **Substitute:** Blender Pro, Space Grotesk, IBM Plex Sans
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 20.8px (1.3)
- **Letter spacing:** normal — untracked, against Inter's −0.4px at the same size
- **Role:** Review quotes in white, the row sampled "Superlist is an amazing app — simple, beautiful,"; every heading-census row belongs to Haffer XH SemiBold or Jersey 10.

### Inter — interface chrome and long-form copy · `--font-ui`
- **Substitute:** Inter Variable, Söhne Buch, system-ui
- **Weights:** 400, 500, 700
- **Sizes:** 12px, 14px, 16px, 18px
- **Line height:** 14.4px at 12px, 18.2–21px at 14px, 24px at 16px, 21.6–25.2px at 18px
- **Letter spacing:** normal at 12px, −0.07px at 14px, −0.4px at 16px, −0.36px and −0.216px at 18px
- **Role:** Footer links and captions, metadata, release paragraphs, the 18px/500 hero lede, and the 700 weight inside the periwinkle highlight.

### Satoshi — the name under a quote · `--font-name`
- **Substitute:** General Sans, Switzer, Inter
- **Weights:** 500
- **Sizes:** 16px
- **Line height:** 19.2px (1.2)
- **Letter spacing:** normal
- **Role:** Reviewer names and their store, at quote size but a weight up, so attribution reads as label.

### Jersey 10 — the pixel sentence · `--font-pixel`
- **Substitute:** Silkscreen, Pixelify Sans, VT323
- **Weights:** 400
- **Sizes:** 51px
- **Line height:** 45.9px (0.9)
- **Letter spacing:** −1.02px (−0.02em, matching the Haffer rule)
- **Role:** One passage, coloured per letter in Bone, `#F866DB` and `#535676`. Every Jersey 10 row the census carries sits on the home page.

### Times / sans-serif — the unstyled floor · `--font-fallback`
- **Substitute:** Times New Roman, ui-serif; ui-sans-serif
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** No measured text row of its own — fallback behind the webfonts, not a design choice.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 14.4px | normal | `--text-caption` |
| Link / meta | 14px | 18.2px | -0.07px | `--text-sm` |
| Meta emphasis | 14px | 21px | -0.07px | `--text-sm-strong` |
| Quote body | 16px | 20.8px | normal | `--text-body` |
| UI body | 16px | 24px | -0.4px | `--text-body-ui` |
| Nav label | 16px | 19.2px | normal | `--text-label` |
| Feature row | 16px | 24px | -0.24px | `--text-feature` |
| Compact button | 16px | 19.2px | -0.16px | `--text-button-sm` |
| Button | 18px | 21.6px | -0.18px | `--text-button` |
| Lede | 18px | 25.2px | -0.36px | `--text-lede` |
| Subheading | 24px | 28.8px | -0.48px | `--text-subhead` |
| Highlight heading | 26px | 36.4px | -0.52px | `--text-h5` |
| Tier name | 30px | 36px | -0.6px | `--text-h4` |
| Headline | 40px | 44px | -0.8px | `--text-h3` |
| Section head | 48px | 52.8px | -0.96px | `--text-h2` |
| Section head, loose | 48px | 57.6px | -0.96px | `--text-h2-loose` |
| Scroll word | 51px | 61.2px | -1.02px | `--text-h1` |
| Pixel line | 51px | 45.9px | -1.02px | `--text-pixel` |
| Display | 64px | 60.8px | -1.28px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 2px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| Hairline | 2px | `--spacing-2` |
| Tight | 6px | `--spacing-6` |
| Snug | 8px | `--spacing-8` |
| Default | 10px | `--spacing-10` |
| Cosy | 12px | `--spacing-12` |
| Inset | 16px | `--spacing-16` |
| Group | 20px | `--spacing-20` |
| Block | 30px | `--spacing-30` |
| Card | 40px | `--spacing-40` |
| Gutter | 50px | `--spacing-50` |
| Footer band | 80px | `--spacing-80` |
| Section | 100px | `--spacing-100` |
| Long section | 150px | `--spacing-150` |

### Border Radius
| Element | Value |
|---------|-------|
| Testimonial card, inner product frame, media | 20px |
| Pills, buttons, cookie button | 100px |
| Anchor wrapper, home-page mini boxes | 8px |
| Inline highlight token | 6px |
| Blog media well | 14px |
| Footer update card | 10px |
| Version pill | 999px |
| Billing toggle track | 31px |
| Outer product frame | 38px |
| Pricing head / pricing body | 30px 30px 0px 0px / 0px 0px 30px 30px |
| Footer inner arch | 200px 200px 0px 0px |
| Micro element | 2px |
| Page shell, footer | 0px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Card | `rgba(0, 0, 0, 0.08) 0px 10px 15px 0px` | `--shadow-card` |
| Pill | `rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(255, 255, 255, 0.45) 0px 0.5px 0px 0px inset` | `--shadow-pill` |
| Ring | `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset` | `--shadow-ring` |
| Rim light | `rgba(255, 255, 255, 0.25) 0px -1px 1px 0px` | `--shadow-rim` |

### Layout
- **Page max-width:** page shell 1920px edge to edge; contained column 1400px (footer inner), product frame 1300px, blog media 600px, pricing card 379px
- **Section gap:** 100px dominates, with 80px, 92px and 150px alternates and home-page one-offs at 56px, 64px, 103px, 118px, 140px and 200px
- **Card padding:** 40px 40px (testimonial card); 40px 35px and 24px 32px (the two pricing halves); 80px 50px (footer block)
- **Element gap:** 10px by default, then 20px, 8px and 2px; 100px between major blocks; page gutter 50px, carried by four `nav` elements among seventeen blocks

## Components

### Primary CTA Pill
**Role:** The one thing you are asked to press.
`.framer-1feskb8`, large variant: padding 14px 25px, radius 100px, box 189–240×51px, six elements across all pages, wrapping "Sign up for free". The row paints `fill none`; the warm fill comes from `.framer-1vab9up`, the home-page div painting `#FF3A27` at the same 100px radius. Its pill shadow lights the top edge with `rgba(255, 255, 255, 0.45) 0px 0.5px 0px 0px inset`, so the button reads as extruded. Label: Haffer XH SemiBold 18px/400, 21.6px, −0.18px, `#FFFFFF`. The left-to-right warm gradient is *(inferred)*.

### Compact Sign-Up Button
**Role:** The same offer, sized for a bar rather than a hero.
Second variant of `.framer-1feskb8`: padding 10px 10px, radius 100px, box 85×39px, four elements across all pages, containing "Sign up" — the full pill shadow at a third the width, so it still reads as a button at 39px tall. Wrapper `.framer-quMGM.framer-mU2Ca.framer-6pkXA.framer-19a9764`: 85×40px, radius 8px, no fill, a focus shape hidden under a pill. Label: Haffer XH SemiBold 16px/400, 19.2px, −0.16px, `#FFFFFF`.

### Testimonial Card
**Role:** A review, quoted whole, in a grid that runs long.
`.framer-l9soA.framer-n7or3h.framer-v-oneysj` — fill `#181824`, padding 40px 40px, radius 20px, `border none`, shadow `rgba(0, 0, 0, 0.08) 0px 10px 15px 0px`, box 340×223–452px, 120 elements across every page, containing "Superlist is an amazing app — simple, beautiful,". The fill is the canvas hex, so the card exists as blur and as 40px of air, and its height floats with the quote. Body: CUSTOM;Blender Medium 16px/400 on 20.8px; name: Satoshi 16px/500 on 19.2px.

### Inline Highlight Token
**Role:** Names the feature a release paragraph is about, inside the sentence.
Two variants of `strong` with class `.framer-text`, both fill `rgba(107, 106, 218, 0.1)`, ink `#6B66DA`, padding 2px 4px, radius 6px, weight 700, `border none`, `shadow none`. Inline: 16px, −0.4px, box 70–307×24px, "Select multiple at once". Heading: 26px, −0.52px, box 323–449×32px, "Repeat on exactly the days you want". The wash is ten percent of its own ink, so the chip tints rather than blocks.

### Version Pill
**Role:** Stamps a release entry with its build number.
`.framer-ztautl` — fill `rgba(210, 208, 253, 0.08)`, padding 6px 12px, radius 999px, `border none`, `shadow none`, box 61–64×33px, four elements on the updates page, containing "1.57.0". At 33px tall its 999px radius is indistinguishable from the 100px pills, so read it as the same shape language. The number is Inter 14px/500 on 21px, −0.07px, in Meta Grey `#8B8AA0`.

### Pricing Tier Card
**Role:** One plan, split into a price head and an entitlement body.
Head, `.framer-123m7uo`: padding 40px 35px, radius 30px 30px 0px 0px, `border none`, `shadow none` — two elements filled `#1D1F31` at box 379×151–159px containing "Basic $ 5 /person /month That's $59 yearly", plus one with `fill none` at 379×159px containing "Free $ 0 /person /month That's free forever!". Body, `.framer-vi5jwn`: padding 24px 32px, radius 0px 0px 30px 30px — two with `fill none` at 379×270–356px, one filled `#1D1F31` at 379×355px. The halves interlock into one 30px capsule, and the fill alternates so a paid tier shades without taking a border.

### Billing Toggle
**Role:** Switches the price table between monthly and yearly.
`.framer-MY9Ck.framer-QFIKk.framer-hXrCJ.framer-pujuH` — fill `#1D2031`, padding 2px 2px, radius 31px, `border none`, `shadow none`, two elements on the pricing page. The 2px padding is the trick: the track is a 2px frame around the segments, so the active pill sits flush and the control reads as one object. Labels use `.framer-text.framer-styles-preset-luqx8h`, measured at Haffer XH SemiBold 16px/400, 19.2px, −0.16px; the resting segment inks `#413F73`, the selected one `#8F89FA`. Segment fill and stroke are `not measured`.

### Footer Update Card
**Role:** Pulls the newest release into the bottom of every page.
`.framer-119rj5.framer-1w4dxgh` — an anchor, fill `#26253B`, padding 0px 0px, radius 10px, `border none`, `shadow none`, box 325×188px, four elements across all pages, containing "version 1.57.0 Activity Log, precise recurring t". It is the lightest surface in the footer, and its 10px corner is what makes a link-sized block read as a card. The control census records two ink variants of the same anchor: `#0000EE` on the home, pricing and blog pages, `#F84F39` on the updates page.

### Cookie Banner
**Role:** Consent, parked in the corner, sized to be dismissed.
`.--framer-cookie-banner-container.--framer-cookie-banner-type-simple` — fill `#000000`, padding 0px 0px, radius 20px, `border none`, shadow `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset`, box 300×95px, four elements across all pages, containing "We use cookies to personalize content, run ads, ". It goes true black on an indigo page, and its shadow is a 1px inset ring — this system's substitute for a border. Button `.__framer-cookie-component-button` is an input: fill `#FFFFFF`, ink `#26253B`, 16px/600 on 16px, padding 10px 10px, radius 100px, box 60×36px, no text of its own.

### Product Frame
**Role:** Holds the app screenshot as a floating device rather than a flat image.
`.framer-ZwY7a.framer-1bajjau.framer-v-1bajjau` — fill `none`, padding 16px 16px, radius 38px, `border none`, shadow `rgba(255, 255, 255, 0.25) 0px -1px 1px 0px`, box 1300×765px, one element on the home page, no text. The rim light points up: one white pixel on the top edge lifts the frame with no fill and no stroke. Inside, `.framer-1ihlo41` measures 1268×733px at radius 20px with no fill — 16px of bezel and a 38px-to-20px corner step.

### Load More Button
**Role:** Extends a feed without navigating away from it.
`.framer-b4so0o` — fill `none`, padding 14px 25px, radius 100px, `border none`, the full pill shadow, box 130×46px, two elements on the updates and blog pages, containing "Load More". It takes the primary CTA's exact padding and shadow and drops the fill. Wrapper `.framer-tci6G.framer-6pkXA.framer-79g292.framer-v-79g292` is the same 130×46px box at radius 100px, no fill. Label size and ink are `not measured` on either row.

### Footer Block
**Role:** The shared bottom of every page — categories, compare links, the release card.
`.framer-sqFAZ.framer-ZfYE7.framer-L5i6a.framer-ZhEwG` is a `footer` filled `#181824` at box 1920×804px, four elements across all pages, containing "Company Updates Compare © 2026 Superlist •". Inside, `.framer-1gxop5h` runs padding 80px 50px, radius 200px 200px 0px 0px, no fill, box 1400×804px — a 200px arch cut into a block that paints nothing. Column heads are Haffer XH SemiBold 16px/400 on 24px, −0.24px, inked Bone for "Company" and a category colour for the rest; links are Inter 14px/400 on 18.2px in Link Grey.

## Do's and Don'ts

### Do
- Paint cards the canvas hex and let shadow separate them: `.framer-l9soA.framer-n7or3h.framer-v-oneysj` fills `#181824` on a band of the same value and lifts with `rgba(0, 0, 0, 0.08) 0px 10px 15px 0px`.
- Track every Haffer heading at −0.02em, from `.framer-styles-preset-1o6lwwz` at 24px/−0.48px to `.framer-styles-preset-m7vam` at 64px/−1.28px.
- Split a headline across two inks at one size: `.framer-styles-preset-n85squ` sets 48px/600 in `#FFFFFF`, the span continuing it sets 48px/600 in `#696F81`.
- Give every button the pill stack including `rgba(255, 255, 255, 0.45) 0px 0.5px 0px 0px inset` — that top-edge highlight separates a button from a chip.
- Default the gap to 10px and the section rhythm to 100px.
- Keep product screenshots inside a 16px bezel at radius 38px over an inner 20px corner.

### Don't
- Don't add borders. Every row in the component census reads `border none`; where a hairline is wanted the system paints a shadow ring, as `.--framer-cookie-banner-container.--framer-cookie-banner-type-simple` does.
- Don't set a heading heavier than 600 — the heaviest measured heading row is `.framer-styles-preset-m7vam` at 64px/600, and the 700 in the family list belongs to Haffer XH Bold, which no measured text row carries.
- Don't tint a shadow: the shadows block carries four values, all black or white.
- Don't spread the pixel face. Every Jersey 10 row sits on the home page at 51px, and the per-letter colouring is the point.
- Don't promote the footer's category inks. `#F739F7`, `#FBE74E`, `#2590F1` and `#22C55E` are painted on four h5 column heads each — "App", "Use Cases", "Social", "Updates" — and on nothing else the census names.
- Don't reproduce `#0000EE` as a brand blue; it is inherited anchor colour on `.framer-119rj5.framer-1w4dxgh` and its wrappers.
- Don't lighten a card to show elevation — `.framer-l9soA.framer-n7or3h.framer-v-oneysj` separates with shadow alone.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#181824` | The page, the band `.framer-XdwWf.framer-1141cx8`, and the footer |
| 0 | Canvas Twin | `#181825` | Three home-page divs one value off the canvas |
| 1 | Card | `#181824` | Testimonial card: canvas fill, separated by shadow |
| 2 | Panel | `#1D1F31` | The paid pricing tiers' head and body halves |
| 2 | Track | `#1D2031` | The billing toggle shell |
| 3 | Raised | `#26253B` | The footer update card |
| — | Glass | `rgba(255, 255, 255, 0.13)`, `rgba(255, 255, 255, 0.05)`, `rgba(211, 209, 249, 0.04)` | Translucent chips and wells inside product imagery and feed rows |
| — | Overlay | `#000000` | Cookie banner |
| — | Inverse | `#FFFFFF` | Cookie button fill, ink `#26253B` |

## Elevation

Depth is shadow and translucency rather than a luminance ramp, and the proof is that the highest-count card fills with the canvas hex. The card drop, `rgba(0, 0, 0, 0.08) 0px 10px 15px 0px`, is soft, far and colourless across its 120 elements. The pill stack adds a 1px contact shadow, a 4px ambient one, and a half-pixel white inset — the highlight that makes a filled pill look pressed out of the page. The cookie banner's `0px 0px 0px 1px inset` ring is a border wearing a shadow's clothes. The product frame's `rgba(255, 255, 255, 0.25) 0px -1px 1px 0px` throws light upward, reading as a screen edge. Where surfaces step up — `#1D1F31`, `#1D2031`, `#26253B` — the step groups content instead of floating it.

## Imagery

Three kinds, and they do not mix. Product screenshots: full app UI, held in the 38px frame or bled against saturated slabs of blue, violet and red-orange whose colours the inventory does not name *(inferred)* — a slab is a flat field the size of the screenshot, not a gradient. Marker marks: a red check-and-squiggle, a violet loop, a pink dot trailing gradient bars, each directly above a section head like an annotation on a machine-made page. The same hand writes the page titles — "UPDATES", "PRICING", "BLOG" in fat violet brush script, overlaid with a white sketch (a burst, a dollar sign, a paper plane) that collides with the letterforms on purpose. Blog art: photographic and illustrated scenes at 600×300 in the `.framer-1mud18y` well at radius 14px. Customer wordmarks and Product Hunt laurels are flat monochrome lockups, dimmed to sit under the copy.

## Layout

Full-bleed dark shell, contained content. The page band runs the viewport's full 1920px and fills the canvas; columns sit inside a 50px gutter. The contained measure is 1400px at the footer and 1300px at the product frame, narrowing where reading matters: updates and blog run a single 600px-class column, pricing lays three 379px cards in a row. Vertical rhythm is 100px, with 80px, 92px and 150px variants and home-page one-offs from 56px to 200px, so the home page breathes more irregularly than the content pages. The updates page runs a fixed split, headline left and release notes right, repeated per version. No navigation bar is painted in any captured frame: the census carries four `nav` elements at the 50px gutter and a 16px/600 "Features" label preset, so the bar is in markup but not in these captures.

## Typography Voice

Two modes, one family doing most of the work. The display voice is Haffer XH SemiBold, tracked −0.02em from 24px to 64px across the heading census and leaded below 1.0 at the top — 64px type on 60.8px lines, so a two-line hero knits into a single shape. The reading voice is Inter and CUSTOM;Blender Medium at 16–18px, leaded 1.3 to 1.5, tracking loosened almost to normal. What binds them is the two-ink headline: one 48px/600 sentence in white, its continuation at the same 48px/600 in `#696F81` — hierarchy by ink alone, which lets a paragraph-shaped headline stay a headline. Then the system breaks character: Jersey 10 at 51px on 45.9px, letters coloured Bone, `#F866DB` and `#535676`, where a pull-quote would go. It works because everything around it is so tightly tracked and so evenly grey that one crude thing reads as wit.

## Agent Prompt Guide

Build on `#181824` and stay there. Use Haffer XH SemiBold at −0.02em above 24px, Inter for interface text, and keep the accent red for the button and for a release headline. When something needs to lift, give it the card shadow and the canvas fill the way `.framer-l9soA.framer-n7or3h.framer-v-oneysj` does, rather than a lighter grey or a stroke.

## Quick Color Reference
- background: `#181824`
- text: `#FFFFFF`
- surface: `#26253B`
- border: none painted — `.--framer-cookie-banner-container.--framer-cookie-banner-type-simple` rings with `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset` instead
- accent: `#FF3A27`
- primary action: `#FF3A27`

## Example Component Prompts

1. **Primary CTA Pill**: padding 14px 25px, radius 100px, fill `#FF3A27`, no border, shadow `rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(255, 255, 255, 0.45) 0px 0.5px 0px 0px inset`. Label Haffer XH SemiBold 18px/400, line height 21.6px, tracking −0.18px, `#FFFFFF`. Box 189–240×51px.
2. **Testimonial Card**: on a `#181824` page — fill `#181824`, padding 40px, radius 20px, no border, shadow `rgba(0, 0, 0, 0.08) 0px 10px 15px 0px`, width 340px, height flowing 223–452px. Quote 16px/400, line height 20.8px, tracking normal, `#FFFFFF`; attribution 16px/500, line height 19.2px, `#FFFFFF`. Grid gap 20px.
3. **Pricing Tier Card**: two parts, 379px wide. Head padding 40px 35px, radius 30px 30px 0px 0px, fill `#1D1F31`, tier name 30px/600 on 36px at −0.6px in `#E7E7F6`, price 48px/600 on 52.8px at −0.96px in `#E7E7F6`. Body padding 24px 32px, radius 0px 0px 30px 30px, fill none, entitlement rows 16px/400 on 24px at −0.24px in `#E7E7F6`, row gap 12px. No borders.
4. **Inline Highlight Token**: inside a 16px/400 paragraph on 24px leading, wrap a feature name in a chip — fill `rgba(107, 106, 218, 0.1)`, ink `#6B66DA`, weight 700, padding 2px 4px, radius 6px, tracking −0.4px, no border, no shadow. Heading variant 26px/700 at −0.52px, same fill, padding and radius.
5. **Split Headline Block**: one size, two clauses — Haffer XH SemiBold 48px/600, line height 52.8px, tracking −0.96px; first clause `#FFFFFF`, second `#696F81`. Place a marker mark 30px above, and set the supporting paragraph at 18px/400, line height 21.6px, tracking −0.216px, in `#696F81`.

## Similar Brands

- **Linear** — near-black product canvas, negative-tracked display sans, cards that separate by shadow rather than fill.
- **The Browser Company** — a dark interface with hand-drawn marks and naive lettering: the same serious-tool, unserious-margin split.
- **Raycast** — dark indigo ground, pill controls with an inset top highlight, product screenshots as the hero image.
- **Height** — a violet-leaning dark palette, one saturated accent reserved for action, long single-column release notes.
- **Framer** — big rounded frames, saturated colour slabs behind UI captures, a willingness to let a page title be a drawing.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #181824;
  --color-canvas-alt: #181825;
  --color-panel: #1D1F31;
  --color-track: #1D2031;
  --color-surface-raised: #26253B;
  --color-overlay: #000000;
  --color-ink: #FFFFFF;
  --color-ink-bright: #F7F7FF;
  --color-ink-bone: #EEEEEE;
  --color-ink-pricing: #E7E7F6;
  --color-ink-link: #8E8DA0;
  --color-ink-meta: #8B8AA0;
  --color-ink-second: #696F81;
  --color-accent: #FF3A27;
  --color-accent-hero: #FF4A36;
  --color-accent-updates: #F84F39;
  --color-highlight: #6B66DA;
  --color-highlight-wash: rgba(107, 106, 218, 0.1);
  --color-toggle-idle: #413F73;
  --color-toggle-active: #8F89FA;
  --color-pixel-pink: #F866DB;
  --color-pixel-slate: #535676;
  --color-violet-fill: #7577E0;
  --color-cat-app: #F739F7;
  --color-cat-usecase: #FBE74E;
  --color-cat-social: #2590F1;
  --color-cat-updates: #22C55E;
  --color-link-default: #0000EE;
  --color-chip-lilac: rgba(210, 208, 253, 0.08);
  --color-chip-lilac-faint: rgba(211, 209, 249, 0.04);
  --color-glass: rgba(255, 255, 255, 0.13);
  --color-glass-faint: rgba(255, 255, 255, 0.05);
  --color-ink-dim: rgba(255, 255, 255, 0.6);
  /* Typography — Families */
  --font-display: 'Haffer XH SemiBold', ui-sans-serif, system-ui, sans-serif;
  --font-quote: 'Blender Medium', 'Space Grotesk', ui-sans-serif, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-name: 'Satoshi', 'General Sans', ui-sans-serif, sans-serif;
  --font-pixel: 'Jersey 10', 'Silkscreen', ui-monospace, monospace;
  --font-fallback: 'Times', ui-serif, serif;
  /* Typography — Scale */
  --text-caption: 12px;   --leading-caption: 14.4px;
  --text-sm: 14px;        --leading-sm: 18.2px;
  --text-sm-strong: 14px; --leading-sm-strong: 21px;
  --text-body: 16px;      --leading-body: 20.8px;
  --text-body-ui: 16px;   --leading-body-ui: 24px;
  --text-label: 16px;     --leading-label: 19.2px;
  --text-feature: 16px;   --leading-feature: 24px;
  --text-button-sm: 16px; --leading-button-sm: 19.2px;
  --text-button: 18px;    --leading-button: 21.6px;
  --text-lede: 18px;      --leading-lede: 25.2px;
  --text-subhead: 24px;   --leading-subhead: 28.8px;
  --text-h5: 26px;        --leading-h5: 36.4px;
  --text-h4: 30px;        --leading-h4: 36px;
  --text-h3: 40px;        --leading-h3: 44px;
  --text-h2: 48px;        --leading-h2: 52.8px;
  --text-h2-loose: 48px;  --leading-h2-loose: 57.6px;
  --text-h1: 51px;        --leading-h1: 61.2px;
  --text-pixel: 51px;     --leading-pixel: 45.9px;
  --text-display: 64px;   --leading-display: 60.8px;
  --tracking-display: -0.02em;
  --tracking-feature: -0.24px;
  --tracking-button: -0.18px;
  --tracking-ui: -0.07px;
  /* Spacing */
  --spacing-2: 2px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-150: 150px;
  /* Border Radius */
  --radius-micro: 2px;
  --radius-chip: 6px;
  --radius-focus: 8px;
  --radius-link-card: 10px;
  --radius-media: 14px;
  --radius-card: 20px;
  --radius-panel: 30px;
  --radius-track: 31px;
  --radius-frame: 38px;
  --radius-pill: 100px;
  --radius-pill-max: 999px;
  --radius-arch: 200px;
  /* Shadows */
  --shadow-card: rgba(0, 0, 0, 0.08) 0px 10px 15px 0px;
  --shadow-pill: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(255, 255, 255, 0.45) 0px 0.5px 0px 0px inset;
  --shadow-ring: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
  --shadow-rim: rgba(255, 255, 255, 0.25) 0px -1px 1px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #181824;
  --color-canvas-alt: #181825;
  --color-panel: #1D1F31;
  --color-track: #1D2031;
  --color-surface-raised: #26253B;
  --color-overlay: #000000;
  --color-ink: #FFFFFF;
  --color-ink-bright: #F7F7FF;
  --color-ink-bone: #EEEEEE;
  --color-ink-pricing: #E7E7F6;
  --color-ink-link: #8E8DA0;
  --color-ink-meta: #8B8AA0;
  --color-ink-second: #696F81;
  --color-accent: #FF3A27;
  --color-accent-hero: #FF4A36;
  --color-accent-updates: #F84F39;
  --color-highlight: #6B66DA;
  --color-highlight-wash: rgba(107, 106, 218, 0.1);
  --color-toggle-idle: #413F73;
  --color-toggle-active: #8F89FA;
  --color-pixel-pink: #F866DB;
  --color-pixel-slate: #535676;
  --color-violet-fill: #7577E0;
  --color-cat-app: #F739F7;
  --color-cat-usecase: #FBE74E;
  --color-cat-social: #2590F1;
  --color-cat-updates: #22C55E;
  --color-link-default: #0000EE;
  --color-chip-lilac: rgba(210, 208, 253, 0.08);
  --color-chip-lilac-faint: rgba(211, 209, 249, 0.04);
  --color-glass: rgba(255, 255, 255, 0.13);
  --color-glass-faint: rgba(255, 255, 255, 0.05);
  --color-ink-dim: rgba(255, 255, 255, 0.6);
  --font-display: 'Haffer XH SemiBold', ui-sans-serif, system-ui, sans-serif;
  --font-quote: 'Blender Medium', 'Space Grotesk', ui-sans-serif, sans-serif;
  --font-ui: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-name: 'Satoshi', 'General Sans', ui-sans-serif, sans-serif;
  --font-pixel: 'Jersey 10', 'Silkscreen', ui-monospace, monospace;
  --font-fallback: 'Times', ui-serif, serif;
  --text-caption: 12px;
  --text-caption--line-height: 14.4px;
  --text-sm: 14px;
  --text-sm--line-height: 18.2px;
  --text-sm-strong: 14px;
  --text-sm-strong--line-height: 21px;
  --text-body: 16px;
  --text-body--line-height: 20.8px;
  --text-body-ui: 16px;
  --text-body-ui--line-height: 24px;
  --text-label: 16px;
  --text-label--line-height: 19.2px;
  --text-feature: 16px;
  --text-feature--line-height: 24px;
  --text-button-sm: 16px;
  --text-button-sm--line-height: 19.2px;
  --text-button: 18px;
  --text-button--line-height: 21.6px;
  --text-lede: 18px;
  --text-lede--line-height: 25.2px;
  --text-subhead: 24px;
  --text-subhead--line-height: 28.8px;
  --text-h5: 26px;
  --text-h5--line-height: 36.4px;
  --text-h4: 30px;
  --text-h4--line-height: 36px;
  --text-h3: 40px;
  --text-h3--line-height: 44px;
  --text-h2: 48px;
  --text-h2--line-height: 52.8px;
  --text-h2-loose: 48px;
  --text-h2-loose--line-height: 57.6px;
  --text-h1: 51px;
  --text-h1--line-height: 61.2px;
  --text-pixel: 51px;
  --text-pixel--line-height: 45.9px;
  --text-display: 64px;
  --text-display--line-height: 60.8px;
  --tracking-display: -0.02em;
  --tracking-feature: -0.24px;
  --tracking-button: -0.18px;
  --tracking-ui: -0.07px;
  --spacing-2: 2px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-40: 40px;
  --spacing-50: 50px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-150: 150px;
  --radius-micro: 2px;
  --radius-chip: 6px;
  --radius-focus: 8px;
  --radius-link-card: 10px;
  --radius-media: 14px;
  --radius-card: 20px;
  --radius-panel: 30px;
  --radius-track: 31px;
  --radius-frame: 38px;
  --radius-pill: 100px;
  --radius-pill-max: 999px;
  --radius-arch: 200px;
  --shadow-card: rgba(0, 0, 0, 0.08) 0px 10px 15px 0px;
  --shadow-pill: rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(255, 255, 255, 0.45) 0px 0.5px 0px 0px inset;
  --shadow-ring: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset;
  --shadow-rim: rgba(255, 255, 255, 0.25) 0px -1px 1px 0px;
}
```