Style guide. Every token on one page.
The colors, type, buttons and elements that build every Basalt page. Each one maps to a global class or CSS variable.
Colors
Base colors are CSS variables at the top of src/styles/template.css. Semantic tokens point at them, so a change to one base color updates every surface that uses it.
Base
Semantic
Typography
Weight 360, opsz 72, SOFT 0, WONK 0, tracking -0.02em. Used by H1 to H3 and statements.
Weights 400 to 700. Body copy, H4, navigation, FAQ triggers and tables.
Uppercase at 87.5% width. Eyebrows, tags, buttons, form labels and metadata.
Molten streams.
Three plans, one engine.
Joins that never go stale
CDC from Postgres in four minutes
Basalt forms when lava cools fast. Your data should set just as quickly.
Event streams become typed, joined, queryable tables in milliseconds.
Every materialized view keeps its lineage, so you can trace a number back to the event that changed it.
Time travel lets you query any table as it stood at any second in the last 30 days.
Runs in 38 regions. p99 query latency under 5 ms on Scale.
Buttons
One size for every button. Use the primary for the main action and the secondary for everything beside it.
Elements
Labels
Card and line system
Square corners with four bracket marks drawn by the corner-frame combo class.
Set the --c custom property on the element to recolor its corner marks.
Form fields
FAQ item
An IX3 click interaction on faq_trigger toggles the is-open class on its faq_item. CSS animates the row height and turns the plus into a minus.
Table
| Region | p99 latency | Status |
|---|---|---|
| Europe | ||
| eu-north-1 · Reykjavík | 3.8 ms | Live |
| eu-west-2 · London | 4.1 ms | Live |
| Americas | ||
| us-east-1 · Virginia | 4.4 ms | Live |
Grid & spacing
All content sits inside two vertical rails. The rail width is the container width, so every section, card and line shares the same edges.
| Token / class | Desktop | 991px | 767px |
|---|---|---|---|
| --rail--width | min(80rem, 100vw − 2 × gutter) | ||
| --site--max (container-large) | 80rem | 80rem | 80rem |
| --site--gutter (padding-global) | 2.5rem | 2rem | 0.75rem |
| --rail--pad (inside the rails) | 2.5rem | 1.75rem | 1rem |
| --nav--height | 4.5rem | 4.5rem | 4rem |
| padding-section-large | 10rem | 8rem | 6rem |
| padding-section-medium | 7rem | 5.5rem | 4.5rem |
| grid-2 / grid-3 / grid-4 | 2 / 3 / 4 cols | 2 / 2 / 2 cols | 1 col |