---
version: alpha
name: Huly
description: "A black room lit from within, and one warm pill glowing at the door."
colors:
  on-surface: "#FFFFFF"
  surface: "#090A0C"
  primary: "#FF8964"
  band-black: "#111111"
  card-black: "#0C0C0D"
  glass: "rgba(13, 15, 17, 0.4)"
  paper: "#F6F6F6"
  graphite: "#303236"
  obsidian: "#0B0D10"
  bone: "#D1D1D1"
  ember: "#5A250A"
  link-blue: "#5683DA"
  mist: "#B0B2B7"
  slate: "#61656B"
  hairline: "rgba(255, 255, 255, 0.1)"
  headline-gradient: "#FFFFFF"
  bloom-gradient: "#FFFFF5"
typography:
  micro-label:
    fontFamily: Display
    fontSize: 11px
    fontWeight: 400
    lineHeight: 16.5px
    letterSpacing: -0.11px
  pill-label:
    fontFamily: Display
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: -0.18px
  chip:
    fontFamily: Display
    fontSize: 13px
    fontWeight: 400
    lineHeight: 13px
    letterSpacing: -0.52px
  nav-link:
    fontFamily: Display
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0em
  meta:
    fontFamily: Display
    fontSize: 14px
    fontWeight: 400
    lineHeight: 14px
    letterSpacing: -0.28px
  caption:
    fontFamily: Display
    fontSize: 15px
    fontWeight: 400
    lineHeight: 20.625px
    letterSpacing: -0.30px
  body:
    fontFamily: Display
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
    letterSpacing: -0.32px
  list-item:
    fontFamily: Display
    fontSize: 18px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: -0.36px
  plan-name:
    fontFamily: Display
    fontSize: 20px
    fontWeight: 400
    lineHeight: 27.5px
    letterSpacing: -0.80px
  lede:
    fontFamily: Display
    fontSize: 22px
    fontWeight: 400
    lineHeight: 30.25px
    letterSpacing: -0.88px
  card-title:
    fontFamily: Display
    fontSize: 32px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: -0.64px
  post-title:
    fontFamily: Display
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: -1.28px
  price:
    fontFamily: Display
    fontSize: 64px
    fontWeight: 400
    lineHeight: 88px
    letterSpacing: -2.56px
  display:
    fontFamily: Display
    fontSize: 80px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -4px
  hero:
    fontFamily: Display
    fontSize: 84px
    fontWeight: 400
    lineHeight: 75.6px
    letterSpacing: -3.36px
rounded:
  pills-avatars-dots-glow-rings: 9999px
  blog-thumbnail: 8px
  inline-product-mock: 10px
  product-mock-top-corners-only: 10px
  feature-spotlight-card: 12px
  plan-card: 24px
  metabrain-tile-and-its-image: 30px
spacing:
  hair: 2px
  tight: 4px
  snug: 6px
  base: 8px
  row: 14px
  stack: 16px
  wide: 18px
  legal-row: 26px
  card: 28px
  button-inset: 64px
  band: 152px
  hero: 184px
---
# Huly — Style Reference
> A black room lit from within, and one warm pill glowing at the door.

**Theme:** dark

