What is Bluesky's primary brand color?

Bluesky Blue is '#006aff' — a saturated electric blue used as the singular chrome voltage and reserved for the 'Create account' CTA pill. The home page renders it in exactly one place: the topmost button inside the auth modal. A softer sky-tint '#c0dcf0' carries the wordmark logo glyph alone, never a button or chrome fill. There is no purple, no green, no secondary chromatic accent on the chrome — the entire saturation budget is spent on that one blue pill and a faint wordmark.

What typography does Bluesky use, and what fallbacks ship?

Bluesky uses InterVariable across every text role, from the 30px hero headline down to the 8px micro-label. The declared CSS stack is 'InterVariable, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"' — so the system falls through to native system sans on every platform if the InterVariable file fails to load. Sizes step in 8/11.3/13.1/15/20.6/24.3/30px increments with weights 400/500/600/700, and only the two largest tiers (30px and 20.6px) carry negative tracking at '-0.5px'. There is no display-tier serif and no monospace face on the captured chrome.

What does Bluesky's shape vocabulary look like?

The radius scale is dominated by '999px' full-pills — 321 occurrences on the captured page, against 100 for '12px' cards and 90 for '21px' modal corners. Every interactive element on the chrome resolves to a full-pill: the 'Create account' CTA, the 'Sign in' ghost button, the language-selector chip, even the post-attachment-image frames inside feed cards. Card surfaces (the auth modal, the inner feed cards) step to '21px' for the outer modal and '12px' for nested cards. The 0px and 4px tier is reserved for the language-selector caret and one inline divider — interactive chrome is never square.

Why is the home page a photograph instead of a marketing hero?

The signed-out home is a single auth modal floating over a darkened photo-feed wash — mountain landscapes, a theater interior, a boat on the ocean, dinner-table scenes — blurred behind a translucent scrim. There is no marketing illustration, no testimonial grid, no pricing band. The design decision is that a federated social network's first impression should BE the network: actual posts from actual users, dimmed just enough that the modal reads cleanly. Unlike the convention of a hero illustration on a colored band, Bluesky lets the imagery come from its feed and reserves the chrome for one auth surface.

What should I not do with these tokens?

Don't use Bluesky Blue '#006aff' as a background fill — its entire on-page budget is one CTA pill, with 63 text renders and 2 background renders across the whole page. Don't introduce a third radius between '12px' and '21px' — the modal lives at '21px', nested cards at '12px', and the gap signals 'outer chrome' versus 'inner content.' Don't sub InterVariable for a geometric display face on the 30px hero — the brand reads as a familiar social network precisely because the hero tier is the same Inter as the body, not a separate display register. Don't introduce shadows on the modal — depth on this page is achieved by the scrim-over-photo composition, not by drop shadow on the modal card.

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

Yes — feed it to Claude, Cursor, or Copilot and the agent will produce React components that match Bluesky's voice: a single saturated blue pill CTA, the slate-on-white ink ladder, InterVariable at every tier, and the '21px'-modal-over-photo-feed composition. Or reference tokens directly: every hex, every typography level, every radius and spacing step is a quoted value ready to paste into Tailwind config or CSS custom properties. The 18 component recipes cover the signed-out auth surface — modal, three pill variants, language-selector chip, footer link rail, feed card, post composer — not the in-app timeline shell or the moderation-settings surface.

Bluesky Design System

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

About Bluesky DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source bsky.app

Social & Community

Bluesky's signed-out home is a darkened photo collage with a single auth modal floating over it. The chrome inside the modal is restrained to the point of severity: a near-white "#f9fafb" surface, an InterVariable 30px weight 600 headline reading "Real people. Real conversations. Social media as it should be.", three stacked full-pill buttons where the only saturated one carries the singular Bluesky Blue "#006aff" "Create account" CTA, and a faint sky-tinted "#c0dcf0" wordmark logo that's the only place the brand color softens. Beyond the modal, the page proper is a blurred social feed — mountain photographs, a darkened theater, a lone boat on the ocean — that the modal dims with a translucent scrim. There is no marketing hero, no feature grid, no testimonial wall. The chrome IS the auth surface.

This file packages the home-and-modal system as a single Google Labs DESIGN.md spec. Inside: 19 color tokens covering the singular Bluesky Blue, the three-step structural ink ladder ("#000000" → "#405168" → "#667b99"), two off-whites ("#f9fafb" page wash, "#dce2ea" hairline border), the soft sky-tint "#c0dcf0" reserved for the wordmark, and a deep navy "#354358" used inside the gradient header strip; 11 InterVariable typography roles from 30px hero display down to 8px micro-label, all sharing one font stack with weight variation from 400-700; a four-step radius scale where "999px" full-pills dominate at 321 page occurrences against "12px" cards and "21px" modal corners; and 18 component recipes covering the floating modal, the three CTA pill variants, the post composer, the photo-attachment frame, and the feed card.

Feed this file to Claude, Cursor, or GitHub Copilot and the agent reproduces Bluesky's restraint — the singular blue pill, the InterVariable monotone, the modal-over-photograph composition — instead of inventing a generic social-app theme. Or reference the tokens directly when wiring a federated-network UI: 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 that a social network's marketing surface can be a single auth modal — that the whole brand expression on first load can collapse to one pill on one card, and trust the photographs behind to do the storytelling.

What makes it distinct

Singular CTA voltageBluesky Blue '#006aff' is the only saturated chrome color and lives on one full-pill button per screen
Pill-monopoly geometry'999px' radius hits 321 occurrences while the only other live radii are '12px' and '21px', leaving no square edges on interactive chrome
Slate-on-white ink ladder'#000000' headlines step down through '#405168' slate to '#667b99' steel, three structural greys carry every text layer
InterVariable at one faceevery typography role from the 30px hero down to the 8px micro-label runs the same InterVariable stack with no editorial serif and no display-tier swap
Photo-feed canvas, modal chromethe home page is a darkened photograph wash with a single floating auth card, the design moves all branding into one centered '21px'-radius modal

Live at bsky.app

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

bsky.app

Explore Bluesky

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.

Bluesky design system FAQ

Common questions about Bluesky'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.

Bluesky — official site

A federated social network built on the AT Protocol — choose your moderation, own your following graph.

The DESIGN.md specification

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

Use Bluesky 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 --:--:--→