What is Mastodon's primary brand color?

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.

What typography does Mastodon use, and what fallbacks ship?

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.

What does Mastodon's shape vocabulary look like?

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.

Why does the page feel like an open-source project landing page rather than a SaaS marketing site?

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.

What should I not do with these tokens?

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.

Can I use this DESIGN.md to build my own Mastodon-style React app?

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.

Mastodon Design System

Mastodon's design system as a DESIGN.md file.

About Mastodon DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source joinmastodon.org

Social & Community

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.

What makes it distinct

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 faceevery 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

Live at joinmastodon.org

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

joinmastodon.org

Explore Mastodon

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Mastodon design system FAQ

Common questions about Mastodon's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Mastodon — official site

The decentralized, open-source social network built on the ActivityPub protocol — pick your server, own your timeline, no algorithmic feed.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Mastodon in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→