Two grounds share this system: a near-black void, and a near-white paper band the home page drops into mid-scroll and climbs back out of — pricing, blog and download stay on the black from nav to footer. The palette is almost entirely grey; colour arrives as light rather than ink — an apricot bloom behind the one filled call to action, a coral tagging editorial categories, a blue held back for "Read more". Display type is enormous and mid-weight: the geometric title face runs on a line shorter than its own type size, tracking pulled to the edge of collision. Everything the hand touches is a full-round pill, hairline-bordered and small-capped; everything that holds content is a soft rectangle whose corner grows with the card. Sections breathe in the hundreds of pixels, and the product does its own illustrating.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Void | `#090A0C` | `--color-canvas` | The page ground — `body`, the hero, the closing bands. Depth comes from halo and border, not from lightening it. |
| Band Black | `#111111` | `--color-band` | The GitHub band's fill (`.sync-with-github.relative.z-20.overflow-hidden`) — set off by content, not colour. |
| Card Black | `#0C0C0D` | `--color-surface-card` | Feature spotlight card fill. Canvas-plus-one: read by its halo, not by luminance. |
| Glass | `rgba(13, 15, 17, 0.4)` | `--color-glass` | The paid plan cards' pane. The free card paints no fill; the absence is the hierarchy. |
| Paper | `#F6F6F6` | `--color-paper` | The inverted band carrying the product tour (`.overflow-hidden.bg-[#f6f6f6]`) — an interruption, not a second default. |
| White | `#FFFFFF` | `--color-ink` | Primary ink on dark, and two fills only: the emphasised `"Start Free"` capsule, and the p4 `h1` `.mt-9.bg-white.bg-clip-text.font-title` that clips white through `"All you need in one place"`. Rarity as a fill is the signal. |
| Graphite | `#303236` | `--color-ink-paper` | Body ink on Paper — the lede under `"Unmatched productivity"`. Its row paints 387 text observations against one fill. |
| Obsidian | `#0B0D10` | `--color-ink-inverse` | Ink on light: the four 80px Paper-band headlines (`h2 ×4` — `"Unmatched productivity"`, `"Work together. Like in the office."`, `"Huly MetaBrain"`, `"Knowledge at Your Fingertips"`), and the label inside every light fill — `"Download for macOS (Intel)"`, the emphasised `"Start Free"`, the `"Category: All Posts"` chip. |
| Bone | `#D1D1D1` | `--color-cta` | The filled CTA pill. Neutral grey, not white: it sits inside an orange bloom and would go acid at #FFFFFF. |
| Ember | `#5A250A` | `--color-cta-label` | Label ink inside the Bone pill, carried by `"See in Action"` — a burnt brown taken from the bloom behind it. |
| Coral | `#FF8964` | `--color-coral` | Editorial on p3 — the eyebrow above each post title and the active `"Category: All Posts"` chip — and the p1 map marker: a 2px ring on `.pointer-events-none.z-10.max-w-none.rounded-full` with a bar and dot on `.flex.flex-col.items-center.transition-transform`. |
| Link Blue | `#5683DA` | `--color-link` | The `"Read more"` affordance on p3, and the p1 map marker — two fills and a border beside its 13 text observations. Keep it off buttons. |
| Mist | `#B0B2B7` | `--color-text-muted` | Blog excerpt ink, and the flat gradient behind the emphasised `"live"` and `"advanced solutions"`. |
| Slate | `#61656B` | `--color-text-footer` | The footer's quietest tier — `"Copyright © 2026 Huly Labs"` and the `"Huly Labs"` link inside it, on `.text-grey-40.lg:order-3.sm:mt-2.sm:w-full`. The legal links sit one step brighter at #C9CBCF. |
| Hairline | `rgba(255, 255, 255, 0.1)` | `--color-hairline` | The structural line: the 332×1px rule across a plan card, and the ghost pill's border. |
| Headline Gradient | `#FFFFFF → #D5D8F6 → #FDF7FE` | `--gradient-headline` | A cold violet drift off white; its carriers are the h1 and h2 holding `"Everything App for your teams"` and `"Join the Movement"`. |
| Bloom Gradient | `#FFFFF5 → #FFAA81 → #FFDA9F → rgba(255, 170, 129, 0.5)` | `--gradient-bloom` | The warm orb behind the primary pill (`.absolute.top-1/2.h-[121px].w-[121px]`) — the one chromatic event at scale. |

## Tokens — Typography

### Display (`__esbuild_b38aaf`) — the geometric title face; every section headline and the hero, at 400/500/600, with leading set below the type size · `--font-display`
- **Substitute:** Nohemi, Poppins, Futura PT
- **Weights:** 400, 500, 600
- **Sizes:** 28px, 32px, 52px, 80px, 84px
- **Line height:** 28px–80px — a ratio range of 0.80 to 1.00, the widest measured being 1.00 on `"Knowledge at Your Fingertips"` at 80px over an 80px line
- **Letter spacing:** −0.56px at 28px and −0.64px at 32px (≈ −0.02em), widening to −4px at 80px/600 (−0.05em), but 80px is not one value: the 500-weight headings run −2.4px on `"Join the Movement"` and −1.6px on `"Sync with GitHub. Both ways."`; −3.36px at 84px

### Text (`__Inter_f367f3`) — the working face; nav, body, prices, blog titles and every control label, at 300 through 700 · `--font-text`
- **Substitute:** Inter, Inter Variable, system-ui
- **Weights:** 300, 400, 500, 600, 700
- **Sizes:** 11px, 12px, 13px, 14px, 15px, 16px, 18px, 20px, 22px, 32px, 36px, 64px
- **Line height:** 14px on 14px labels (1.00) up to 88px on the 64px price (1.38); body sits at 1.25–1.50
- **Letter spacing:** −0.28px at 14px, −0.30px at 15px, −0.32px at 16px, −0.36px at 18px, −0.80px at 20px, −0.88px at 22px, −1.28px at 32px, −2.56px at 64px — −0.02em from 14px to 18px, −0.04em at 13px and from 20px up, loosening to −0.01em at 11px and −0.015em at 12px; `normal` on the 14px nav row and on `"Read more"`

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Micro label (`"Sign In"`) | 11px | 16.5px | −0.11px | `--text-11` |
| Pill label (`"See in Action"`) | 12px | 18px | −0.18px | `--text-12` |
| Chip (`"Category: Industry Insights"`) | 13px | 13px | −0.52px | `--text-13` |
| Nav link (`"Pricing"`) | 14px | 21px | normal | `--text-14` |
| Meta (`"OCT 29, 2024"`) | 14px | 14px | −0.28px | `--text-14-tight` |
| Caption (`"Integrate your task tracker…"`) | 15px | 20.625px | −0.30px | `--text-15` |
| Body (`"Keyboard shortcuts…"`) | 16px | 22px | −0.32px | `--text-16` |
| List item (`"Unlimited users"`) | 18px | 18px | −0.36px | `--text-18` |
| Plan name (`"Common"`) | 20px | 27.5px | −0.80px | `--text-20` |
| Lede (`"Huly offers a wide range…"`) | 22px | 30.25px | −0.88px | `--text-22` |
| Card title (`"Two-way synchronization"`) | 32px | 32px | −0.64px | `--text-32` |
| Post title (`"Beyond the Cloud…"`) | 32px | 40px | −1.28px | `--text-32-post` |
| Price (`"$0"`) | 64px | 88px | −2.56px | `--text-64` |
| Display (`"Unmatched productivity"`) | 80px | 64px | −4px | `--text-80` |
| Hero (`"Everything App for your teams"`) | 84px | 75.6px | −3.36px | `--text-84` |

