One bit set.

A bit is the smallest thing that can change everything. b1t owns that image: a quiet field of zeros and exactly one lit cell. Every surface, from the mark to the loading spinner, is drawn from this single idea.

Signal over noise

One accent color, used rarely. If two things are orange, neither is the signal.

Dark field, bright mark

The default world is near-black. Light mode exists for print and documents and inverts the field, not the idea.

Precision, not decoration

Grids are real, numbers are tabular, spacing is on a 4px scale. Nothing is placed by eye.

Logo

The mark is a 2×2 bit field with the top-right bit set. The wordmark is Geist Bold, outlined to paths, with the 1 lit in the accent. Together they form the lockup.

Lockup, dark field

Lockup, light field

Mark alone, 16px minimum

One-color wordmark on accent

Construction

64 unit canvas. Cells 28, gap 4, radius 6. Unset cells stroke 3, drawn inside the cell box.

Clear space x equals the height of the mark, on all sides. Minimum lockup width 80px.

Do not

Recolor the lit bit

Set a second bit

Rotate or skew

Outline the lit bit

Color

Three families: the dark field, the paper, and one signal. Semantic tokens map them per theme, so components never name a primitive. Flip the theme in the sidebar to see both mappings.

Primitives

Void--voidDefault background

Ink--inkRaised surface

Ink 2--ink-2Hover surface

Line--lineHairline borders

Line strong--line-strongControl borders

Mute--muteSecondary text on dark

Paper--paperText on dark, light background

Sand--sandBorders on light

Signal--signalThe one accent

Signal hot--signal-hotAccent hover on dark

Signal deep--signal-deepAccent as text on light

OK--okSuccess only

Warn--warnCaution only

Error--errFailure only

Proportion

A b1t surface is mostly field. The accent is a single lit bit: aim for under five percent of any viewport.

Contrast, current theme

Measured live from the computed tokens. Body text needs 4.5:1, large text and UI edges 3:1.

Pair	Foreground	Background	Ratio	Result
Body text
Secondary text, placeholder
Secondary text on surface
Accent as text
Label on accent button
Control border
Error text
Success text

Typography

Geist for everything people read. Geist Mono only for code, data, and measurement, never as a costume for "technical". Both are self-hosted variable fonts. No other family appears anywhere.

Aa

Geist, weights 400 to 700. Features ss01 (single-storey a) and cv11 on.

0 1

Geist Mono, weights 400 to 600. Features tnum and zero (slashed zero) on.

Scale

--fs-displayOne bit set

--fs-4xl 48One bit set

--fs-3xl 36Everything starts with one bit

--fs-2xl 28Everything starts with one bit

--fs-xl 22Everything starts with one bit

--fs-lg 18The lede sits here, one size above body, in the secondary color.

--fs-md 16Body text. Measure 65 to 75 characters, line height 1.5.

--fs-sm 14Labels, hints, buttons, table cells.

--fs-xs 12Badges, readouts, captions.

Rules

Display tops out at 6rem. Tracking never goes below -0.04em; headings use -0.03em, subheads -0.015em.
Headings are balanced (text-wrap: balance), paragraphs are pretty-wrapped and capped at 68ch.
Weight steps are obvious: 400 body, 500 labels, 600 headings, 700 display. Nothing in between.
Numbers in tables and readouts are tabular (.num). Prose numbers are proportional.
The brand name is always lower case: b1t. Never B1T, Bit, or b1t with a styled 1 in running text.

Space & shape

A 4px base. Tight inside a group, generous between groups, more above a heading than below it.

--s14

--s28

--s312

--s416

--s524

--s632

--s748

--s864

--s996

--s10128

Radius

--r1 4Badges' inner bits, focus rings

--r2 8Buttons, inputs

--r3 12Panels

--r4 16Dialogs, large media

--r-fullPills, toggles

Layout

Container 72rem, gutter clamp(1.25rem, 4vw, 3rem). Content columns on a 12 column grid with a 24px gap.
Borders are 1px and always a token. Shadows carry offset and blur (--shadow-1, --shadow-2); a flat colored halo is not depth.
Panels hold content, they are not the page structure. A panel never contains another panel.

Components

Shipped in ui.css, built only from tokens. Every control has hover, focus, disabled, and where it applies, loading and error. Focus is a 2px accent outline, offset 2px, on every element.

Buttons

One primary per view. Labels name the action, not the widget: "Join the waitlist", never "Submit".

Inputs

Email address

One email when we launch. Nothing else.

Email address

Enter a valid email address.

Email address

Field group

The waitlist control. Input and action share one box; the group carries focus and error, not the parts.

Badges

Draft Private build Stored Unverified Failed

Toggle, keys, toast

Notifications Public profile ⌘ K You are on the list.

Panel

Flat panel

Border only. Sits on the field, groups related controls.

Raised panel

Adds --shadow-1. For content that floats: menus, popovers.

Motion

One authored moment per view, not an effect on every element. Everything starts from a visible state and settles with an exponential ease-out. Blur and translate are allowed on entrance when they stay smooth; nothing bounces.

--ease-out: cubic-bezier(.16, 1, .3, 1). Fast start, long settle.

--dur-1 120msHover, color, border

--dur-2 240msToggle, focus ring, small layout

--dur-3 480msEntrances, panels

--dur-4 900msPage settle, spinners, the flip

The flip

The signature moment. A 0 becomes a 1: the cell fills, the field around it lights for a beat. Used once, on success.

Respect prefers-reduced-motion: tokens collapse durations to near zero and the flip lands on its final frame.

Voice

Short sentences. Concrete words. We say what happens and what to do next, and we stop. No exclamation marks, no "unlock", "supercharge", or "seamless". English by default.

Instead of	Write
Oops! Something went wrong.	Could not save your email. Try again in a moment.
Submit	Join the waitlist
Unlock the future of your data with B1T!	Everything starts with one bit.
Your request has been successfully received.	You are on the list.
Please enter a valid e-mail address in the field above.	Enter a valid email address.

Controls name their action. Errors name the problem and the recovery.
Numbers are digits, dates are ISO (2026-09-06), times are 24h.
The brand name is lower case in every context, including the start of a sentence.

Assets

Everything on this page is generated from the files below. Use them as they are; do not redraw.

Logo files

b1t-lockup.svgMark and wordmark, for dark fields
b1t-lockup-light.svgFor light fields
b1t-wordmark.svgWordmark only, dark fields
b1t-wordmark-light.svgWordmark only, light fields
b1t-wordmark-mono.svgOne color, inherits currentColor
b1t-mark.svgMark, dark fields
b1t-mark-light.svgMark, light fields
b1t-mark-mono.svgMark, one color
favicon.svgMark on void, rounded
icon-512.svgApp icon source

Code

tokens.cssEvery token, both themes, base element styles
ui.cssButtons, inputs, field group, badges, toggle, panel, toast, keys
fonts.cssSelf-hosted Geist and Geist Mono, expects ./fonts/*.woff2

Use

<link rel="stylesheet" href="/fonts.css" />
<link rel="stylesheet" href="/tokens.css" />
<link rel="stylesheet" href="/ui.css" />

<!-- light theme for documents -->
<html data-theme="light">