--- version: alpha name: Mastodon website: "https://joinmastodon.org" description: >- A federated social-network marketing system anchored on indigo "#6364ff" as the singular CTA voltage, near-black aubergine "#150118" as the dark hero band, and a magenta-tinted lilac "#bd8dc8" border that signals the federation lattice — every word on the page is Manrope, with hero display rendered at 68px weight 800 and body at 22px weight 450, the only on-page radii are "6px" pills and "4px" inner chips against a "#fcefff" off-white card wash, and the brand identity is the rainbow gradient blob that grows out of the dark hero band rather than a logo color. seo: title: "Mastodon Design System for React — Indigo #6364ff, Manrope, 19 components" metaDescription: "Mastodon's design system as a DESIGN.md file. Indigo #6364ff, Manrope, 18 colors, 19 components. For React, Next.js, and AI tools." highlights: - "Singular indigo CTA — '#6364ff' is the only saturated chrome voltage and lives on every 'Join mastodon.social' pill at 16px × 24px padding" - "Aubergine hero band — '#150118' near-black anchors the top viewport, with a rainbow gradient blob bleeding into the canvas rather than a flat brand color" - "Manrope at one face — every text role from the 68px hero to the 16px body runs Manrope, with weight 800 carrying display and weight 450 carrying body" - "Lilac federation hairline — '#bd8dc8' magenta-tinted lavender is the secondary border layer, 81 occurrences across feature cards and structural dividers" - "Two-radius vocabulary — '6px' on pills and '4px' on chips dominate at 27 and 25 occurrences, with '50%' reserved for the avatar grid in the testimonial rail" tags: - "Social & Community" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Mastodon's home page opens with a near-black aubergine hero band — "#150118", a deep purple-tinged ink so dark it reads almost black — out of which a rainbow gradient blob bleeds rightward into the canvas, framing the headline "Social networking that's not for sale." in Manrope 68px weight 800. The only saturated chrome voltage is one indigo "#6364ff" pill labeled "Join mastodon.social," paired with a ghost "Find another server" affordance. Below the hero, the page drops to white and lays out four feature bands, each anchored by a lilac "#bd8dc8" hairline border and a 28px weight 800 section heading. The chrome stays restrained — black ink, indigo CTA, lilac borders — while the illustrated callouts inside each card carry the personality: chart sliders, post-moderation stacks, kanban-style content cards. The hero shouts; everything else whispers. This file packages the marketing system as a single Google Labs DESIGN.md spec. Inside: 18 color tokens covering the singular indigo voltage, the aubergine hero band, two ink stops at "#000000" and "#555555", the lilac federation hairline, a "#fcefff" off-white card wash, and the rainbow-blob accent set; 11 Manrope typography roles from the 68px hero display down to the 16px body, all sharing one font stack with weight variation from 400-800; a three-step radius scale where "6px" pills and "4px" chips dominate against a "50%" avatar circle; and 19 component recipes covering the primary join CTA, the ghost server-finder button, the dark top nav rail, the feature-card surfaces, the testimonial-grid avatar tile, and the email-signup row. Feed this file to Claude, Cursor, or GitHub Copilot and the agent reproduces Mastodon's posture — one indigo pill, the aubergine hero block, the lilac federation hairlines, Manrope at weight 800 for display and 450 for body — rather than a generic open-source-project landing page. Or reference the tokens directly when building federated, community, or messaging marketing surfaces: every hex is quoted, every component recipe ready to paste into Tailwind config or CSS custom properties. The system is worth studying because it argues a non-commercial network can still carry a marketing surface with one accent and one font, where the rainbow gradient does the personality work the chrome refuses to. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://joinmastodon.org" title: "Mastodon — official site" description: "The decentralized, open-source social network built on the ActivityPub protocol — pick your server, own your timeline, no algorithmic feed." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is Mastodon's primary brand color?" answer: "Mastodon's CTA voltage is indigo '#6364ff' — a saturated blue-violet used as the chrome accent and reserved for the 'Join mastodon.social' primary pill. The home page renders it across 50 page occurrences, split 18 text / 8 background / 24 border. The deeper hover-tier indigo '#563acc' shows up 24 times as the pressed-state variant. The aubergine '#150118' near-black anchors the hero band as a background fill, and the rainbow gradient that bleeds out of the aubergine block carries the brand personality — the indigo pill is the only saturated chrome color, never doubled by a second accent." - id: "typography" title: "What typography does Mastodon use, and what fallbacks ship?" answer: "Mastodon uses Manrope across every text role, declared with a full system-ui fallback stack ('-apple-system', 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif). Sizes step in 16 / 20 / 22 / 28 / 42 / 50 / 68px increments with weights 400 / 450 / 500 / 600 / 700 / 800. The hero h1 is 68px weight 800 with 75px line-height; section h2 is 50px weight 800 with 55px line-height; the unusual move is the body register at weight 450 — a half-step between 400 and 500 — which Manrope's variable axis supports natively. There is no display-tier serif and no monospace face on the captured chrome." - id: "shape-language" title: "What does Mastodon's shape vocabulary look like?" answer: "The radius scale is dominated by two tokens: '6px' pills at 27 page occurrences (every CTA, every nav link, every chip inside the feature illustrations) and '4px' inner chips at 25 occurrences (input borders, badge surfaces, secondary affordances). The '50%' avatar circle hits 24 occurrences in the testimonial grid at the bottom of the page. There is no rounded card tier — feature panels render with square corners and a '#bd8dc8' hairline border instead of a soft radius, which gives the page a documentation-page rhythm rather than a saas-card rhythm." - id: "open-source-ethos" title: "Why does the page feel like an open-source project landing page rather than a SaaS marketing site?" answer: "The home page is structured as a feature-by-feature argument for a non-commercial network: 'Stay in control of your own timeline,' 'Build your audience in confidence,' 'Moderating the way it should be,' 'Unparalleled creativity.' Each feature gets a left-text / right-illustration band with a lilac '#bd8dc8' hairline boundary, no shadows, no gradient cards, no badge ribbons. The chrome refuses the SaaS marketing toolkit — there's no pricing band, no testimonial wall of corporate logos, no 'Trusted by' rail. Where most social-network marketing leans on engagement-graph illustration and bright product screenshots, Mastodon shows annotated UI fragments inside flat hairline-bordered cards, treating each feature as a documentation page rather than a sales page." - id: "do-not-use" title: "What should I not do with these tokens?" answer: "Don't use '#bd8dc8' lilac as a button background or chrome fill — it's a border-only token (81 page occurrences, almost entirely as borderColor). Promoting it to a fill creates a second saturated voltage on the page and collapses the singular-indigo discipline. Don't introduce a third radius between '6px' and '4px' — the gap signals 'outer chrome' versus 'inner content,' and inserting '8px' or '10px' between them erases the boundary. Don't sub Manrope for a geometric grotesk like Geist or Inter on the 68px hero — the brand reads as a non-commercial social network precisely because Manrope's humanist axis softens the weight-800 display, where a stricter grotesk would push it toward fintech voice." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own Mastodon-style React app?" answer: "Yes — feed it to Claude, Cursor, or Copilot and the agent will produce React components that match Mastodon's voice: one indigo '#6364ff' CTA pill, the aubergine '#150118' hero band, lilac '#bd8dc8' feature-card hairlines, Manrope at weight 800 / 450 for display / body, and the '6px'-on-pill / '4px'-on-chip radius vocabulary. Or reference tokens directly: every hex, every typography level, every radius step is a quoted value ready to paste into Tailwind config or CSS custom properties. The 19 component recipes cover the marketing home — hero band, primary CTA, ghost button, feature card, avatar tile, email-signup row — not the in-product timeline shell or the moderation-settings surface." colors: primary: "#6364ff" primary-hover: "#563acc" ink: "#000000" ink-muted: "#555555" ink-soft: "#9b9b9b" on-primary: "#ffffff" canvas: "#ffffff" surface-card: "#fcefff" surface-stone: "#d4d4d4" hero-band: "#150118" hero-band-edge: "#4e155a" hairline-lilac: "#bd8dc8" hairline: "#d4d4d4" link: "#6364ff" focus-ring: "#6364ff" divider: "#bd8dc8" scrim: "rgba(21,1,24,0.6)" shadow-color: "rgba(0,0,0,0.08)" typography: display-xl: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 68px fontWeight: 800 lineHeight: 75px letterSpacing: normal display-lg: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 50px fontWeight: 800 lineHeight: 55px letterSpacing: normal display-md: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 42px fontWeight: 800 lineHeight: 55px letterSpacing: normal heading-md: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 28px fontWeight: 800 lineHeight: 38px letterSpacing: 0.28px heading-sm: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 22px fontWeight: 800 lineHeight: 30px letterSpacing: 0.22px body-lg: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 22px fontWeight: 450 lineHeight: 30px letterSpacing: 0.22px body-md: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 20px fontWeight: 450 lineHeight: 30px letterSpacing: 0.2px body-sm: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 450 lineHeight: 24px letterSpacing: 0.16px button-md: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 30px letterSpacing: 0.2px label-md: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 24px letterSpacing: normal body-strong: fontFamily: "Manrope, -apple-system, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 24px letterSpacing: 0.16px rounded: none: "0px" sm: "4px" md: "6px" full: "9999px" circle: "50%" spacing: xxs: "2px" xs: "4px" sm: "6px" base: "8px" md: "12px" lg: "20px" xl: "32px" 2xl: "64px" 3xl: "72px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "16px 24px" height: "64px" border: "0" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "16px 24px" height: "64px" border: "0" button-secondary: backgroundColor: "transparent" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "16px 24px" height: "64px" border: "1px solid {colors.on-primary}" button-ghost-dark: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "16px 24px" height: "64px" border: "1px solid {colors.ink}" nav-link: backgroundColor: "transparent" textColor: "{colors.on-primary}" typography: "{typography.label-md}" rounded: "{rounded.md}" padding: "12px 20px" height: "48px" border: "0" top-nav: backgroundColor: "{colors.hero-band}" textColor: "{colors.on-primary}" typography: "{typography.label-md}" padding: "12px 16px" border: "0" hero-band: backgroundColor: "{colors.hero-band}" textColor: "{colors.on-primary}" typography: "{typography.body-lg}" padding: "56px 64px 72px" border: "0" hero-heading: backgroundColor: "transparent" textColor: "{colors.on-primary}" typography: "{typography.display-xl}" padding: "0" section-heading: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: "0" feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "32px" border: "1px solid {colors.hairline-lilac}" feature-card-soft: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "32px" border: "1px solid {colors.hairline-lilac}" body-paragraph: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.body-lg}" padding: "0" inline-link: backgroundColor: "transparent" textColor: "{colors.link}" typography: "{typography.body-sm}" padding: "0" chip: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "4px 0px" border: "1px solid {colors.hairline-lilac}" avatar-tile: backgroundColor: "{colors.surface-stone}" rounded: "{rounded.circle}" padding: "0" border: "0" height: "48px" testimonial-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "32px" border: "1px solid {colors.hairline-lilac}" email-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "12px 16px" height: "48px" border: "1px solid {colors.hairline-lilac}" divider: backgroundColor: "{colors.divider}" padding: "0" height: "1px" footer-link: backgroundColor: "transparent" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "0" --- ## Overview Mastodon's marketing home is split into two registers. The top viewport drops into a near-black aubergine band `{colors.hero-band}` ("#150118") with a rainbow gradient blob bleeding out the right edge — a watercolor wash of magenta, indigo, and chartreuse that the hero illustration sits inside — and the headline "Social networking that's not for sale." renders in Manrope 68px weight 800 in pure white. Beneath the hero, the page drops to a `{colors.canvas}` ("#ffffff") canvas, and four feature bands alternate left-text / right-illustration with a `{colors.hairline-lilac}` ("#bd8dc8") magenta-tinted hairline border outlining each card. The `{colors.primary}` ("#6364ff") indigo voltage lives on exactly one element per viewport — the "Join mastodon.social" pill — and the second affordance ("Find another server") renders as a hairline-bordered ghost variant. **Two-register canvas**: where most open-source social projects pick one canvas tone and run the whole page on it, Mastodon stacks a saturated dark hero band on top of a flat white feature canvas, with no transition gradient between them. The top viewport reads as the brand expression — aubergine, rainbow blob, white Manrope display — and everything below resets to documentation rhythm: flat white background, hairline-bordered feature cards, square corners, no shadows. The page does not blend the two registers; it hard-cuts, the way a man page would cut from a header banner to monospaced body. Unlike the convention of carrying a gradient through the entire viewport, Mastodon reserves the gradient blob for the hero alone and treats the rest of the page as plain reading surface. The typography is the second discipline. **Manrope-at-450**: every body paragraph runs Manrope at weight 450 — a half-step between regular and medium that the variable axis supports natively — paired with weight 800 on every display and section heading. The variation is weight (400 / 450 / 500 / 600 / 700 / 800) and size (16 / 20 / 22 / 28 / 42 / 50 / 68px) only, with letter-spacing tracking at 0.16-0.28px on smaller sizes and `normal` on display. Where Bluesky runs Inter at weight 600 for display and Discord shouts at Ginto Nord weight 800, Mastodon picks the most-humanist of the geometric-grotesks and lets weight 800 do the muscular work while weight 450 carries the documentation voice. There is no editorial serif and no monospace face anywhere on the captured chrome. **Key Characteristics:** - Singular indigo CTA — `{colors.primary}` ("#6364ff") appears as the only saturated chrome voltage, 50 page occurrences split 18 text / 8 background / 24 border - Aubergine hero band — `{colors.hero-band}` ("#150118") near-black anchors the top viewport with a rainbow gradient blob bleeding rightward - Manrope-at-450 body — every body paragraph runs Manrope weight 450, a half-step the variable axis supports, paired with weight 800 on every display heading - Lilac federation hairline — `{colors.hairline-lilac}` ("#bd8dc8") magenta-tinted lavender is the secondary border layer, 81 page occurrences as borderColor on feature cards and dividers - 6px-pill / 4px-chip radius vocabulary — `{rounded.md}` ("6px") and `{rounded.sm}` ("4px") dominate at 27 and 25 occurrences, with `50%` reserved for the avatar grid - Hard-cut two-register canvas — aubergine hero band hard-cuts to white feature canvas with no gradient transition - Square feature cards — feature panels render at `{rounded.none}` ("0px") with a 1px lilac hairline rather than a soft radius ## Colors The palette splits along function lines: one saturated indigo CTA voltage with a hover-tier deeper variant, a two-step ink ladder, the aubergine hero band, a magenta-tinted lilac for borders, an off-white card wash, and supporting structural greys. - **Indigo primary (`#6364ff`)** — frequency 50. Used as text (18), background (8), border (24). The singular brand voltage on the chrome; carries the "Join mastodon.social" primary pill, the inline-link color, and the focus-ring boundary. Lives in the `--primary` analog role. The only saturated chrome color the page renders as a background fill. - **Indigo hover (`#563acc`)** — frequency 24. Used as text (12), border (12). The deeper indigo for the pressed/hover state on the primary pill. Reads as the same hue at lower luminance — the brand voltage does not change color on hover; it darkens. - **Ink (`#000000`)** — frequency 560. Used as text (282), border (278). The dominant ink color for headlines below the hero band, body paragraphs, feature-card text, and the secondary ghost-button border. Carries the load-bearing structural role across the entire white canvas below the hero. - **Ink-muted (`#555555`)** — frequency 16. Used as text (8), border (8). The secondary text color for footer links and small-print captions. Sits one step lighter than pure black for the legal/footer rail. - **Ink-soft (`#9b9b9b`)** — frequency 2. Used as text (1), border (1). The lifted neutral grey for placeholder text and disabled-state labels; the lightest readable text on the white surface. - **Aubergine hero band (`#150118`)** — frequency 1. Used as background (1). The near-black purple-tinted ink that fills the top viewport hero band. Brand-layer hex from the extraction. Single on-page render is the entire hero canvas — one element, one fill. - **Aubergine edge (`#4e155a`)** — frequency 1. Used as border (1). The deeper plum that edges the rainbow gradient blob inside the hero band. Reads as the transition stop between aubergine canvas and the magenta-side of the rainbow blob. - **Lilac hairline (`#bd8dc8`)** — frequency 81. Used as text (41), border (40). The magenta-tinted lavender that outlines every feature card and divider on the white canvas below the hero. The structural border voltage — neither pure grey nor pure brand color; a "federation-themed" hairline that signals the rainbow connection back to the hero blob. - **Hairline (`#d4d4d4`)** — frequency 15. Used as background (11), border (4). The neutral structural grey for avatar-tile placeholders inside the testimonial grid and for the secondary hairline tier on internal card subdivisions. - **Surface-card (`#fcefff`)** — frequency 4. Used as text (2), border (2). The lavender-tinted off-white surface for the chip and inline-affordance fills inside feature illustrations. Sits one step warmer than pure white and carries the brand's magenta family at near-zero saturation. - **Canvas (`#ffffff`)** — declared throughout the page wash. The true white reserved for the main page canvas below the hero band, the feature-card fills, and the testimonial-grid background. The dominant surface tone on every register except the hero band. - **On-primary (`#ffffff`)** — the canvas-white text color on top of the indigo pill and inside the aubergine hero band. The only place white text appears on chrome is on the primary CTA and inside the hero band. - **Link (`#6364ff`)** — declared as the inline-link text color, identical to the brand voltage. There is no separate link color in the system; inline hyperlinks always render in the same indigo as the primary pill. - **Focus-ring (`#6364ff`)** — the indigo voltage doubled as a focus outline on inputs and pills. The focus ring is always indigo, never a separate focus-only color. - **Divider (`#bd8dc8`)** — identical to the lilac hairline, exposed under a separate token name for the 1px horizontal rules between feature bands. Same lavender hue as the card borders. - **Surface-stone (`#d4d4d4`)** — the neutral grey reserved for avatar-tile placeholders in the testimonial grid at the bottom of the page. Reads as "image not yet loaded" or as a default avatar shape. - **Scrim (`rgba(21,1,24,0.6)`)** — the translucent aubergine wash reserved for dropdown menus or modal overlays. Tints the underlying canvas with the same hue as the hero band. - **Shadow-color (`rgba(0,0,0,0.08)`)** — reserved for the rare card-elevation shadow if a shadow is introduced; not present on the captured chrome but available as a low-opacity black for legacy themes. ## Typography Every text role on the page sits inside one face: **Manrope**, declared with a full system-ui fallback stack (`-apple-system`, `system-ui`, `Segoe UI`, Roboto, `Helvetica Neue`, Arial, `Noto Sans`, sans-serif, plus the Apple/Segoe color emoji families). There is no editorial serif, no monospace face, and no display-tier swap. The variation is weight (400 / 450 / 500 / 600 / 700 / 800) and size (16 / 20 / 22 / 28 / 42 / 50 / 68px) only — a one-face register where the entire register-distinction work is carried by weight and size. The display tier runs three sizes: 68px (display-xl, the hero headline "Social networking that's not for sale.") at weight 800 with 75px line-height and `normal` tracking; 50px (display-lg, the section h2 "Stay in control of your own timeline") at weight 800 with 55px line-height and `normal` tracking; 42px (display-md, a rare alternative h2) at weight 800 with 55px line-height. Every display tier is weight 800 — there is no display-tier weight variation. The tracking pattern is unusual — display tiers ride `normal` tracking, while body and heading-md / heading-sm carry positive tracking at 0.16-0.28px proportional to size. Body and UI run six roles: 22px weight 450 with 30px line-height (body-lg, the hero subtitle voice and feature-card body paragraphs); 20px weight 450 / 600 with 30px line-height (body-md and button-md); 16px weight 450 / 500 / 700 (body-sm, label-md, and body-strong, for caption rows, nav links, and span emphasis). The half-step weight 450 is the load-bearing body register — it sits between regular and medium on the Manrope variable axis, lifting the body just enough to read clearly against the white canvas without crowding the page with weight 500 mass. ## Layout The page is a single full-width column with two stacked registers: the top viewport is the dark aubergine hero band, and the rest is a white feature canvas with full-bleed sections. Inside the hero band, the layout is a left-text / right-illustration split — Manrope 68px headline plus body-lg subtitle plus the indigo + ghost CTA pair on the left, the rainbow-gradient blob illustration on the right. The hero band is roughly 600px tall; the dark canvas ends in a hard horizontal line where the white section canvas begins. Below the hero, four feature bands repeat the same left/right alternating pattern, each anchored by a 50px weight 800 section heading and a 22px weight 450 body paragraph. Each band is wrapped inside a hairline-bordered card at `{rounded.none}` ("0px") with `{colors.hairline-lilac}` ("#bd8dc8") borders, no shadow, and 32px internal padding. Below the four feature bands sit two grid sections: a four-column "Why Mastodon" card grid and a wider testimonial-quote rail with avatar tiles at `{rounded.circle}` ("50%") on the left of each quote card. Spacing tokens lean on a 4-6-8-12-20-32-64-72 ladder. The 32px step (19 occurrences) and 12px × 16px nav-pill padding (21 occurrences) dominate the captured chrome; 64px and 72px appear as the section-internal vertical spacing inside the hero band. The hero band uses an unusual 56px × 64px × 72px three-value padding shorthand for top / horizontal / bottom — top padding shy of bottom padding to push the headline up into the visual weight of the rainbow blob. ## Elevation & Depth Mastodon's marketing chrome doesn't use drop shadows. Every feature card sits at `{colors.canvas}` ("#ffffff") with a 1px `{colors.hairline-lilac}` ("#bd8dc8") border on a white page canvas, with no cast shadow and no opacity-based elevation. The hairline IS the elevation cue — the magenta-tinted lavender against pure white reads as a card boundary clearly enough that no shadow is needed. The hero band uses **canvas-step elevation**: the `{colors.hero-band}` ("#150118") aubergine surface against the `{colors.canvas}` ("#ffffff") white surface below produces the depth contrast on its own. The hero reads as "first layer, anchored" and the feature canvas reads as "second layer, document body" through pure color step, not through shadow or scrim. The rainbow gradient blob inside the hero band sits as a flat illustration layer — it does not cast a shadow onto the aubergine canvas and does not blur into the white canvas below. Inside the hero band, the indigo `{components.button-primary}` pill is one flat `#6364ff` fill with no gradient and no shadow; the ghost `{components.button-secondary}` is a transparent fill with a 1px white border. Below the hero band, the indigo pill renders against the white canvas as the same flat fill — the brand voltage does not gain a shadow or hover-lift even when it transitions out of the hero band. Depth is canvas-against-canvas only. ## Shapes The radius scale is dominated by **`6px`** pills (27 page occurrences in the extraction) and **`4px`** chips (25 occurrences), with **`50%`** circles (24 occurrences) reserved for the avatar grid in the testimonial rail. The chrome avoids the `8-12px` middle radius tier almost entirely; nothing on this page sits in the 5-15px range outside the singular `6px` pill and `4px` chip pair. **Pill-at-6, chip-at-4** is the entire interactive vocabulary. Every CTA, nav link, and email input renders at `6px`, including the 64px-tall "Join mastodon.social" primary pill. Every inner affordance — toggle chip, language selector, slider thumb badge — renders at `4px`. Feature cards drop to `0px` square corners and rely on the `#bd8dc8` lilac hairline border for definition. The `50%` circle only appears in the testimonial-grid avatar tiles, the federated-account icons inside feature illustrations, and the "live count" indicator on the email-signup row. ## Components - **button-primary** — Indigo `{colors.primary}` ("#6364ff") fill, canvas-white text, Manrope 20px weight 600 button-md, 6px pill radius, 16px × 24px padding, 64px tall, no border. The "Join mastodon.social" CTA — the only on-page render of saturated chrome voltage. - **button-primary-hover** — Hover-tier indigo `{colors.primary-hover}` ("#563acc") fill, canvas-white text, same button-md typography, same 6px pill geometry. The brand voltage darkens by one step rather than gaining a shadow or scaling. - **button-secondary** — Transparent fill, canvas-white text, button-md typography, 6px radius, 16px × 24px padding, 64px tall, 1px white border. The "Find another server" ghost variant rendered inside the aubergine hero band. - **button-ghost-dark** — Transparent fill, ink `{colors.ink}` text, button-md typography, 6px radius, 16px × 24px padding, 64px tall, 1px black border. The ghost variant rendered against the white feature canvas below the hero, used for tertiary actions. - **nav-link** — Transparent fill, canvas-white text at label-md 16px weight 500, 6px radius, 12px × 20px padding, 48px tall, no border. The "Apps", "Explore", "Servers" links in the top nav rail inside the hero band. - **top-nav** — Aubergine `{colors.hero-band}` ("#150118") fill, canvas-white text at label-md typography, 12px × 16px padding, no border. The full-width nav rail at the top of the hero band carrying the wordmark and primary nav links. - **hero-band** — Aubergine `{colors.hero-band}` fill, canvas-white text at body-lg 22px weight 450, 56px × 64px × 72px three-value padding. The entire top viewport surface anchoring the hero illustration and headline. - **hero-heading** — Transparent fill, canvas-white text at `{typography.display-xl}` 68px weight 800 with 75px line-height, no padding. The "Social networking that's not for sale." headline inside the hero band. - **section-heading** — Transparent fill, ink text at `{typography.display-lg}` 50px weight 800 with 55px line-height, no padding. The h2 register on the white canvas below the hero — "Stay in control of your own timeline," "Build your audience in confidence," etc. - **feature-card** — Canvas-white fill, ink text at body-sm 16px weight 450, 0px corner radius, 32px padding, 1px `{colors.hairline-lilac}` border. The square hairline-bordered cards that wrap each feature band on the white canvas. - **feature-card-soft** — Surface-card `{colors.surface-card}` ("#fcefff") off-white fill, ink text at body-sm typography, same 0px corner and 32px padding and lilac border. The alternative warm-tinted feature-card variant for sections that need a light register break against pure white. - **body-paragraph** — Transparent fill, ink text at body-lg 22px weight 450 with 30px line-height. The feature-band body voice, sitting beneath each section heading. - **inline-link** — Transparent fill, indigo `{colors.link}` ("#6364ff") text at body-sm weight 450. Identical to the brand voltage; inline hyperlinks always render in indigo. - **chip** — Surface-card off-white fill, ink text at body-sm typography, 4px corner radius, 4px × 0px padding, 1px lilac border. The inner-affordance pills inside feature illustrations — toggle chips, language selectors, status pills. - **avatar-tile** — Surface-stone `{colors.surface-stone}` ("#d4d4d4") placeholder fill, 50% corner radius, 48px tall, no border, no padding. The avatar circle inside the testimonial grid and the federated-account icons inside feature illustrations. - **testimonial-card** — Canvas-white fill, ink text at body-sm typography, 0px corner radius, 32px padding, 1px lilac border. The user-quote card in the "What our users are saying" rail at the bottom of the page; identical geometry to the feature-card. - **email-input** — Canvas-white fill, ink text at body-sm typography, 6px corner radius, 12px × 16px padding, 48px tall, 1px lilac border. The email-signup row at the bottom of the page; the only input on the captured chrome. - **divider** — Divider `{colors.divider}` ("#bd8dc8") fill, 1px tall, no padding. The 1px horizontal rules between feature bands and inside the footer link rail. - **footer-link** — Transparent fill, ink-muted `{colors.ink-muted}` ("#555555") text at body-sm typography. The legal/footer link rail at the very bottom of the page. ## Do's and Don'ts **Do** keep indigo `#6364ff` to the single primary CTA pill. The captured page renders it as a background fill on exactly 8 elements (against 282 black text renders and 278 black border renders) — three or more indigo surfaces on chrome breaks the singular-voltage discipline and lifts the page into a generic-saas register the brand explicitly avoids. **Do** anchor the hero band in aubergine `#150118` and hard-cut to white `#ffffff` below. The hard-cut between the two registers is load-bearing — fading the aubergine into a gradient transition zone collapses the man-page rhythm into a marketing-fade and erases the document-body register the feature canvas depends on. **Do** render every text role in Manrope. The single-face register is load-bearing — a serif display tier or a geometric grotesk on the 68px hero would push the chrome from "open-source social project" toward "fintech marketing." **Don't** use `#bd8dc8` lilac as a button background or chrome fill — it's a border-only token (81 occurrences, almost entirely as borderColor). Promoting it to a fill creates a second saturated voltage on the page and collapses the singular-indigo discipline into a two-color lavender-indigo gradient that reads as a generic open-source-project pastel. **Don't** introduce a soft radius (`8-12px`) on feature cards. Feature panels render at `0px` square corners with a 1px lilac hairline border — adding a soft radius pushes the page from a documentation rhythm toward a SaaS-card rhythm, which is exactly the register the brand avoids. **Don't** add a drop shadow to feature cards. The elevation effect comes from the lilac hairline border on the white canvas, and from the hero-band-aubergine-vs-feature-canvas-white step. Introducing a 0-8px shadow doubles the elevation cue and shifts the page from man-page register to SaaS register. **Don't** sub Manrope for a geometric grotesk like Geist or Inter on the 68px hero. The brand reads as a non-commercial federated network precisely because Manrope's humanist axis softens the weight-800 display — a stricter grotesk pushes the chrome toward fintech voice and erases the friendliness the hero band depends on. **Don't** use the indigo `#6364ff` voltage as a feature-card background. The card surfaces are `#ffffff` canvas or `#fcefff` lavender off-white — promoting indigo to a card fill creates a second indigo surface beyond the CTA and breaks the single-pill discipline that lets the brand voltage carry the conversion. ## Known Gaps - **Signed-in timeline shell** (column rail, post composer, timeline algorithm switcher, notifications panel) is out of scope — the captured surface is the marketing home only. The component recipes here cover the hero band, the primary CTA pair, the feature cards, the testimonial grid, and the email-signup row, not the in-product timeline or moderation surfaces. - **Mobile breakpoint** behavior is not captured. The left-text / right-illustration feature bands are known to stack vertically on small screens with the illustration moving below the text, but the exact responsive pixel values aren't in the extracted tokens. - **Dark mode** for the in-product surface is real on the Mastodon mobile apps and on most third-party clients, but the marketing home renders only the light-canvas variant below the hero band. The full dark-mode token ladder is not in this DESIGN.md. - **Motion** — the rainbow gradient blob inside the hero band animates subtly on load with a slow rotation, and the feature-illustration mockups animate small details (a sliding chart range, a posting indicator); the exact timing functions and the in-product UI animations are not in the captured tokens. - **Form validation** — error-state borders, helper-text styles, and inline form-validation messaging on the email-signup row are not captured beyond the default hairline border. - **Server-picker surface** — the `/servers` page where new users browse and choose a federated instance is a separate marketing surface with its own filter chips, instance cards, and category rail; it's not captured in this DESIGN.md, which covers only the home page.