## Tokens — Spacing & Shapes

**Base unit:** 2px — 8px carries the most elements.   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Hair | 2px | `--spacing-hair` |
| Tight | 4px | `--spacing-tight` |
| Snug | 6px | `--spacing-snug` |
| Base | 8px | `--spacing-base` |
| Row | 14px | `--spacing-row` |
| Stack | 16px | `--spacing-stack` |
| Wide | 18px | `--spacing-wide` |
| Legal row | 26px | `--spacing-legal` |
| Card | 28px | `--spacing-card` |
| Button inset | 64px | `--spacing-button` |
| Band | 152px | `--spacing-band` |
| Hero | 184px | `--spacing-hero` |

### Border Radius

| Element | Value |
|---------|-------|
| Pills, avatars, dots, glow rings | 9999px |
| Blog thumbnail (`.aspect-video.w-full.rounded-lg`) | 8px |
| Inline product mock (`.mt-9.rounded-[10px].lg:mt-8.md:mt-7`) | 10px |
| Product mock, top corners only | 10px 10px 0px 0px |
| Feature spotlight card | 12px |
| Plan card (`.item.relative.mr-14.flex`) | 24px |
| MetaBrain tile and its image | 30px |
| Decorative blur field | 50% |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Focus halo | `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) 0px 0px 0px 6px` | `--shadow-halo` |
| Control lift | `rgba(0, 0, 0, 0.35) 0px 4px 16px 0px` | `--shadow-control` |
| Plan card | `rgba(0, 0, 0, 0.56) 4px 6px 25px 0px` | `--shadow-card` |
| Avatar bubble | `rgba(0, 0, 0, 0.5) 0px 6px 25px 0px` | `--shadow-bubble` |
| App icon | `rgba(0, 0, 0, 0.47) -4px 9px 18.6px 0px` | `--shadow-icon` |
| Status dot | `rgba(0, 0, 0, 0.15) 0px 4px 6px 0px` | `--shadow-dot` |
| Chip tray | `rgba(0, 0, 0, 0.15) 0px 4px 10px 0px` | `--shadow-tray` |

### Layout
- **Page max-width:** `body` measures 1920px wide, `.overflow-hidden.bg-[#f6f6f6]` 1920×2819px. A content container max-width is `not measured`; the deepest side inset recorded is 512px, on `.no-scrollbars.-mx-[calc((100vw-100%)/2)].flex.snap-x`; the next is 320px.
- **Section gap:** 131px to 247px of vertical padding.
- **Card padding:** 28px on all four sides.
- **Element gap:** 8px is the default; 4px and 16px inside blog rows, 18px in the footer link row, 14px between social icons.

## Components

### Header Nav Bar
**Role:** the persistent top rail — wordmark, four destinations, sign-in pair right.
`.absolute.left-0.right-0.top-0` paints no fill: the bar floats on whatever band lies beneath. Destination links (`"Pricing" .transition-colors.duration-200.inline-flex.whitespace-pre`) are Text 14px/400 on a 21px line at `normal` tracking, #FFFFFF — `normal` recurs across seven text rows, among them `"Star Us"`, `"Read more"` and both MetaBrain tile captions. Their spacing is `not measured`; `"Resources"` adds a 6px gap to its chevron. `"Star Us"` is 14px/400 on a 14px line. `"Sign In"` is Text 11px/700 at −0.11px, #FFFFFF; its fill, border and box are `not measured`.

### Hero Block
**Role:** the opening screen — one claim, one sentence, one button.
`.hero.relative.h-[1438px].overflow-hidden` is a 1920×1438px section filled #090A0C with 184px of vertical padding, no radius, border or shadow. The headline `"Everything App for your teams"` (`.relative.z-30.max-w-[616px].bg-gradient-to-br`) is Display 84px/600 on a 75.6px line at −3.36px, with `#FFFFFF → #D5D8F6 → #FDF7FE` clipped through it. The subhead `"Huly, an open-source platform, serves as an all-"` (`.relative.z-30.mt-5.max-w-md`) paints #E5E5E7; its size and weight are `not measured`. All of it hangs off a left edge inside a 616px measure.

### Primary CTA Pill
**Role:** the one filled call to action.
Fill #D1D1D1, label #5A250A, Text 12px/700 on an 18px line at −0.18px, radius 9999px, a 1px `rgba(255, 255, 255, 0.6)` border, no shadow, measured 174×40px with zero padding on the `"See in Action"` carrier. Siblings stretch the same skin: one takes 0px 64px of padding to 240×40px; `"Download for macOS (Intel)"` takes 0px 32px to 276×40px with the label swapped to #0B0D10. `.border-button-light.relative.h-full.w-full` washes `rgba(188, 155, 143, 0.1) → rgba(233, 132, 99, 0.1)` over it at 177–279×43px, and `.border-button-light-blur.absolute.left-1/2.top-1/2` throws a 183–285×49px halo past its edge.

