Communication / iOS / Android / Web

Bluesky

Bluesky tints every neutral toward its one strong blue and drives iOS, Android and web from a single token ladder, with light, dark and dim themes made by inverting the palette.

Download
  • #006AFF
  • #59B9FF
  • #EFF2F6
  • #111822
  • #09B35E
  • #E91646

Color

Every color token in the file, grouped by role.

Brand

  • primary#006AFF
  • primary hover#0059D6
  • primary active#0048AD
  • primary wash#E5F0FF
  • primary soft#CCE1FF
  • primary sky#59B9FF
  • primary brand#1085FE
  • primary deep#054CFF
  • on primary#FFFFFF
  • ink secondary#526580
  • dark ink secondary#8798B0
  • dark primary#006AFF

Surfaces

  • paper#FFFFFF
  • canvas#F9FAFB
  • surface tint#EFF2F6
  • dark bg#000000
  • dark surface#111822
  • dark surface raised#19222E

Text

  • ink#111822
  • ink muted#667B99
  • pink#EC4899
  • dark ink#FFFFFF

Lines

  • divider#DCE2EA
  • border strong#C0CAD8
  • dark divider#232E3E

Status

  • positive#09B35E
  • negative#E91646

More

  • yellow#FFC404

Typography

Each style is set with the file's own family, size, weight and spacing.

  • InterOpen font, shown as published.
  • display30px / 800 / 1.2

    Bluesky

  • title20.6px / 700 / 1.25

    Pack my box with five dozen liquor jugs

  • body15px / 400 / 1.35

    The quick brown fox jumps over the lazy dog

  • body small13.1px / 400 / 1.35

    The quick brown fox jumps over the lazy dog

  • label15px / 600 / 1.2

    Continue to checkout

Shape

Corner radius tokens.

  • xs4px
  • sm8px
  • md12px
  • lg16px
  • xl20px
  • pill999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg20px
  • xl24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • card
    card
  • tinted card
    tinted-card
  • card dark
    card-dark
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 107 lines
version: alpha
name: Bluesky-design-analysis
description: "A social app built on its own token system: a blue-tinted gray scale from white to black, one saturated blue (#006aff) used for links, buttons and selection, Inter type on a 1.125 type ladder, and full dark and dim themes. The same atoms and tokens produce iOS, Android and web."
status: Draft
appVersion: "source snapshot of the public app source and its design tokens, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#006aff"
  primary-hover: "#0059d6"
  primary-active: "#0048ad"
  primary-wash: "#e5f0ff"
  primary-soft: "#cce1ff"
  primary-sky: "#59b9ff"
  primary-brand: "#1085fe"
  primary-deep: "#054cff"
  on-primary: "#ffffff"
  ink: "#111822"
  ink-secondary: "#526580"
  ink-muted: "#667b99"
  paper: "#ffffff"
  canvas: "#f9fafb"
  surface-tint: "#eff2f6"
  divider: "#dce2ea"
  border-strong: "#c0cad8"
  positive: "#09b35e"
  negative: "#e91646"
  pink: "#ec4899"
  yellow: "#ffc404"
  dark-bg: "#000000"
  dark-surface: "#111822"
  dark-surface-raised: "#19222e"
  dark-divider: "#232e3e"
  dark-ink: "#ffffff"
  dark-ink-secondary: "#8798b0"
  dark-primary: "#006aff"

typography:
  display:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.2
  title:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 20.6px
    fontWeight: 700
    lineHeight: 1.25
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.35
  body-small:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 13.1px
    fontWeight: 400
    lineHeight: 1.35
  label:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 20px
  xl: 24px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    height: 44px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px
  tinted-card:
    backgroundColor: "{colors.primary-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px
  card-dark:
    backgroundColor: "{colors.dark-surface}"
    textColor: "{colors.dark-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px

Overview

Bluesky is an open social network app with a familiar timeline where feed selection sits in top-level tabs that people switch between during the day. [Observed]

What defines the look:

  1. A blue-tinted gray scale. Grays run #ffffff, #f9fafb, #eff2f6, #dce2ea up to #232e3e, #19222e, #111822, #000000, so neutrals feel cool and match the blue. [Measured]
  2. One strong blue. #006aff marks links, buttons and selection, with #0059d6 hover and #0048ad pressed, and gradients from #054cff through #1085fe to #59b9ff for brand moments. [Measured]
  3. Three themes. Light, dark and a softer dim theme, produced by inverting the palette. [Measured]
  4. A fixed token ladder. Space, radius and font size are named steps (xs to 5xl) used everywhere through atoms. [Measured]

Source for this file: the public app source and its published design tokens, read on 2026-10-06. The bsky.app web client uses the same design, so no separate web stylesheet was read. No on-device capture was done. See Known Gaps.

Core

Colors

