Bitsy specimen

Overview

Project settings

One page of real UI patterns, styled only by tokens. Switch the appearance above to compare directions.

Monthly active users

12,480

+8.2% from last month

Open issues

37

+5 this week

Deploys

214

On track

Forms and controls

Buttons and fields share one height scale (sm 32, md 40, lg 44) and one focus ring.

Personal info

Update your photo and personal details.

We only use this for account notices.

Use letters, numbers, and dashes only.

Button scale

Data table

Plain <table> markup with base styles only.

NameStatusRoleLast active
Olivia RhyeActiveProduct designer2 minutes ago
Phoenix BakerActiveEngineer1 hour ago
Lana SteinerSuspendedProduct manager3 days ago
Demi WilkinsonInvitedFrontendNever

Type scale

Product profile. Each size ships with a paired line height and tracking.

2xl

Display heading

xl

Page title

lg

Section title

md

Card title

body

Body copy for reading and forms

sm

Supporting text, controls, tables

xs

Captions and table headers

Content

Semantic HTML with no classes.

Release notes

This release moves the foundation to two token tiers. Primitive palettes feed a small semantic layer, and Bits read only that layer. Press ⌘ K to search, or set data-bitsy-appearance on any container.

Tokens are the interface. Appearances are just data.

  • Spacing on a 4px grid
  • Radius and shadow scales with semantic picks
  • sm, md, and lg control sizes
What changed for existing overrides?

Overrides of --bitsy-color-accent still work in your own CSS, but Bits now read the semantic names.

Color

Tier 1 palettes (12 steps, generated in OKLCH) and the tier 2 semantic tokens that Bits use.

gray
brand
error
warning
success
Canvas
Surface
Subtle
Brand solid
Brand subtle
Border
Text tertiary
Text primary