@dante · Developer Tools
Fast-email editorial system: deep indigo-navy hero with violet-sky backdrop, quiet white body in warm off-grey ink, and a signature deep-teal closing CTA band, all in sub-default variable sans.
A fast-email brand that reads more like a high-end newsletter than a SaaS app. Marketing pages run a strict three-canvas rhythm: an editorial dark hero in deep indigo navy (#1b1938) with a soft violet-and-sky atmospheric backdrop and a half-bleed portrait subject, a quiet white body (#ffffff) with warm off-grey ink (#292827), and a signature deep-teal closing band (#0e3030) that resolves every page. Actions are sparse — a single CTA per band, never two. The mood is considered and slow-tempo, built on generous editorial whitespace.
The system is a binary polarity of indigo navy and white, punctuated by exactly one chromatic interlude: the deep teal (#0e3030, lifted to #155555 for nested chrome). Pale violet-soft (#c9b4fa) is the hero's pill CTA and the only off-hero accent (a focus halo). Body ink is warm dark grey (#292827) — never pure black — descending through mute (#73706d) and faint (#9a9794). Borders are warm hairlines (#e8e4dd on light, #3f3a52 on dark). No accent colors beyond indigo, violet-soft, teal, and the warm greys.
One typeface: Super Sans VF, a proprietary variable display sans (substitute Inter Variable). The signature is sub-default weights — 460 / 540 / 600 instead of 400 / 500 / 700 — which read warmer and more human. Display sizes stair-step 64 → 48 → 28 → 22px with negative tracking (-1.32px at 48px, scaling proportionally) and unusually tight 0.96 leading on display. Body runs 16–18px at 1.5. Emphasis uses body-strong at 700; nothing above 540 in display.
8px base spacing with 2/4/12 sub-tokens for fine work, scaling to 32px and 64–128px section rhythm. Content centers in a ~960–1100px column; the hero backdrop bleeds edge-to-edge. Border-radius climbs 4 → 6 → 8 → 12 → 16px, with 8px the signature rounded-rectangle button shape and pills (9999px) reserved for the hero CTA and feature-row chips. Depth is minimal on the white body (flat, at most a 1px/8px soft card shadow); the hero's only depth medium is the violet-sky atmospheric backdrop.
Buttons are tight rounded rectangles at 8px — indigo-filled on white, pale-violet pill on the hero only, hairline outline, and white-on-teal in the closing band. Pricing is sober and dense: white tiers with one indigo-inverted featured card. The feature-row pill selector switches Mail / Channels / Code / AI / Calendar. Every marketing page resolves in the deep-teal closing band with a single display-lg headline and one white button.
Derived view rendered server-side from package tokens and components — no authored copy.
#1b1938#0e0c1f#ffffff#292827#73706d#9a9794#ffffff#fafaf8#c9b4fa#0e3030#155555#e8e4dd#3f3a52#bcbac9#5a5772'Super Sans VF', 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif'Super Sans VF', 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif'Super Sans VF', 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif'Super Sans VF', 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serifui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace{
"body": 460,
"display": 540,
"cap": 600,
"strong": 700
}{
"displayXxl": "64px/0.96",
"displayXl": "48px/0.96",
"displayLg": "28px/1.14",
"displayMd": "22px/1.10",
"headingLg": "20px/1.20",
"bodyLg": "18px/1.50",
"bodyMd": "16px/1.50",
"bodyStrong": "18.72px/1.50",
"buttonMd": "16px/1.00",
"buttonCap": "14px/1.00",
"caption": "14px/1.40",
"micro": "12px/1.40"
}Primary affordances in the three-canvas system: filled indigo rounded-rectangle on white, pale-violet pill on the hero only, hairline outline, and white-on-teal for the closing band. 8px radius everywhere except the hero pill.
Single-line field on the white body surface — 6px radius, warm hairline border, ink text at body-md. Focus lifts the border to indigo primary with a soft violet halo.
White feature card on the body with a 12px radius and warm hairline border. The featured pricing tier inverts to indigo navy, completing the brand's binary light/dark polarity.
Compact marker pill — violet-soft tint for new/brand, warm hairline sand for neutral, and inverted indigo for dark contexts.
Editorial display hierarchy in Super Sans VF at sub-default weights (460/540) with negative tracking and tight 0.96 leading — the brand's typographic warmth signature.
Quiet inline links on the white body — ink text with a persistent underline. On dark indigo surfaces links shift to violet-soft.
Editorial dark hero on indigo navy with a violet-sky atmospheric backdrop. 64px display headline in white, a lead in on-dark-mute, and a single pale-violet pill CTA — never two.
Top navigation with two registers: a dark indigo bar over the hero and a white bar on body pages. Logo left, links center, single right-side CTA that matches the surface.
Site-wide footer on the white body — muted-ink link columns at caption size with a slim legal row, closing the page quietly after the teal band.
Large display figure with a caption label — hairline-topped columns that read like a sober metrics row on the white body.
Pull-quote in the closing teal band — display-lg headline in white on deep teal, the page's single chromatic interlude and resolving chord.
Feature-row pill selector on the white body — hairline-bordered chips at button-cap size used to switch between Mail, Channels, Code, AI, and Calendar.
Round avatar with a hairline ring — used for testimonial bylines and team rosters, legible on both the white body and the indigo hero.
Pill tab list inside a soft-canvas container — switches between inbox views like Split Inbox, Reminders, and Snippets on the white body.
A fast-email brand that reads more like a high-end newsletter than a SaaS app. Marketing pages run a strict three-canvas rhythm: an editorial dark hero in deep indigo navy (#1b1938) with a soft violet-and-sky atmospheric backdrop and a half-bleed portrait subject, a quiet white body (#ffffff) with warm off-grey ink (#292827), and a signature deep-teal closing band (#0e3030) that resolves every page. Actions are sparse — a single CTA per band, never two. The mood is considered and slow-tempo, built on generous editorial whitespace.
The system is a binary polarity of indigo navy and white, punctuated by exactly one chromatic interlude: the deep teal (#0e3030, lifted to #155555 for nested chrome). Pale violet-soft (#c9b4fa) is the hero's pill CTA and the only off-hero accent (a focus halo). Body ink is warm dark grey (#292827) — never pure black — descending through mute (#73706d) and faint (#9a9794). Borders are warm hairlines (#e8e4dd on light, #3f3a52 on dark). No accent colors beyond indigo, violet-soft, teal, and the warm greys.
One typeface: Super Sans VF, a proprietary variable display sans (substitute Inter Variable). The signature is sub-default weights — 460 / 540 / 600 instead of 400 / 500 / 700 — which read warmer and more human. Display sizes stair-step 64 → 48 → 28 → 22px with negative tracking (-1.32px at 48px, scaling proportionally) and unusually tight 0.96 leading on display. Body runs 16–18px at 1.5. Emphasis uses body-strong at 700; nothing above 540 in display.
8px base spacing with 2/4/12 sub-tokens for fine work, scaling to 32px and 64–128px section rhythm. Content centers in a ~960–1100px column; the hero backdrop bleeds edge-to-edge. Border-radius climbs 4 → 6 → 8 → 12 → 16px, with 8px the signature rounded-rectangle button shape and pills (9999px) reserved for the hero CTA and feature-row chips. Depth is minimal on the white body (flat, at most a 1px/8px soft card shadow); the hero's only depth medium is the violet-sky atmospheric backdrop.
Buttons are tight rounded rectangles at 8px — indigo-filled on white, pale-violet pill on the hero only, hairline outline, and white-on-teal in the closing band. Pricing is sober and dense: white tiers with one indigo-inverted featured card. The feature-row pill selector switches Mail / Channels / Code / AI / Calendar. Every marketing page resolves in the deep-teal closing band with a single display-lg headline and one white button.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css