RoleLightDarkWhere
Background#ffffff#000000ALF palette
Card and soft background#f9fafb#111822
Tinted surface#eff2f6#19222e
Divider (contrast 100)#dce2ea#232e3e
Strong border (contrast 200)#c0cad8not read
Muted text (contrast 500)#667b99#667b99 (the middle step mirrors to itself)
Secondary text (contrast 600)#526580#8798b0 (mirrors contrast 400)
Text#111822#ffffff
Primary#006aff#006aff (primary 500 mirrors to itself)
Primary hover and pressed#0059d6, #0048adnot read
Primary wash and soft#e5f0ff, #cce1ffnot read
Positive#09b35enot read
Negative#e91646not read

Values are [Measured] from the ALF palette. The dark column is the palette inverted by the package, so each dark value is the matching light step flipped. The dim theme uses a second, softer palette (primary #0f73ff, text #1c2736 end of scale) whose values were only partly read. Gradient names include primary, sky, midnight, sunrise, sunset, summer, nordic and bonfire. [Measured]

Typography

Inter is bundled for the native apps (weights Black through Regular), and the web font stack is the system UI stack. [Measured] The size ladder is 9.4, 11.3, 13.1, 15, 16.9, 18.8, 20.6, 24.3, 30 and 37.5px, a 1.125 step, and the user can scale text by about 6 percent down or up, and choose the font family. [Measured]

Shape and spacing

Radius steps: 2, 4, 8, 12, 16, 20 and a full 999. Space steps: 2, 4, 8, 12, 16, 20, 24, 28, 32 and 40. [Measured] Shadows come in five sizes (xs to xl) on the theme. [Measured] Which radius each component uses was not mapped, so the component radii in the front matter are inferred. [Inferred]

Iconography and motion

Custom outline and filled icons, with the active tab icon filled. [Inferred] Motion values were not measured.

Themes

Light, dark and dim, plus a user-chosen accent behavior for labelers and a font scale setting. [Measured]

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Native stack navigation with swipe-back. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar (home, search, messages, notifications, profile). The home tab holds feed tabs at the top. Not confirmed from source. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A compose action, shown as a floating button on mobile. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Bottom sheets and dialogs from a shared component set, plus toasts. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Custom controls built from the shared atoms rather than stock iOS controls. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

An in-app font scale and font choice, and likely system scaling too. Which is respected was not checked. [Measured for the setting, Inferred for system scaling]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not verified. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Custom icons, not SF Symbols. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Accounts are handle and password on the protocol. Guideline 4.8 and in-app account deletion were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

Because the code is shared, iOS follows the Android and web design rather than the other way around. It keeps native navigation behavior but not stock controls. [Inferred]

Platform: Android

How the Android app looks and behaves. Items come from public source files.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

The same bottom tab bar as iOS. [Inferred]

Main action

Expected on Android: Floating action button.

A floating compose button. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

The shared bottom sheet and dialog components. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Custom controls from ALF atoms. [Inferred]

Text sizing

Expected on Android: Font scale.

A separate unused-fonts file exists for Android, and a font scale setting. System scale behavior was not checked. [Measured for the file]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not verified. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Custom icons shared with iOS. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Account deletion and the data safety form were not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

Shared design, so Android does not use Material components. Deliberate cross-platform sameness rather than platform fidelity. [Inferred]

Platform: Web

The bsky.app client uses the same design as the mobile apps. No separate stylesheet was read.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back and in-app links, with a left column on wide screens. [Inferred]

Primary navigation

Expected on Web: Top nav or sidebar.

A left rail on desktop and tabs on narrow screens. [Inferred]

Main action

Expected on Web: Page-level button.

A compose button in the rail on desktop. [Inferred]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Dialogs and toasts from the shared components. [Inferred]

Controls

Expected on Web: Native or custom.

The same custom controls. [Inferred]

Text sizing

Expected on Web: Browser zoom.

Web font stack is system-ui first. Sizes are px so they follow zoom. [Measured for the stack]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

The same icon set. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Handle and password sign-in. [Inferred]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A responsive layout from shared components, with react-native-web styles. [Inferred]

Cross-platform consistency

Consistent across platforms: tokens, atoms, themes and components, because the design is shared. [Measured]

Intentionally different: the web uses the system font stack while native apps use Inter, and the layout adds a side rail on wide screens. [Measured for fonts, Inferred for layout]

Do's and Don'ts

Do

  • Use the named ladders for space, radius and font size.
  • Tint neutrals toward the brand blue.
  • Offer light, dark and dim themes.
  • Use gradients only for brand moments.

Don't

  • Don't use raw hex in components. Use theme atoms so dark and dim work.
  • Don't use more than one saturated blue for actions.
  • Don't stack heavy shadows. There are five fixed sizes.

Known Gaps

  • No on-device capture was done. All statements come from reading source and a token package.
  • Which radius and spacing step each component uses was not mapped, so component radii are inferred.
  • Dim theme values, dark values for hover and strong border, and motion were not read in full.
  • Screen structure (tabs, compose button) is common knowledge and was not confirmed in source.
  • Account deletion and store policy rules were not verified.