# Bluesky Social — Style Reference
> Crisp white canvas, quiet blue accent. The layout feels like a well-organized corkboard of fleeting thoughts and visual snippets, neatly pinned and easily digestible.
**Theme:** light
Bluesky Social presents as a polished, no-nonsense social platform with a quiet confidence. The dominant achromatic palette of crisp whites and deep blacks, accented by a singular, bright blue, conveys focus on content rather than interface flourish. Consistent tight spacing and subtle border treatments maintain a sense of order while allowing user-generated content to take center stage.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, dialogs, primary surfaces |
| Ebony Text | `#000000` | `--color-ebony-text` | Body text, primary headings, essential UI elements for maximum legibility |
| Sky Blue | `#006aff` | `--color-sky-blue` | Interactive elements, primary call-to-action buttons, active states, links — signaling interactive affordances with a burst of color on an otherwise monochrome canvas |
| Horizon Gray | `#dce2ea` | `--color-horizon-gray` | Subtle borders, dividers, inactive states, subtle backgrounds for content separation without harsh lines |
| Cloud Cover | `#f9fafb` | `--color-cloud-cover` | Secondary background surfaces, subtle elevation differences, card backgrounds |
| Ghost Button Background | `#eff2f6` | `--color-ghost-button-background` | Background for secondary buttons, search bars, and interactive components that require a soft, non-intrusive fill |
| Slate Text | `#405168` | `--color-slate-text` | Secondary text, metadata, tooltips — providing hierarchical differentiation from primary text |
| Steel Icon | `#667b99` | `--color-steel-icon` | Default iconography, less emphasized UI elements — receding into the background without disappearing |
| Icon Gray | `#8798b0` | `--color-icon-gray` | Subtle icons, inactive states on interactive elements |
## Tokens — Typography
### InterVariable — The primary and only typeface, covering all text elements from small captions to large headlines. Its high legibility and variable nature allow for precise visual hierarchy and density control within a minimalist interface. · `--font-intervariable`
- **Substitute:** Inter
- **Weights:** 400, 500, 600, 700
- **Sizes:** 11px, 12px, 13px, 15px, 16px, 24px
- **Line height:** 1.00, 1.13, 1.20, 1.25, 1.30, 1.33
- **Role:** The primary and only typeface, covering all text elements from small captions to large headlines. Its high legibility and variable nature allow for precise visual hierarchy and density control within a minimalist interface.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 11px | 1.25 | — | `--text-caption` |
| body-sm | 12px | 1.25 | — | `--text-body-sm` |
| body | 13px | 1.25 | — | `--text-body` |
| body-lg | 15px | 1.25 | — | `--text-body-lg` |
| heading-sm | 16px | 1.25 | — | `--text-heading-sm` |
| heading | 24px | 1.25 | — | `--text-heading` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** compact
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
### Border Radius
| Element | Value |
|---------|-------|
| cards | 12px |
| inputs | 0px |
| avatars | 999px |
| buttons | 999px |
### Layout
- **Section gap:** 24px
- **Element gap:** 4px
## Components
### Primary Navigation Button
**Role:** Primary Call to Action
Ghost Button style with `Sky Blue` (#006aff) background on hover/active, `Ebony Text` (#000000) for text. Fully rounded `999px` corners, `8px` vertical and `14px` horizontal padding. Example: 'Create account'.
### Secondary Navigation Button
**Role:** Secondary Action
Ghost Button style, `Ghost Button Background` (#eff2f6) background on hover/active, `Ebony Text` (#000000) for text. Fully rounded `999px` corners, `8px` vertical and `14px` horizontal padding. Example: 'Sign in'.
### Interactive Icon Button
**Role:** Icon-only interaction
Transparent background, `Ebony Text` (#000000) for icon color. Small `4px` padding around the icon. Fully rounded `999px` corners, often used for like/comment actions. Example: numbers next to action icons ('111', '251').
### Reply/Like Count Button
**Role:** Text and Icon interaction
Transparent background, `Ebony Text` (#000000) for text. No border, `0px` radius. No padding, allowing text to be close to the icon. Example: '111'.
### Search Input
**Role:** Site-wide search
Transparent background, `Ebony Text` (#000000) placeholder. No border, `0px` radius. `11px` vertical and `4px` horizontal padding. Unobtrusive design integrates seamlessly into the header.
### Post Card
**Role:** Individual content unit
White background, distinct from `Cloud Cover` secondary backgrounds. Rounded `12px` corners. No explicit border, relies on surrounding negative space. Internal padding varies, often `10px` for left/right content.
### Trending Card
**Role:** Sidebar information display
White background, `12px` rounded corners. No border. Contains lists of items with `Ebony Text` and `Sky Blue` links.
### Avatar Display
**Role:** User identification
Circular `999px` radius, contains user imagery. Often appears with a `1px` margin or tight spacing to surrounding text.
### Hash Tag Link
**Role:** Categorization and navigation
`Sky Blue` (#006aff) text with no underline, appearing as interactive labels. This color highlights its function as a clickable element within body copy, directing users to related content.
## Do's and Don'ts
### Do
- Prioritize `Ebony Text` (#000000) on `Canvas White` (#ffffff) or `Cloud Cover` (#f9fafb) for all primary text content to ensure maximum readability.
- Use `Sky Blue` (#006aff) exclusively for interactive elements like links, buttons, and active states to provide clear affordances and maintain brand identity.
- Apply `999px` border-radius to all primary and secondary buttons, as well as avatar images, to create a consistent soft, approachable aesthetic.
- Maintain a clear visual hierarchy using `Slate Text` (#405168) or `Steel Icon` (#667b99) for secondary information, metadata, and non-actionable icons.
- Utilize `Horizon Gray` (#dce2ea) for subtle dividers and borders to separate content sections without introducing heavy visual elements, supporting the light aesthetic.
- Employ the `InterVariable` typeface consistently across all text elements, leveraging its weights (400, 500, 600, 700) to establish type hierarchy and emphasis.
### Don't
- Do not introduce additional vibrant colors; rely solely on `Sky Blue` (#006aff) as the primary accent color.
- Avoid hard-edged rectangular containers for interactive elements; favour the `999px` pill shape for buttons and avatars.
- Do not use shadows for elevation or depth; rely on background color changes (e.g., `Canvas White` on `Cloud Cover`) and explicit borders (`Horizon Gray`) for differentiation.
- Avoid excessive padding around embedded interactive elements like reply/like counts; use a minimal `4px` element gap for a compact interface.
- Do not use custom fonts other than `InterVariable`; this maintains the consistent, modern typographic voice.
- Never use dark backgrounds for main content areas; maintain the light theme with `Canvas White` (#ffffff) as the dominant background color.
## Imagery
Imagery predominantly consists of user-generated content: photography and digital art, which are displayed as unmasked, raw-edged squares or rectangles within post cards. There's no consistent 'brand' photography or illustration style imposed on user content. Icons are outline-style, `Steel Icon` (#667b99) by default, and `Ebony Text` (#000000) or `Sky Blue` (#006aff) for active states. These icons are functional, minimal, and visually consistent, serving purely interface purposes rather than decorative ones. The overall impression is image-heavy due to user posts, but the platform's own UI is image-minimal.
## Agent Prompt Guide
### Quick Color Reference
- Text: #000000 (Ebony Text)
- Background: #ffffff (Canvas White)
- CTA: #006aff (Sky Blue)
- Border: #dce2ea (Horizon Gray)
- Secondary Background: #f9fafb (Cloud Cover)
### 3-5 Example Component Prompts
1. Create a `Primary Navigation Button` labeled 'Create account': background `Sky Blue` (#006aff), text `Ebony Text` (#000000), `999px` radius, `8px 14px` padding, font `InterVariable` weight 400 size 15px.
2. Design a `Post Card`: `Canvas White` (#ffffff) background, `12px` radius. Inside, use `Ebony Text` (#000000) for usernames at `InterVariable` weight 600 size 15px, and `Slate Text` (#405168) for timestamps at `InterVariable` weight 400 size 13px. Include an `Interactive Icon Button` for 'like' with `Steel Icon` (#667b99) color and `4px` padding.
3. Implement a `Trending Card` section: background `Canvas White` (#ffffff), `12px` radius. Headline 'Trending' in `Ebony Text` (#000000) `InterVariable` weight 700 size 16px. List items with `Sky Blue` (#006aff) links using `InterVariable` weight 400 size 13px, separated by `3px` row gaps.
4. Construct a `Search Input` field: transparent background, `Ebony Text` (#000000) placeholder, `0px` border-radius, `11px` vertical and `4px` horizontal padding.
## Similar Brands
- **X (formerly Twitter)** — Similar white background, tight spacing, and content-first approach with a single accent color for interactive elements.
- **Mastodon** — Decentralized social platform with a similar focus on user-generated posts and a clean, functional UI, albeit often allowing for more color customization.
- **Threads** — Modern social app with a clear, light theme, emphasizing text and image posts in a vertical feed, marked by subtle borders and minimal UI flourishes.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-canvas-white: #ffffff;
--color-ebony-text: #000000;
--color-sky-blue: #006aff;
--color-horizon-gray: #dce2ea;
--color-cloud-cover: #f9fafb;
--color-ghost-button-background: #eff2f6;
--color-slate-text: #405168;
--color-steel-icon: #667b99;
--color-icon-gray: #8798b0;
/* Typography — Font Families */
--font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 11px;
--leading-caption: 1.25;
--text-body-sm: 12px;
--leading-body-sm: 1.25;
--text-body: 13px;
--leading-body: 1.25;
--text-body-lg: 15px;
--leading-body-lg: 1.25;
--text-heading-sm: 16px;
--leading-heading-sm: 1.25;
--text-heading: 24px;
--leading-heading: 1.25;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
/* Layout */
--section-gap: 24px;
--element-gap: 4px;
/* Border Radius */
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 21px;
--radius-full: 999px;
/* Named Radii */
--radius-cards: 12px;
--radius-inputs: 0px;
--radius-avatars: 999px;
--radius-buttons: 999px;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-canvas-white: #ffffff;
--color-ebony-text: #000000;
--color-sky-blue: #006aff;
--color-horizon-gray: #dce2ea;
--color-cloud-cover: #f9fafb;
--color-ghost-button-background: #eff2f6;
--color-slate-text: #405168;
--color-steel-icon: #667b99;
--color-icon-gray: #8798b0;
/* Typography */
--font-intervariable: 'InterVariable', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 11px;
--leading-caption: 1.25;
--text-body-sm: 12px;
--leading-body-sm: 1.25;
--text-body: 13px;
--leading-body: 1.25;
--text-body-lg: 15px;
--leading-body-lg: 1.25;
--text-heading-sm: 16px;
--leading-heading-sm: 1.25;
--text-heading: 24px;
--leading-heading: 1.25;
/* Spacing */
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
/* Border Radius */
--radius-md: 4px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 21px;
--radius-full: 999px;
}
```
Minimalist Content Stream
High-contrast information stream
Polaroid on white linen: clean,…

Sky Blueprint on Bright Paper –…
Expansive sky, clean canvas.
Cosmic playful precision. Imagine…
Warm, Crisp Canvas
Soft-focus intellectual ether.

Analytical Blueprint on Pure…

Monochrome terminal with amber…
Violet accented white canvas. Pure…
Clean blueprint with friendly…
monochrome digital canvas,…

Pristine Digital Workspace. A…
architectural blueprint on dark…
Galactic Command Center. Deep…

Crisp developer console

Architectural Blueprint;…
Architectural Blueprint on White…
Sky-bound clarity