W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Bluesky
Bluesky is a decentralized social network built on the AT Protocol, spun out of Twitter as a public-benefit corporation in 2021 and opened to the public in 2024. The brand voice is hopeful, open-source-leaning, and intentionally modest — a deliberate counterweight to the closed-network identities it competes against. Visually, Bluesky is anchored on Bluesky Blue (#0085FF) — a saturated sky-blue that carries the butterfly mark and the bsky.app product surface. The supporting system is intentionally restrained, letting posts and media drive the visual surface.
1 palette 3 fonts 0 assets 10 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/bluesky/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/bluesky/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Bluesky
Bluesky is a decentralized social network built on the AT Protocol, spun out of Twitter as a public-benefit corporation in 2021 and opened to the public in 2024. The brand voice is hopeful, open-source-leaning, and intentionally modest — a deliberate counterweight to the closed-network identities it competes against. Visually, Bluesky is anchored on Bluesky Blue (#0085FF) — a saturated sky-blue that carries the butterfly mark and the bsky.app product surface. The supporting system is intentionally restrained, letting posts and media drive the visual surface.
Tags: social, decentralized, bluesky, blue, atproto, public-benefit
Atoms
Palette
Bluesky · [email protected] · Proprietary — All Rights Reserved
Bluesky social corporate palette, anchored on Bluesky Blue (#0085FF) — the saturated sky-blue that carries the Bluesky butterfly mark and the bsky.app product surface. Bluesky's identity is bi-modal: the default mobile-app experience is dark-canvas with the Blue used on the mark and primary affordances, while the marketing surface and desktop product default to a light canvas. The supporting system is intentionally restrained — one blue, two canvases, and a handful of authored neutrals — letting posts and media drive the visual surface.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
bluesky-blue |
Bluesky Blue | #0085FF |
bluesky-blue-dark |
Bluesky Blue Dark | #0068C9 |
bluesky-blue-light |
Bluesky Blue Light | #4FA9FF |
bluesky-white |
Bluesky White | #FFFFFF |
bluesky-near-white |
Bluesky Near-White | #F1F3F5 |
bluesky-text-primary |
Bluesky Text Primary | #0B0F14 |
bluesky-text-secondary |
Bluesky Text Secondary | #42576C |
bluesky-text-tertiary |
Bluesky Text Tertiary | #788EA4 |
bluesky-divider-light |
Bluesky Divider Light | #D4DBE2 |
bluesky-canvas-dark |
Bluesky Canvas Dark | #0B0F14 |
bluesky-surface-dark |
Bluesky Surface Dark | #161E27 |
bluesky-surface-elevated-dark |
Bluesky Surface Elevated Dark | #1E2936 |
bluesky-text-on-dark |
Bluesky Text on Dark | #F1F3F5 |
bluesky-text-secondary-dark |
Bluesky Text Secondary on Dark | #A5B6C8 |
bluesky-divider-dark |
Bluesky Divider Dark | #2C3A4A |
bluesky-green |
Bluesky Green | #1A7F37 |
bluesky-yellow |
Bluesky Yellow | #D9A026 |
bluesky-red |
Bluesky Red | #E5484D |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
bluesky-white |
#FFFFFF |
surface |
bluesky-near-white |
#F1F3F5 |
surface-elevated |
bluesky-white |
#FFFFFF |
text-primary |
bluesky-text-primary |
#0B0F14 |
text-secondary |
bluesky-text-secondary |
#42576C |
text-tertiary |
bluesky-text-tertiary |
#788EA4 |
primary |
bluesky-blue |
#0085FF |
primary-hover |
bluesky-blue-dark |
#0068C9 |
accent |
bluesky-blue |
#0085FF |
accent-hover |
bluesky-blue-dark |
#0068C9 |
warning |
bluesky-yellow |
#D9A026 |
warning-hover |
bluesky-yellow |
#D9A026 |
error |
bluesky-red |
#E5484D |
success |
bluesky-green |
#1A7F37 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
bluesky-canvas-dark |
#0B0F14 |
surface |
bluesky-surface-dark |
#161E27 |
surface-elevated |
bluesky-surface-elevated-dark |
#1E2936 |
text-primary |
bluesky-text-on-dark |
#F1F3F5 |
text-secondary |
bluesky-text-secondary-dark |
#A5B6C8 |
text-tertiary |
bluesky-text-secondary-dark |
#A5B6C8 |
primary |
bluesky-blue-light |
#4FA9FF |
primary-hover |
bluesky-blue |
#0085FF |
accent |
bluesky-blue-light |
#4FA9FF |
accent-hover |
bluesky-blue |
#0085FF |
warning |
bluesky-yellow |
#D9A026 |
warning-hover |
bluesky-yellow |
#D9A026 |
error |
bluesky-red |
#E5484D |
success |
bluesky-green |
#1A7F37 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
bluesky-blue |
#0085FF |
on-identity |
bluesky-white |
#FFFFFF |
primary |
bluesky-blue |
#0085FF |
primary-hover |
bluesky-blue-dark |
#0068C9 |
accent |
bluesky-blue |
#0085FF |
accent-hover |
bluesky-blue-dark |
#0068C9 |
success |
bluesky-green |
#1A7F37 |
warning |
bluesky-yellow |
#D9A026 |
error |
bluesky-red |
#E5484D |
background-light |
bluesky-white |
#FFFFFF |
background-dark |
bluesky-canvas-dark |
#0B0F14 |
surface-light |
bluesky-near-white |
#F1F3F5 |
surface-dark |
bluesky-surface-dark |
#161E27 |
surface-elevated-dark |
bluesky-surface-elevated-dark |
#1E2936 |
text-primary-light |
bluesky-text-primary |
#0B0F14 |
text-primary-dark |
bluesky-text-on-dark |
#F1F3F5 |
text-secondary-light |
bluesky-text-secondary |
#42576C |
text-secondary-dark |
bluesky-text-secondary-dark |
#A5B6C8 |
divider-light |
bluesky-divider-light |
#D4DBE2 |
divider-dark |
bluesky-divider-dark |
#2C3A4A |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (8)
colorChoice → logo.mark
- allowed: bluesky-blue, bluesky-white, bluesky-text-primary
- forbidden: any-non-brand-color, bluesky-yellow, bluesky-green, bluesky-red
The Bluesky butterfly mark and wordmark render in Bluesky Blue, white (on dark surfaces), or near-black (in monochrome contexts). Status accents are reserved for product affordances and never recolor the mark.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, cropped, butterfly-redraw
Bluesky's brand guidance prescribes the butterfly mark in approved variants only. Recoloring, redrawing the butterfly, or applying decorative effects violates the brand-use direction surfaced across bsky.social and bsky.app.
variantSelection → logo
- use:
butterfly-light - when:
backgroundColorScheme="dark"
On the dark canvas (bsky.app's dark theme), the butterfly mark renders in white or Bluesky Blue Light for legibility. The saturated Bluesky Blue alone may not clear AA-large on the deepest canvas.
variantSelection → logo
- use:
butterfly-blue - when:
backgroundColorScheme="light"
On light surfaces, the butterfly mark renders in Bluesky Blue — the canonical brand application on bsky.app's light theme and across marketing materials.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Bluesky's near-black text (#0B0F14) on white reads at ~19:1 — well above AA. The dark-mode text tone (#F1F3F5) on the near-black canvas also clears AA.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Bluesky Blue (#0085FF) on white reads at ~3.6:1 — clearing WCAG AA at large-text size. The lighter blue variant (#4FA9FF) is used on the dark canvas to maintain AA-large contrast against the near-black surface.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, atproto-misattribution
Bluesky Social, PBC restricts use of the Bluesky butterfly mark and wordmark in ways that imply official affiliation, on competing-product surfaces, on third-party merchandise without license, or in ways that conflate the Bluesky-the-app brand with the AT Protocol (the open standard Bluesky stewards but does not exclusively own).
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The bi-modal canvas requires contrast verification on both the light and dark surfaces; AA is the floor on either.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Inter's most-used cuts on the bsky.app surface are Medium (500), Semi-Bold (600), and Bold (700). Lighter cuts compromise the modest-but-confident voice the brand depends on, while heavier cuts overstate against Bluesky's deliberately understated visual surface.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: bluesky-white, bluesky-near-white, bluesky-canvas-dark, bluesky-text-primary
Bluesky Blue is calibrated to read on both the light and dark canonical surfaces. Pairing it with an additional dominant chromatic value breaks the calibrated minimal composition the brand depends on.
Provenance
- Source: https://bsky.app
- License:
Proprietary — All Rights Reserved - Attribution: Bluesky and the Bluesky butterfly mark are trademarks of Bluesky Social, PBC. The primary brand blue (~#0085FF) is verified via the simple-icons brand database, which cites bsky.app as the source, and is consistent with the brand-mark fill on the bsky.app product surface and the Bluesky press kit. Inter is the UI typeface used across bsky.app and is already in the brand-atoms catalog.
- Imported:
2026-05-18 - Notes: Bluesky's identity is bi-modal: the mobile client defaults to dark mode on platforms where the OS prefers dark, while the desktop product and marketing surface default to light. The Bluesky Blue carries across both. Authored neutrals follow bsky.app's product-UI tones (near-black canvas with cool gray-blue elevations) rather than fabricating an independent dark palette.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Bluesky
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Bluesky
A clear hierarchy in Bluesky's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ bluesky-blue #0085FF accent-hover
→ bluesky-blue-dark #0068C9 background-dark
→ bluesky-canvas-dark #0B0F14 background-light
→ bluesky-white #FFFFFF divider-dark
→ bluesky-divider-dark #2C3A4A divider-light
→ bluesky-divider-light #D4DBE2 error
→ bluesky-red #E5484D identity
→ bluesky-blue #0085FF on-identity
→ bluesky-white #FFFFFF primary
→ bluesky-blue #0085FF primary-hover
→ bluesky-blue-dark #0068C9 success
→ bluesky-green #1A7F37 surface-dark
→ bluesky-surface-dark #161E27 surface-elevated-dark
→ bluesky-surface-elevated-dark #1E2936 surface-light
→ bluesky-near-white #F1F3F5 text-primary-dark
→ bluesky-text-on-dark #F1F3F5 text-primary-light
→ bluesky-text-primary #0B0F14 text-secondary-dark
→ bluesky-text-secondary-dark #A5B6C8 text-secondary-light
→ bluesky-text-secondary #42576C warning
→ bluesky-yellow #D9A026 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from bluesky)
Light mode (14 roles)
accent
→ bluesky-blue accent-hover
→ bluesky-blue-dark background
→ bluesky-white error
→ bluesky-red primary
→ bluesky-blue primary-hover
→ bluesky-blue-dark success
→ bluesky-green surface
→ bluesky-near-white surface-elevated
→ bluesky-white text-primary
→ bluesky-text-primary text-secondary
→ bluesky-text-secondary text-tertiary
→ bluesky-text-tertiary warning
→ bluesky-yellow warning-hover
→ bluesky-yellow Dark mode (14 roles)
accent
→ bluesky-blue-light accent-hover
→ bluesky-blue background
→ bluesky-canvas-dark error
→ bluesky-red primary
→ bluesky-blue-light primary-hover
→ bluesky-blue success
→ bluesky-green surface
→ bluesky-surface-dark surface-elevated
→ bluesky-surface-elevated-dark text-primary
→ bluesky-text-on-dark text-secondary
→ bluesky-text-secondary-dark text-tertiary
→ bluesky-text-secondary-dark warning
→ bluesky-yellow warning-hover
→ bluesky-yellow Rules (10 typed constraints)
error · 8 rules
colorChoice logo.mark allowed bluesky-blue, bluesky-white, bluesky-text-primary forbidden any-non-brand-color, bluesky-yellow, bluesky-green, bluesky-red The Bluesky butterfly mark and wordmark render in Bluesky Blue, white (on dark surfaces), or near-black (in monochrome contexts). Status accents are reserved for product affordances and never recolor the mark.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, inverted-without-variant, cropped, butterfly-redraw Bluesky's brand guidance prescribes the butterfly mark in approved variants only. Recoloring, redrawing the butterfly, or applying decorative effects violates the brand-use direction surfaced across bsky.social and bsky.app.
variantSelection logo use butterfly-light when backgroundColorScheme="dark" On the dark canvas (bsky.app's dark theme), the butterfly mark renders in white or Bluesky Blue Light for legibility. The saturated Bluesky Blue alone may not clear AA-large on the deepest canvas.
variantSelection logo use butterfly-blue when backgroundColorScheme="light" On light surfaces, the butterfly mark renders in Bluesky Blue — the canonical brand application on bsky.app's light theme and across marketing materials.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Bluesky's near-black text (#0B0F14) on white reads at ~19:1 — well above AA. The dark-mode text tone (#F1F3F5) on the near-black canvas also clears AA.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Bluesky Blue (#0085FF) on white reads at ~3.6:1 — clearing WCAG AA at large-text size. The lighter blue variant (#4FA9FF) is used on the dark canvas to maintain AA-large contrast against the near-black surface.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, atproto-misattribution Bluesky Social, PBC restricts use of the Bluesky butterfly mark and wordmark in ways that imply official affiliation, on competing-product surfaces, on third-party merchandise without license, or in ways that conflate the Bluesky-the-app brand with the AT Protocol (the open standard Bluesky stewards but does not exclusively own).
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The bi-modal canvas requires contrast verification on both the light and dark surfaces; AA is the floor on either.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Inter's most-used cuts on the bsky.app surface are Medium (500), Semi-Bold (600), and Bold (700). Lighter cuts compromise the modest-but-confident voice the brand depends on, while heavier cuts overstate against Bluesky's deliberately understated visual surface.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith bluesky-white, bluesky-near-white, bluesky-canvas-dark, bluesky-text-primary Bluesky Blue is calibrated to read on both the light and dark canonical surfaces. Pairing it with an additional dominant chromatic value breaks the calibrated minimal composition the brand depends on.
Provenance
- Source
- https://bsky.app
- License
Proprietary — All Rights Reserved- Attribution
- Bluesky and the Bluesky butterfly mark are trademarks of Bluesky Social, PBC. The primary brand blue (~#0085FF) is verified via the simple-icons brand database, which cites bsky.app as the source, and is consistent with the brand-mark fill on the bsky.app product surface and the Bluesky press kit. Inter is the UI typeface used across bsky.app and is already in the brand-atoms catalog.
- Imported
2026-05-18- Notes
- Bluesky's identity is bi-modal: the mobile client defaults to dark mode on platforms where the OS prefers dark, while the desktop product and marketing surface default to light. The Bluesky Blue carries across both. Authored neutrals follow bsky.app's product-UI tones (near-black canvas with cool gray-blue elevations) rather than fabricating an independent dark palette.