### Ghost CTA Pill
**Role:** the secondary action beside the filled one.
Fill #0B0C0F, label #FFFFFF at Text 12px/700 on an 18px line at −0.12px, padding 0px 20px, radius 9999px, a 1px `rgba(255, 255, 255, 0.1)` border, no shadow, at 174×40px — the same height as the primary, so the pair reads as one object split in two. `"Join our Slack"` is legible by hairline and label alone, which keeps it from competing with the bloom beside it.

### Plan Card
**Role:** one pricing tier.
`.item.relative.mr-14.flex` is 390×529px with 28px padding on every side, a 24px radius and a 1px `rgba(255, 255, 255, 0.05)` border. It paints two ways: the paid variant fills `rgba(13, 15, 17, 0.4)` and drops `rgba(0, 0, 0, 0.56) 4px 6px 25px 0px`, the heaviest shadow here; the free variant, holding `"Common $ 0 /monthly For individuals and teams ge"`, paints no fill and no shadow. Inside, `"Common"` is Text 20px/600 #FFFFFF; `"$0"` is 64px/600 on an 88px line at −2.56px; `"/monthly"` drops to 20px/500 and #C9CBCF.

### Plan CTA Button
**Role:** the per-tier action.
Two variants of one 332×56px capsule, both radius 9999px with a 1px `rgba(255, 255, 255, 0.2)` border, zero padding, no shadow, label Text 18px/600 on a 31.5px line at −0.36px. The default is unfilled with #FFFFFF ink; one card's `"Start Free"` inverts to fill #FFFFFF with #0B0D10 ink — the whole recommendation mechanism, with no badge, ribbon or accent colour. At 56px it stands 16px above the 40px pills running the marketing pages, which is how a plan's action outranks a page's.

### Plan Feature List Item
**Role:** one line of what a tier includes.
`"Unlimited users" .flex.items-center.gap-x-2.text-18` is Text 18px/500 on an 18px line at −0.36px, inked `rgba(255, 255, 255, 0.9)`, with an 8px gap to its tick. Line height equal to type size stacks the checklist as hard bars rather than a paragraph; the air comes from `.mt-6.flex.flex-col.gap-y-4`, 16px between rows. At 90% white it reads as detail beneath the card's #FFFFFF name and price, with no change of hue.

### Feature Spotlight Card
**Role:** one product capability, shown as a screenshot.
`.relative.grid.h-[420px].grid-cols-1` is 428–768px wide across the grid, filled #0C0C0D at a 12px radius, no border. Its elevation is not a drop shadow: a flat 6px `rgba(255, 255, 255, 0.4)` halo spreads around it, so the card glows outward rather than casting down. The caption runs in two weights — `"Keyboard shortcuts."` at Text 16px/500 #FFFFFF, the rest at 16px/300 in `rgba(255, 255, 255, 0.65)`, both on a 22px line at −0.32px.

### MetaBrain Outline Tile
**Role:** a capability tile in the knowledge-base mosaic.
`.relative.rounded-[30px].outline.outline-white/60` is 264–520px wide by 232–250px tall at a 30px radius, with no fill, border or shadow — defined entirely by an outline over what sits behind it. The largest radius in the system makes the mosaic read as soft tiles rather than cards. Captions follow the spotlight pattern one step down: `"Create tasks."` at Text 15px/500 #FFFFFF, the rest at 15px/300 in `rgba(255, 255, 255, 0.65)`, both on an 18.75px line at `normal`. Artwork rides on `.pointer-events-none.rounded-[30px].md:rounded-3xl.sm:hidden` at 264×250px.

### Blog Post Row
**Role:** one article in the index.
The eyebrow `"Product Updates"` is Text 14px/500 at −0.28px in #FF8964, though its class reads `.transition-colors.duration-200.text-blue.font-medium`; the date `"OCT 29, 2024"` is 14px/400 at −0.28px in #797D86, split from it by `.mx-1.h-[3px].w-[3px].shrink-0`, a 3×3px #4A4B50 dot at radius 9999px. Titles are Text 32px/500 #FFFFFF, the lead post stepping to 36px/500 on a 45px line at −1.44px; excerpts are 18px/300 on a 27px line at −0.36px in #B0B2B7. `.aspect-video.w-full.rounded-lg` is 448×252px at an 8px radius, `.rounded-full.sm:w-5` a 26×26px avatar, `"Read more"` 14px/500 at `normal` tracking in #5683DA.

### Category Chip
**Role:** the filter row above the post index.
`.transition-colors.duration-200.whitespace-nowrap.rounded-full` paints two ways at 6px 10px padding, radius 9999px, no border, no shadow. Inactive chips carry no fill and #FFFFFF ink at Text 13px/500, measured 117×25px on `"Category: Industry Insights"`. The active chip fills #FF8964 with #0B0D10 ink at 13px/600, measured 70×25px on `"Category: All Posts"`. At −0.52px — four percent of its size — the tracking lets a 13px word sit in a 25px capsule without looking loose.

