Template
Design system. Every style on one page.
The colours, type, buttons and elements that build every Basalt page. Each one maps to a Framer colour style, text style or component.
Colour styles
14 styles
Text styles
14 styles
Breakpoints
1280 / 810 / 390
Colours
Fourteen colour styles live in the Assets panel under Colors. Change one and every layer that uses it updates. Code components read the same values from the C tokens in BasaltKit, so change both when you rebrand.
Background
Background/Primary
#0A0A0B · C.bg
Background/Secondary
#111113 · C.bg2
Background/Tertiary
#17171A · C.bg3
Background/Chip
#202024 · C.chip
Text
Text/Primary
#EDEDEA · C.fg
Text/Secondary
#B4B4B9 · C.fg2
Text/Muted
#7A7A81 · C.mute
Text/Dim
#5C5C63 · C.dim
Text/White
#FFFFFF · C.white
Border & status
Border/Primary
rgba(237,237,234,.08) · C.line
Border/Rail
rgba(237,237,234,.08) · C.rail
Border/Secondary
rgba(237,237,234,.15) · C.line2
Border/Mark
rgba(237,237,234,.4) · C.mark
Status/Live
#9FD4A8 · C.live
Typography
Fourteen text styles in three groups: Heading, Body and Mono. Headings shrink at the tablet and phone breakpoints; body text wraps Pretty, headings Balance.
Headings
Fraunces
Weight 360, opsz 72, SOFT 0, WONK 0, tracking -0.02em. Used by H1 to H3 and Statement.
Body
Inter Tight
Weights 400 to 700. Body styles, H4, navigation, FAQ rows and tables.
Labels
Martian Mono
Uppercase at 87.5 % width. Eyebrows, tags, buttons, form labels and metadata.
Heading/H1
80 / 98% · Fraunces 360
Tablet 64 · Phone 40
Molten streams.
Heading/H2
60 / 100% · Fraunces 360
Tablet 48 · Phone 34
Three plans, one engine.
Heading/H3
38 / 104% · Fraunces 360
Tablet 32 · Phone 28
Joins that never go stale
Heading/Statement
40 / 116% · Fraunces 340
Tablet 32 · Phone 24
Basalt forms when lava cools fast. Your data should set just as quickly.
Heading/H4
24 / 120% · Inter Tight 500
All sizes
CDC from Postgres in four minutes
Body/Large
20 / 150% · Inter Tight
Phone 17
Event streams become typed, joined, queryable tables in milliseconds.
Body/Large Center
20 / 150% · centered
Phone 17
The same style, centered for hero and section leads.
Body/Medium
17 / 155% · Inter Tight
All sizes
Every materialized view keeps its lineage, so you can trace a number back to the event that changed it.
Body/Regular
15 / 155% · Text/Secondary
All sizes
Time travel lets you query any table as it stood at any second in the last 30 days.
Body/Regular Primary
15 / 155% · Text/Primary
All sizes
Time travel lets you query any table as it stood at any second in the last 30 days.
Body/Small
14 / 150% · Inter Tight
All sizes
Runs in 38 regions. p99 query latency under 5 ms on Scale.
Mono/Label
11 / 140% · Martian Mono, wdth 87.5
All sizes
Events / second · eu-north-1
Mono/Label Primary
11 / 140% · Text/Primary
All sizes
Events / second · eu-north-1
Mono/Success
12 / 150% · Status/Live
All sizes
Message sent · an engineer replies within 4 business hours
Buttons
One size for every button. Use the primary for the main action and the outline for everything beside it. In code components the Parts Button has Primary and Outline styles; native forms use the Form Submit component.
Button Inverse
On light cards, such as the featured pricing plan
Form Submit variants
Default
Hover
Pressed
Loading
Disabled
Success
Error
Elements
Small parts that repeat on every page. Eyebrows, tags and status dots use Mono/Label; cards draw their own corner marks.
Labels
Eyebrow
Tag
Tag Solid
Status dot · live
Cards and lines
Card · corner frame
01
Square corners with four 9 px bracket marks in Border/Mark. Every Basalt card draws them itself.
Corners · Status/Live
02
Highlighted cards recolour their corner marks, for example the live status on Home 04.
Section line · ┌ ┐ marks where the rails meet the top border
FAQ item
How does the accordion open?
Click the row. The answer opens with a 300 ms height change and the plus turns into a minus. The FAQ sections on Home, Pricing and Contact pages work the same way.
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
Form fields
Forms are native Framer forms. Style each field like this, or copy a form from the CTA or Contact pages, where it is already set up. The field below is a picture, not an input.
Name
Sigrún Jónsdóttir
Work email · focused
sigrun@company.com
Monthly events
Under 10M
Message
Tell us about your sources
Message sent · an engineer replies within 4 business hours
Couldn't send · try again or write to hello@basalt.dev
Field setting
Value
Fill
Background/Primary
Border
1 px Border/Primary · focus rgba(237,237,234,.32)
Size
Height 44 · padding 0 14 · textarea 128
Text
Inter Tight 15 · Text/Primary · placeholder Text/Muted
Label
Martian Mono 10 · uppercase · .04em · Text/Muted
Corners
0 (square)
Grid & spacing
All content sits between two vertical rails, 1280 wide. Every section, card and line shares the same edges. The layout templates draw the rails; sections draw their own top line.
Setting
Desktop
Tablet ≤991
Phone ≤767
Container (rails)
1280
1280
1280
Page gutter
40
32
12
Padding inside the rails
40
28
16
Nav height
72
72
64
Section padding, large
160
128
96
Section padding, medium
112
88
72
Hero top padding
168
136
136
Card grids
2 / 3 / 4 columns
2 columns
1 column
Desktop · 1280
Tablet · 810
Phone · 390
Components switch at 991 / 767 / 479
Motion
Block
What it does
Timing
Where
G1 · G2
Hero H1 lines rise from a mask; hero parts fade up 16 px; the nav drops in.
1.2 s, .1 s stagger · fades .9 s from .45 s, .06 s apart
Heading (Reveal: Hero), PageHero, every hero
G3
Hex columns breathe and rise under the cursor (lift 90 px, radius 170 px).
Continuous, paused off screen
Home 01 hero
G4
Live latency and events/s numbers tick.
Continuous
Home heroes
G5
Logo strip loops sideways.
32 s per loop
Logo sections
G6
Section headings reveal line by line from a mask.
1.1 s, .08 s stagger, at 88 %
Heading (Reveal: On scroll)
G7
Statement words brighten from 16 % as you scroll.
Scroll-linked
Statement sections
G8
Groups rise 24 px in sequence; single blocks rise in.
.9 s, .06 s stagger
Figures, windows, forms
G9
Product window: event stream, latency chart, card micro-motion.
Loops
Home 01
G10
Scroll position switches the product window panes (CSS sticky).
Scroll-linked; 4 s cycle on phones
Home 01
G11
Numbers count up from 40 % of their value.
1.8 s expo-out, at 90 %
Metrics, Overview figures
G12
Testimonials autoplay with a progress line.
7 s per quote
Testimonial sections
G13
Footer wordmark rises 60 px into view.
1.2 s
Footer (Wordmark)
G14
Capability cards scroll sideways on a sticky panel.
Scroll-linked, desktop only
Home 01
G15
Nav hides scrolling down past 400 px, returns scrolling up, glass after 40 px.
Instant
Nav (Hide on scroll)
G16
Magnetic primary buttons; the logo line lifts 5 px.
.5 s · .25 s
Nav, hero buttons
G17
CTA honeycomb: seams glow at the cursor, cells ignite and cool, a wave on entry and submit.
Wave 1.4 s
CtaBackdrop in the CTA component
G18
Cards rise 40 px with scale .98; list rows rise 18 px; media drifts.
1 s, .06 s · .8 s, .05 s
Inner pages
G19
Endless horizontal drift of repeating art.
40 s per loop
Home 02 strata
G20
Small diagram loops.
Loops
Illustrations
G21
Terminal lines type in, then loop.
Loops
Home 03
G22
Row hover: the arrow nudges 4 px up-right and brightens.
.25 s in, .3 s out
Link rows
G23
Tall previews scroll to their end while hovered.
distance / 260 s, min 1.2 s
Overview
G24
Signal terrain ridges breathe and bend under the cursor.
Continuous, paused off screen
Home 05 hero
Ease
expo-out cubic-bezier(.16,1,.3,1) for reveals; ease-out cubic-bezier(.23,1,.32,1) for presses.
Button press scale .97, 160 ms
Every component
