---
title: "Bluesky Social design system"
variant: extended
source: https://bsky.app/
captured_at: 2026-10-12
theme: light
industry: media
generator: Design DNA (https://four.wiralomi.com/style/bsky-app)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Bluesky Social · Design System

> An open feed for people, ideas, and art.

**Theme:** light · **Industry:** media · **Source:** https://bsky.app/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Bluesky’s Discover page pairs a quiet, white social interface with a dense, continuously scrolling stream of community posts. A restrained blue accent and fine separators keep attention on creators, conversation, and varied media.

## North star

Keep the interface quiet and structurally precise so the varied community posts—not the chrome—command attention.

## Overview

The page uses white as its dominant canvas, leaving broad empty side areas around a narrow, centered social feed. Black text establishes a clear hierarchy, while muted slate is reserved for handles, timestamps, and supporting navigation. Bluesky blue marks high-value actions and interactive emphasis rather than large decorative panels. InterVariable supplies a consistent, clean sans-serif voice across compact navigation, readable post copy, and stronger creator names. The layout is a three-column desktop composition: a sparse sign-in rail, a bordered central timeline, and a utility rail for search and trending topics. Fine pale borders define the feed without shadows or heavy containers. Posts vary in height according to their content, with artwork, video, and photographs displayed prominently inside the stream. The generous outer whitespace contrasts with the feed’s dense, varied editorial content.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Feed Ink | `#000000` | `--color-feed-ink` | neutral | Primary text for post copy, creator names, navigation labels, and icons. |
| Canvas White | `#ffffff` | `--color-canvas-white` | surface | Dominant page canvas and background for the main feed and side rails. |
| Soft Mist | `#f9fafb` | `--color-soft-mist` | surface | Subtle card, button, and supporting surface fill. |
| Divider Gray | `#dce2ea` | `--color-divider-gray` | semantic | Fine borders separating the feed column and outlining post cards. |
| Slate Detail | `#405168` | `--color-slate-detail` | neutral | Muted handles, timestamps, language controls, and secondary navigation text. |
| Bluesky Blue | `#006aff` | `--color-bluesky-blue` | brand | Primary account action and occasional links or interactive emphasis. |
| Cloud Gray | `#f2f2f2` | `--color-cloud-gray` | surface | Light section and button surfaces, including subtle utility-area backgrounds. |
| Steel Note | `#667b99` | `--color-steel-note` | neutral | Minor secondary text detected in the measured palette; use sparingly for supporting copy. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#f9fafb` (Soft Mist) · `--color-surface-2` → `#f2f2f2` (Cloud Gray) · `--color-surface-3` → `#000000` (Feed Ink) · `--color-text` → `#000000` (Feed Ink) · `--color-text-muted` → `#405168` (Slate Detail) · `--color-border` → `#dce2ea` (Divider Gray) · `--color-accent` → `#006aff` (Bluesky Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f9fafb` | 20.1:1 | AAA |
| `#000000` | `#f2f2f2` | 18.76:1 | AAA |
| `#405168` | `#ffffff` | 8.09:1 | AAA |
| `#405168` | `#f9fafb` | 7.74:1 | AAA |
| `#405168` | `#f2f2f2` | 7.23:1 | AAA |
| `#405168` | `#000000` | 2.59:1 | fail |
| `#006aff` | `#ffffff` | 4.66:1 | AA |
| `#006aff` | `#f9fafb` | 4.46:1 | AA-large |
| `#006aff` | `#f2f2f2` | 4.16:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| InterVariable | `--font-body` | webfont | 400, 600, 700, 500 | All interface text, including navigation, feed copy, metadata, and links. | Inter |

- **InterVariable:** Neutral sans-serif throughout; regular post text, medium navigation, semibold names, and bold emphasis. No notable tracking or uppercase treatment.

### Type scale — Golden Ratio (ratio ≈ 1.633, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24.5px | 700 | 1 | 0 | — | InterVariable | Compact, bold sign-in invitation in the left rail. |
| body | 15px | 400 | 1.33 | 0 | — | InterVariable | Main post text and readable feed descriptions. |
| caption | 13px | 400 | 1.3 | 0 | — | InterVariable | Compact timestamps, counts, and supporting metadata. |
| nav | 13px | 500 | 1.3 | 0 | — | InterVariable | Small labels for navigation and language controls. |
| link | 15px | 400 | 1.13 | 0 | — | InterVariable | Interactive post links and inline references. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 2, 4, 5, 8, 10, 12, 15 px.
- Section rhythm 237px · element gap 4px · card padding — · max content width 600px.

A desktop three-column grid places a slim sign-in rail on the left, the main timeline in the center, and search and trending utilities on the right. The measured page max width is 600px for its primary content area; keep the feed narrow and vertically continuous. Align the feed to a shared central axis and separate it from neighboring areas with hairline borders. Outer whitespace is spacious, while the timeline itself is content-dense. Post heights follow their copy and media rather than a uniform card grid.

## Shape & elevation

- Radius: button `50%` · card `12px` · nav `6px` · link `50%` · xs `8px` · sm `12px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.17, 0.73, 0.14, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadows or gradients. Pale hairline borders distinguish the timeline from the side rails and separate posts. Rounded media and utility cards provide the main soft layering; avoid strong depth effects or dark outlines.

## Imagery

The feed mixes user-uploaded artwork, portraits, event video, news visuals, and other photography. Media is shown inline at substantial size, often with rounded corners, and retains its original color and character. Avoid imposing a site-wide filter or decorative frame: the diversity of creator content is central to the page’s identity.

## Components

### Left sign-in rail

Sparse white rail with the blue butterfly mark, bold invitation, blue Create account action, muted Sign in option, and language control.

### Feed tab bar

Compact Discover and Feeds labels at the top of the central column, with blue underline emphasis for the selected view.

### Post row

Avatar, creator name, muted handle and timestamp, then post copy and optional inline links; separate entries with fine borders.

### Inline media

Large post artwork, photography, or video sits directly beneath its text, with softly rounded corners and no ornamental framing.

### Engagement actions

Small muted reply, repost, like, bookmark, and share icons with counts beneath each post.

### Right utility rail

Light search field above a rounded, thin-bordered trending panel, followed by understated privacy, terms, and help links.

### Measured component styles

- **Primary button**: background #f9fafb · text #000000 · radius 0px · padding 0px · 400 16px InterVariable
- **Link** (“womensartbluesky.bsky.social”): transparent background · text #000000 · radius 0px · padding 0px · 600 15px InterVariable
- **Input**: transparent background · text #000000 · radius 0px · padding 11px 4px · 400 15px InterVariable
- **Card** (“ALT”): background #f9fafb · text #000000 · radius 12px · padding 0px · 400 16px InterVariable
- **Navigation item** (“Join the conversation Create account Sig”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px InterVariable

## Do

- Keep the page canvas white and the outer rails visually quiet.
- Use Bluesky Blue #006aff selectively for primary actions and active emphasis.
- Set post text in black and metadata in Slate Detail #405168.
- Use fine #dce2ea separators to define columns and feed entries.
- Let each post’s content determine its height and media arrangement.
- Preserve a narrow central timeline with generous surrounding whitespace.

## Don't

- Do not turn the feed into a uniform tiled card grid.
- Do not add heavy shadows or decorative gradients.
- Do not use the artwork palette as the interface brand palette.
- Do not make timestamps or handles compete with creator names and post copy.
- Do not fill the broad side areas with unnecessary content.
- Do not apply a uniform tint or treatment to user-uploaded media.

## Agent prompt

Build a new Bluesky-style social page with a quiet three-column desktop layout and a narrow, vertically flowing central feed. Use Canvas White #ffffff for the page, Feed Ink #000000 for core text, and Slate Detail #405168 for handles and timestamps. Reserve Bluesky Blue #006aff for the primary action and selected states. Define columns and post boundaries with fine Divider Gray #dce2ea lines; use Soft Mist #f9fafb and Cloud Gray #f2f2f2 only for subtle supporting surfaces. Use Inter or InterVariable throughout, with compact navigation and clear creator-name emphasis. Keep the outer rails sparse, place search and trending utilities to the right, and let posts expand naturally around their content. Display user media inline without a shared filter, heavy shadow, or decorative frame.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Three-column desktop shell with a central, vertically scrolling timeline and sparse left and right utility rails. | Feed discovery, Post engagement, Account sign-in, Trending search | Tabbed feed header, Avatar-led post rows, Inline media, Fine column dividers, Compact utility cards |

## Source CSS custom properties (selected)

```css
--text: black;
--background: white;
--backgroundLight: #DCE2EA;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/bsky-app