### Footer Bar
**Role:** the closing rail on every page.
Three tiers of grey. `"Copyright © 2026 Huly Labs"` is Text 14px/400 on a 14px line at −0.28px in #61656B, carried on `.text-grey-40.lg:order-3.sm:mt-2.sm:w-full`. The policy links (`"Terms of Service" .transition-colors.duration-200.leading-none.inline-flex`) run the same type one step brighter at #C9CBCF, set 26px apart on `.z-10.ml-[70px].flex.items-center`. Social icons on `.ml-auto.flex.gap-x-3.5.md:mr-[52px]` sit 14px apart. The signature `"Made with passion and Huly" .ml-auto.flex.h-12.items-center` clips a warm four-stop gradient, `#F58041 → #AC795C → #887064 → #716A69`, through its own type. Its height is `not measured`.

## Do's and Don'ts

### Do
- Ground every page on `#090A0C` and let the product screenshots supply the colour.
- Make controls capsules: every control row measured paints radius 9999px.
- Set Display leading at or below the type size — 1.00 at 28px, 32px, 52px and on `"Knowledge at Your Fingertips"` at 80px, dropping to 0.80 on `"Unmatched productivity"`. Tracking is set per headline, not by a ramp: 80px runs −4px, −2.4px and −1.6px.
- Run Text tracking on two tracks: −0.02em from 14px to 18px, −0.04em at 13px and at every size from 20px up — `"/monthly"` at 20/−0.80, the `"$0"` price at 64/−2.56.
- Separate the #0C0C0D spotlight card from the #F6F6F6 Paper band with the flat 6px `rgba(255, 255, 255, 0.4)` ring, not a lighter fill.
- Lead a caption with a medium-weight phrase and continue in 300 instead of adding a heading.
- Put the bloom behind the button: `.border-button-light-blur.absolute.left-1/2.top-1/2` stands 9px taller and 9px wider than the pill beneath it.

### Don't
- Coral fills one control only, the active `"Category: All Posts"` chip. Don't put it on a CTA pill; that fill is #D1D1D1 with a #5A250A label.
- Keep Link Blue #5683DA off buttons. Text it carries is `"Read more"` (`a ×9`, p3); its other role is the p1 map marker — a 2px ring on `.pointer-events-none.z-10.max-w-none.rounded-full`, with a bar and a 10px dot on `.flex.flex-col.items-center.transition-transform`.
- The Paper band paints no chrome of its own — `.overflow-hidden.bg-[#f6f6f6]` is radius 0px, border none, shadow none. The cards it carries bring their own: `.relative.grid.h-[420px].grid-cols-1` at a 12px radius under the 6px `rgba(255, 255, 255, 0.4)` ring.
- Don't soften the headline leading to 1.2 for readability. At 80px on a 64px line the collapse is the identity.
- Don't build a mid-grey surface ramp. The dark fills painted span three points of luminance; depth is halo, shadow and border.
- Fill one control per pair, not one per page: the closing band runs a #D1D1D1 174×40 `"See in Action"` beside a #0B0C0F 174×40 `"Join our Slack"`, and on the pricing page exactly one `"Start Free"` inverts to fill `#FFFFFF`.
- Don't uppercase body copy. Caps belong to pill labels and to the `"OCT 29, 2024"` meta row.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#090A0C` | `body`, the hero, and the closing `.relative.overflow-hidden.bg-grey-1.pb-[294px]` bands. |
| 1 | Band | `#111111` | The `.sync-with-github.relative.z-20.overflow-hidden` section — marked by content, not luminance. |
| 2 | Card | `#0C0C0D` | Feature spotlight cards; raised only by the halo. |
| 2 | Glass | `rgba(13, 15, 17, 0.4)` | Paid plan cards — translucent, so canvas texture shows through. |
| — | Paper | `#F6F6F6` | The inverted home-page band. Not a level in the dark ladder; a different room. |

## Elevation

Depth is carried three ways, and luminance is not one of them. The halo spreads flat white around the feature spotlight cards with no implied light source. Real drop shadows are kept for objects meant to feel physical: the plan card's shadow, offset right as well as down; the mock's 44px controls; avatar bubbles; the app icon at `rgba(0, 0, 0, 0.47) -4px 9px 18.6px 0px`, whose negative x-offset throws light from the right. Third, border opacity ranks the controls: `1px rgba(255, 255, 255, 0.05)` on a plan card, `0.1` on the ghost pill, `0.6` on the primary.

## Imagery

The product illustrates itself. Each marketing section is anchored by a screenshot of the app — kanban board, inbox, planner, GitHub repository view — bled past the section edge and lit: an orange rim along the GitHub screenshot's top edge, a white-blue beam behind the hero's tracker, a teal filament around the free plan card. Gradient orbs, `.absolute.top-1/2.h-[121px].w-[121px]` and `.absolute.top-1/2.h-[103px].w-[204px]`, carry `#FFFFF5 → #FFAA81 → #FFDA9F` and `#FFFFF7 → #FFFACD → #F4D2BF` behind the primary button. Editorial art on the blog index is synthetic and high-chroma — robots, neon server rooms, glass spheres over cities — with one candid photograph breaking the run. Icons are small dimensional glyphs in blue-violet, not line icons.

