Bsky Design System Deep Dive

1. Brand Overview

Bsky’s visual language is stripped down, functional, and purpose-driven. No ornamental fluff. The site feels like it's designed for people who value clarity over decoration — the type who want to quickly scan, click, and move on. This is not a brand chasing aesthetic trends; it's one that has locked into a pragmatic, modern UI that gets out of the way.

The brand’s vibe is calm but confident. The palette leans on a single strong blue (#006aff) for primary actions, paired with cool grays and neutral whites. This blue isn’t playful — it’s precise. It’s the kind of color you’d expect in a productivity tool or developer platform. It says: “Click me, this matters.”

Typography is equally workhorse-like. Everything runs through InterVariable, a versatile sans-serif optimized for UI work. No fancy display fonts. No experiments in letter spacing. Just clean, system-friendly text with fallback stacks to keep things consistent across OS environments. That tells you the priority here: function over form.

Spacing follows an 8px grid (with some smaller increments for micro-alignment). Border radii have a clear pattern: small radii for containers, extreme pill shapes (999px) for interactive elements. Shadows? None in default states — depth is handled with borders and focus outlines. That reinforces the flat, controlled aesthetic.

This design system is for people building something serious — a social network with a technical backbone. The UI says “trust me” without shouting. It’s approachable but not casual. The exactness in component specs makes it easy to scale without losing consistency. Every pixel feels accounted for.

2. Color System

2.1 Primary Colors

The core brand color is #006aff — RGB(0, 106, 255). This is the only saturated hue in the palette, used for CTAs, links, and primary buttons. It’s bright enough to stand out against the dominant neutral backgrounds, but not neon. Psychologically, it’s a “tech blue” — associated with reliability and digital clarity.

Compared to competitors, this blue is more vivid than Twitter’s lighter blue and less corporate than LinkedIn’s darker tone. It’s closer to a developer tool’s accent color, which fits Bsky’s identity as a network with openness and control baked in.

2.2 Complete Palette

CSS variables also include:

• --rc-border-color: #ffffffb3 — semi-transparent white for overlay borders
• --rc-focus-color: #08f — pure bright blue for focus outlines
• --text: #000 — main text color
• --rc-drag-handle-bg-colour: #0003 — transparent black for draggable UI handles

2.3 Color Relationships

Contrast is solid across the board. Black (#000000) on off-white (#f9fafb) is far beyond WCAG AA minimums. Primary blue (#006aff) on white also passes easily, though text on blue buttons is black here — an unusual choice. This works because the blue is bright enough to keep black readable, but it’s unconventional (most brands go white text on blue).

Borders in light gray (#dce2ea) keep separation subtle without breaking the flat feel. The gray text colors (#667b99 and #405168) are muted enough for hierarchy but still readable on white backgrounds.

2.4 Usage Guide

• Use #006aff only for interactive elements — buttons, links, focus states.
• Keep #000000 for all primary text and icons.
• Use #667b99 and #405168 for secondary information — never for primary copy.
• Borders should stick to #dce2ea for consistency.
• Avoid mixing #006aff with #405168 in text — low contrast between saturated blue and dark gray.
• Backgrounds: Use #f9fafb for cards and panels, pure white for page backgrounds.

3. Typography

3.1 Font Families

Every text style uses InterVariable — a flexible sans-serif optimized for UI. Fallbacks include -apple-system, system-ui, Segoe UI, Roboto, Liberation Sans, Helvetica, Arial or emoji-safe stacks when needed. No Google Fonts or Adobe Fonts — likely self-hosted.

This choice is pragmatic: Inter is legible at small sizes, has consistent metrics across platforms, and supports variable weights for fine-tuning.

3.2 Type Scale

3.3 Hierarchy

Hierarchy is subtle here. Headings aren’t dramatically larger than body text — often the same size but heavier weight. This keeps the UI compact and data-dense, ideal for feeds and lists. Links at 15px/600 carry enough weight to stand out without increasing size. Captions at 13.1px keep metadata small but readable.

No oversized display text means content density stays high. This works for a social app where scanning multiple posts quickly matters.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, with smaller increments (1px, 2px, 3px, 4px, 5px, 6px) for micro-alignment.

Common values:

• 5px — extremely common (504 uses), for tight padding in components.
• 8px — primary unit for button padding, section gaps.
• 4px, 2px — fine-tuning, icon spacing.
• Larger jumps: 20px, 32px for layout blocks.
• Rare large spaces: 138.75px, 321.875px, 386px+, likely for hero sections or modal positioning.
• Max container width is not explicitly defined, but one breakpoint at 600px exists — likely mobile-first, scaling up.

4.2 Layout

The single breakpoint (600px) suggests minimal complexity — stack elements vertically on mobile, align horizontally on desktop. No evidence of complex grid frameworks — spacing tokens drive layout.

5. Visual Elements

Border Radius System:

• 4px — small containers.
• 6px — inputs.
• 9px, 12px — common for cards and panels.
• 21px — larger pill-like elements.
• 999px — full pill buttons, avatars.

Shadows: None in default states — flat design. Depth comes from borders and focus outlines.

Borders:

• 1px solid #dce2ea — standard divider.
• Top-only borders (1px 0px 0px) for list items.
• Occasional #c0cad8 borders for subtle variation.

6. Components

6.1 Buttons

Variant 1 — Neutral Flat

• Default: bg #f9fafb, text #000000, padding 0, radius 0, border none.
• Focus: box-shadow rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.2) 0px 0px 0px 2px.

Variant 2 — Neutral Pill

• Default: bg white, text black, radius 999px, border 1px solid #dce2ea.
• Focus: same shadow as above.

Variant 3 — Primary Pill

• Default: bg #006aff, text black, padding 8px 14px, radius 999px, border none.
• Focus: same shadow.

Variant 4 — Secondary Pill

• Default: bg #eff2f6, text black, padding 8px 14px, radius 999px, border none.
• Focus: same shadow.

6.2 Links

Three link colors:

• Black (#000000) — default text links.
• Dark gray (#405168) — muted links.
• Blue (#006aff) — primary links.

No underline by default. Hover states not defined — likely color change or underline added via JS.

6.3 Forms

Text input:

• bg white, text black, radius 6px, padding 5px 4px 5px 8px, border none. No hover/focus styles in extracted data — possible minimal change or handled via app logic.

6.4 Cards

No explicit card component extracted, but given the border and radius patterns, cards likely use 9px or 12px radius, #f9fafb background, and 1px solid #dce2ea border.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-gray-medium: #667b99;
  --color-gray-dark: #405168;
  --color-gray-light: #dce2ea;
  --color-blue-primary: #006aff;
  --color-off-white: #f9fafb;
  --rc-border-color: #ffffffb3;
  --rc-focus-color: #08f;
  --text: #000000;
  --rc-drag-handle-bg-colour: #0003;

  /* Typography */
  --font-family-ui: InterVariable, -apple-system, system-ui, Segoe UI, Roboto, Liberation Sans, Helvetica, Arial;
  --font-size-lg: 16px;
  --font-size-md: 15px;
  --font-size-sm: 13.1px;
  --line-height-tight: 1.00;
  --line-height-normal: 1.13;
  --line-height-loose: 1.60;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-20: 20px;
  --space-32: 32px;
  --space-138: 138.75px;
  --space-321: 321.875px;
  --space-386: 386.25px;
  --space-411: 411.734px;
  --space-515: 515px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-input: 6px;
  --radius-md: 9px;
  --radius-card: 12px;
  --radius-lg: 21px;
  --radius-full: 999px;

  /* Borders */
  --border-standard: 1px solid #dce2ea;
  --border-light: 1px solid #c0cad8;
}

8. AI Coding Assistant Prompt

# Bsky Design System Specification

You are a Bsky design expert. Build UIs matching their visual language exactly.

## Brand Context
Bsky’s design philosophy is functional minimalism. Flat surfaces, precise spacing, and a single vivid blue accent define the look. Typography is clean and compact, optimized for dense content layouts.

## Color Palette
- Black: #000000 — Primary text, icons
- Gray Medium: #667b99 — Secondary text
- Gray Dark: #405168 — Tertiary text, muted links
- Gray Light: #dce2ea — Borders, dividers
- Primary Blue: #006aff — CTAs, links, primary buttons
- Off White: #f9fafb — Card backgrounds, neutral buttons
- Border Overlay: #ffffffb3 — Semi-transparent overlay borders
- Focus Blue: #08f — Focus outlines
- Drag Handle BG: #0003 — Draggable UI handles

## Typography
Font family: InterVariable, -apple-system, system-ui, Segoe UI, Roboto, Liberation Sans, Helvetica, Arial

| Element     | Size  | Weight | Line Height | Use |
|-------------|-------|--------|-------------|-----|
| heading-1   | 16px  | 400    | —           | Page titles |
| link-lg     | 16px  | 400    | —           | Body links |
| button-lg   | 16px  | 400    | —           | Primary buttons |
| link-md-bold| 15px  | 600    | 1.13        | Emphasized links |
| link-md     | 15px  | 400    | 1.13        | Secondary links |
| heading-md  | 15px  | 500    | 1.00        | Section headings |
| button-md   | 15px  | 400    | 1.60        | Secondary buttons |
| caption     | 13.1px| 400    | 1.00        | Metadata |

## Spacing & Grid
Base: 8px grid.  
Tokens: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 11px, 12px, 13px, 14px, 20px, 32px, 138.75px, 321.875px, 386.25px, 411.734px, 515px.

## Border Radius
- none: 0px — tables, flat elements
- sm: 4px — small containers
- input: 6px — text inputs
- md: 9px — cards
- card: 12px — panels
- lg: 21px — larger pills
- full: 999px — pill buttons, avatars

## Shadows & Depth
Flat design. No default shadows. Use borders and focus outlines for depth.

## Components

### Primary Button
Default:
```css
background: #006aff;
color: #000000;
padding: 8px 14px;
border-radius: 999px;
border: none;
font-weight: 400;
font-size: 16px;
```
Focus:
```css
box-shadow: rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.2) 0px 0px 0px 2px;
```

### Secondary Button
Default:
```css
background: #eff2f6;
color: #000000;
padding: 8px 14px;
border-radius: 999px;
border: none;
font-weight: 400;
font-size: 16px;
```
Focus: same as primary.

### Neutral Pill Button
Default:
```css
background: #ffffff;
color: #000000;
border: 1px solid #dce2ea;
border-radius: 999px;
padding: 0;
```

### Input Field
```css
background: #ffffff;
color: #000000;
border: none;
border-radius: 6px;
padding: 5px 4px 5px 8px;
```

### Links
- Black: default text links
- Dark gray: muted links
- Blue: primary links  
No underline by default.

## Layout & Responsive Rules
- Breakpoint at 600px — stack vertically below this width.
- Maintain multiples of 8px for spacing.
- Use max widths defined by component context — no global container cap found.

## Interaction Rules
- Transitions: 150ms ease for state changes.
- Focus indicators: always visible using focus blue or shadow.
- No hover shadows — rely on color changes.

## DO
- Use ONLY colors from the palette
- Maintain 8px grid spacing
- Keep text black on blue buttons
- Use InterVariable for all text
- Apply consistent border radii

## DON'T
- Add custom shadows
- Mix unrounded and rounded corners
- Use white text on blue buttons
- Override palette with random grays

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #006aff;
  color: #000;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  font-weight: 400;
  font-size: 16px;
}
.btn-primary:focus {
  box-shadow: rgba(0,0,0,0.1) 0px 4px 12px, rgba(0,0,0,0.2) 0px 0px 0px 2px;
}
```

Card:
```css
.card {
  background: #f9fafb;
  border: 1px solid #dce2ea;
  border-radius: 9px;
  padding: 8px;
}
```

Input:
```css
.input {
  background: #fff;
  color: #000;
  border-radius: 6px;
  padding: 5px 4px 5px 8px;
  border: none;
}
```

9. Summary

TL;DR — Bsky’s design system is flat, functional, and ruthlessly consistent. One vivid blue drives interaction, everything else is grayscale. InterVariable keeps text tight and legible. Spacing is precise, radii are deliberate, and there’s zero visual noise.

Brand Keywords:

• tech-minimalist
• blue-accent
• flat-precision
• content-dense
• functional-ui