## Layout

Bands are full-bleed, so every ground change runs edge to edge. Vertical rhythm is enormous and varied rather than modular — 131px on the GitHub band, 152px on the two closing sections, 160px on `.stay-productive.relative.z-10.pt-40` and the download hero, 184px on the home hero, 240px on `.work-together.py-60.px-safe.lg:py-32`, 247px on `.source-of-truth.relative.overflow-hidden.pb-[180px]`. Headline measures are capped tight: 616px on the hero, 510px on `"Join the Movement"`, 550px on `"Work together. Like in the office."`. Pricing departs: four 390×529px cards — three glass, one unfilled — in a horizontal snap row on `.no-scrollbars.-mx-[calc((100vw-100%)/2)].flex.snap-x`, pulling 512px of side padding and 320px of vertical. The blog index is one column of full-width rows, text left and a 448px thumbnail right, with no card around either.

## Typography Voice

Two faces, two jobs, no overlap. The Display face appears only at scale, where its compression does the shouting: at 80px on a 64px line and −4px of tracking, `"Unmatched productivity"` arrives as one continuous shape rather than a string of words. At smaller sizes the ratio relaxes to exactly 1.00, keeping card titles off their captions while holding the same airless feel. The Text face does the opposite: it stays near 1.5 line height in prose, and its tracking runs two tracks — −0.02em up to 18px, −0.04em from 20px up — so the prices set tighter than the labels. The signature move is the pairing inside a single caption — hierarchy with no second type size and no second colour. The exception is the nav row, set `normal` at 14px.

## Agent Prompt Guide

## Quick Color Reference
- background: #090A0C
- text: #FFFFFF
- surface: #0C0C0D
- border: rgba(255, 255, 255, 0.1)
- accent: #FF8964
- primary action: #D1D1D1

## Example Component Prompts

1. **Primary CTA Pill**: A 174×40px anchor, fill #D1D1D1, radius 9999px, 1px solid rgba(255, 255, 255, 0.6), no shadow. Label in Inter 12px/700, 18px line, −0.18px, uppercase, #5A250A. Behind it a blurred radial orb, stops #FFFFF5 → #FFAA81 → #FFDA9F → rgba(255, 170, 129, 0.5), 9px taller and wider than the pill. On #090A0C.
2. **Plan Card**: A 390×529px card, fill rgba(13, 15, 17, 0.4), radius 24px, 1px solid rgba(255, 255, 255, 0.05), box-shadow rgba(0, 0, 0, 0.56) 4px 6px 25px 0px, padding 28px. Plan name Inter 20px/600, 27.5px line, −0.80px, #FFFFFF. Price Inter 64px/600, 88px line, −2.56px, #FFFFFF, with a 20px/500 #C9CBCF suffix. A 332×1px rgba(255, 255, 255, 0.1) rule, then feature rows Inter 18px/500, 18px line, −0.36px, rgba(255, 255, 255, 0.9), 8px icon gap, 16px between rows. Close with a 332×56px unfilled capsule, radius 9999px, 1px rgba(255, 255, 255, 0.2), label Inter 18px/600 #FFFFFF.
3. **Feature Spotlight Card**: A 420px-tall card, fill #0C0C0D, radius 12px, no border, box-shadow `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) 0px 0px 0px 6px`. A product screenshot bleeds off the top edge. Caption below: lead phrase Inter 16px/500 #FFFFFF, continuation Inter 16px/300 rgba(255, 255, 255, 0.65), both 22px line, −0.32px. On #F6F6F6.
4. **Blog Post Row**: Two columns. Left: eyebrow Inter 14px/500, −0.28px, #FF8964; a 3×3px #4A4B50 dot at radius 9999px; date Inter 14px/400, −0.28px, #797D86; title Inter 32px/500, 40px line, −1.28px, #FFFFFF; excerpt Inter 18px/300, 27px line, −0.36px, #B0B2B7; "Read more" Inter 14px/500, normal tracking, #5683DA. Right: a 448×252px image at an 8px radius, a 26×26px round avatar, author Inter 14px/500 #FFFFFF. On #090A0C.
5. **Inverted Section Band**: A full-bleed 1920px-wide block, fill #F6F6F6, radius 0, no border, no shadow. Headline in the display face at 80px/600, 64px line, −4px, #0B0D10. Lede Inter 22px/400, 30.25px line, −0.88px, #303236. Sub-heads in the display face at 28px/400, 28px line, −0.56px, #303236. 160px of vertical padding; no cards, rules or shadows.

## Similar Brands

- **Linear** — the same near-black canvas, sub-pixel negative tracking on huge headlines, product screenshots as the only illustration.
- **Raycast** — capsule controls on a dark ground with warm gradient blooms escaping the button edge, and no chromatic brand fill.
- **Vercel** — geometric display type over a monochrome ladder, elevation carried by hairline borders rather than shadow.
- **The Browser Company** — the swing between a black marketing ground and a near-white product tour band, with warm-to-cool gradient artwork.
- **Rive** — oversized display type with leading below the type size, and glowing, bled-off-frame product canvases.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #090A0C;
  --color-band: #111111;
  --color-surface-card: #0C0C0D;
  --color-glass: rgba(13, 15, 17, 0.4);
  --color-paper: #F6F6F6;
  --color-ink: #FFFFFF;
  --color-ink-paper: #303236;
  --color-ink-inverse: #0B0D10;
  --color-cta: #D1D1D1;
  --color-cta-label: #5A250A;
  --color-cta-ghost: #0B0C0F;
  --color-coral: #FF8964;
  --color-link: #5683DA;
  --color-text-muted: #B0B2B7;
  --color-text-quiet: #C9CBCF;
  --color-text-footer: #61656B;
  --color-text-caption: #95979E;
  --color-text-meta: #797D86;
  --color-text-hero-sub: #E5E5E7;
  --color-dot: #4A4B50;
  --color-blue: #3D7EFF;
  --color-red: #FF4D4D;
  --color-mock-control: #68686A;
  --color-mock-avatar: #EFEFF0;
  --color-tray: #FAFAFA;
  --color-black: #000000;
  --color-ink-90: rgba(255, 255, 255, 0.9);
  --color-ink-65: rgba(255, 255, 255, 0.65);
  --color-border-strong: rgba(255, 255, 255, 0.6);
  --color-border-soft: rgba(255, 255, 255, 0.2);
  --color-hairline: rgba(255, 255, 255, 0.1);
  --color-hairline-faint: rgba(255, 255, 255, 0.05);
  --color-scrim: rgba(11, 13, 16, 0.2);
  --gradient-headline: linear-gradient(to bottom right, #FFFFFF, #D5D8F6, #FDF7FE);
  --gradient-bloom: linear-gradient(#FFFFF5, #FFAA81, #FFDA9F, rgba(255, 170, 129, 0.5));
  --gradient-bloom-wide: linear-gradient(#FFFFF7, #FFFACD, #F4D2BF);
  --gradient-button-wash: linear-gradient(rgba(188, 155, 143, 0.1), rgba(233, 132, 99, 0.1));
  --gradient-signature: linear-gradient(#F58041, #AC795C, #887064, #716A69);
  --gradient-ai: linear-gradient(90deg, #E4FFFF 0.61%, #628EFF 24.99%, #725EFF 78.85%, #FFDEFF 99.78%);
  --gradient-field: linear-gradient(#F8E6DD, #CBD3EB);
  --gradient-flat: linear-gradient(to bottom right, #B0B2B7, #B0B2B7);

  /* Typography — Families */
  --font-display: 'Nohemi', 'Poppins', 'Futura PT', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Inter', 'Inter Variable', ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-11: 11px;   --leading-11: 16.5px;   --tracking-11: -0.11px;
  --text-12: 12px;   --leading-12: 18px;     --tracking-12: -0.18px;
  --text-13: 13px;   --leading-13: 13px;     --tracking-13: -0.52px;
  --text-14: 14px;   --leading-14: 21px;     --tracking-14: normal;
  --text-14-tight: 14px; --leading-14-tight: 14px; --tracking-14-tight: -0.28px;
  --text-15: 15px;   --leading-15: 20.625px; --tracking-15: -0.3px;
  --text-16: 16px;   --leading-16: 22px;     --tracking-16: -0.32px;
  --text-18: 18px;   --leading-18: 18px;     --tracking-18: -0.36px;
  --text-20: 20px;   --leading-20: 27.5px;   --tracking-20: -0.8px;
  --text-22: 22px;   --leading-22: 30.25px;  --tracking-22: -0.88px;
  --text-28: 28px;   --leading-28: 28px;     --tracking-28: -0.56px;
  --text-32: 32px;   --leading-32: 32px;     --tracking-32: -0.64px;
  --text-32-post: 32px; --leading-32-post: 40px; --tracking-32-post: -1.28px;
  --text-36: 36px;   --leading-36: 45px;     --tracking-36: -1.44px;
  --text-52: 52px;   --leading-52: 52px;     --tracking-52: -2.08px;
  --text-64: 64px;   --leading-64: 88px;     --tracking-64: -2.56px;
  --text-80: 80px;   --leading-80: 64px;     --tracking-80: -4px;
  --text-84: 84px;   --leading-84: 75.6px;   --tracking-84: -3.36px;

  /* Spacing */
  --spacing-hair: 2px;
  --spacing-tight: 4px;
  --spacing-snug: 6px;
  --spacing-base: 8px;
  --spacing-row: 14px;
  --spacing-stack: 16px;
  --spacing-wide: 18px;
  --spacing-legal: 26px;
  --spacing-card: 28px;
  --spacing-button: 64px;
  --spacing-band: 152px;
  --spacing-hero: 184px;

  /* Border Radius */
  --radius-thumb: 8px;
  --radius-mock: 10px;
  --radius-mock-top: 10px 10px 0px 0px;
  --radius-card: 12px;
  --radius-plan: 24px;
  --radius-tile: 30px;
  --radius-blur: 50%;
  --radius-pill: 9999px;

  /* Shadows */
  --shadow-halo: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) 0px 0px 0px 6px;
  --shadow-control: rgba(0, 0, 0, 0.35) 0px 4px 16px 0px;
  --shadow-card: rgba(0, 0, 0, 0.56) 4px 6px 25px 0px;
  --shadow-bubble: rgba(0, 0, 0, 0.5) 0px 6px 25px 0px;
  --shadow-icon: rgba(0, 0, 0, 0.47) -4px 9px 18.6px 0px;
  --shadow-dot: rgba(0, 0, 0, 0.15) 0px 4px 6px 0px;
  --shadow-tray: rgba(0, 0, 0, 0.15) 0px 4px 10px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #090A0C;
  --color-band: #111111;
  --color-surface-card: #0C0C0D;
  --color-glass: rgba(13, 15, 17, 0.4);
  --color-paper: #F6F6F6;
  --color-ink: #FFFFFF;
  --color-ink-paper: #303236;
  --color-ink-inverse: #0B0D10;
  --color-cta: #D1D1D1;
  --color-cta-label: #5A250A;
  --color-cta-ghost: #0B0C0F;
  --color-coral: #FF8964;
  --color-link: #5683DA;
  --color-text-muted: #B0B2B7;
  --color-text-quiet: #C9CBCF;
  --color-text-footer: #61656B;
  --color-text-caption: #95979E;
  --color-text-meta: #797D86;
  --color-text-hero-sub: #E5E5E7;
  --color-dot: #4A4B50;
  --color-blue: #3D7EFF;
  --color-red: #FF4D4D;
  --color-mock-control: #68686A;
  --color-mock-avatar: #EFEFF0;
  --color-tray: #FAFAFA;
  --color-black: #000000;
  --color-ink-90: rgba(255, 255, 255, 0.9);
  --color-ink-65: rgba(255, 255, 255, 0.65);
  --color-border-strong: rgba(255, 255, 255, 0.6);
  --color-border-soft: rgba(255, 255, 255, 0.2);
  --color-hairline: rgba(255, 255, 255, 0.1);
  --color-hairline-faint: rgba(255, 255, 255, 0.05);
  --color-scrim: rgba(11, 13, 16, 0.2);

  --font-display: 'Nohemi', 'Poppins', 'Futura PT', ui-sans-serif, system-ui, sans-serif;
  --font-text: 'Inter', 'Inter Variable', ui-sans-serif, system-ui, sans-serif;

  --text-11: 11px;   --text-11--line-height: 16.5px;   --text-11--letter-spacing: -0.11px;
  --text-12: 12px;   --text-12--line-height: 18px;     --text-12--letter-spacing: -0.18px;
  --text-13: 13px;   --text-13--line-height: 13px;     --text-13--letter-spacing: -0.52px;
  --text-14: 14px;   --text-14--line-height: 21px;     --text-14--letter-spacing: normal;
  --text-15: 15px;   --text-15--line-height: 20.625px; --text-15--letter-spacing: -0.3px;
  --text-16: 16px;   --text-16--line-height: 22px;     --text-16--letter-spacing: -0.32px;
  --text-18: 18px;   --text-18--line-height: 18px;     --text-18--letter-spacing: -0.36px;
  --text-20: 20px;   --text-20--line-height: 27.5px;   --text-20--letter-spacing: -0.8px;
  --text-22: 22px;   --text-22--line-height: 30.25px;  --text-22--letter-spacing: -0.88px;
  --text-28: 28px;   --text-28--line-height: 28px;     --text-28--letter-spacing: -0.56px;
  --text-32: 32px;   --text-32--line-height: 32px;     --text-32--letter-spacing: -0.64px;
  --text-36: 36px;   --text-36--line-height: 45px;     --text-36--letter-spacing: -1.44px;
  --text-52: 52px;   --text-52--line-height: 52px;     --text-52--letter-spacing: -2.08px;
  --text-64: 64px;   --text-64--line-height: 88px;     --text-64--letter-spacing: -2.56px;
  --text-80: 80px;   --text-80--line-height: 64px;     --text-80--letter-spacing: -4px;
  --text-84: 84px;   --text-84--line-height: 75.6px;   --text-84--letter-spacing: -3.36px;

  --spacing-hair: 2px;
  --spacing-tight: 4px;
  --spacing-snug: 6px;
  --spacing-base: 8px;
  --spacing-row: 14px;
  --spacing-stack: 16px;
  --spacing-wide: 18px;
  --spacing-legal: 26px;
  --spacing-card: 28px;
  --spacing-button: 64px;
  --spacing-band: 152px;
  --spacing-hero: 184px;

  --radius-thumb: 8px;
  --radius-mock: 10px;
  --radius-card: 12px;
  --radius-plan: 24px;
  --radius-tile: 30px;
  --radius-pill: 9999px;

  --shadow-halo: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.4) 0px 0px 0px 6px;
  --shadow-control: rgba(0, 0, 0, 0.35) 0px 4px 16px 0px;
  --shadow-card: rgba(0, 0, 0, 0.56) 4px 6px 25px 0px;
  --shadow-bubble: rgba(0, 0, 0, 0.5) 0px 6px 25px 0px;
  --shadow-icon: rgba(0, 0, 0, 0.47) -4px 9px 18.6px 0px;
  --shadow-dot: rgba(0, 0, 0, 0.15) 0px 4px 6px 0px;
  --shadow-tray: rgba(0, 0, 0, 0.15) 0px 4px 10px 0px;
}
```