A1
1,900
Teams in production
Template
Style guide. Every token and block in one place.
The colors, type, buttons, forms and components every Tessel page is built from. Change a token here and it changes everywhere.
22 color tokensCSS variables
3 typefacesGoogle Fonts
1 button size2 styles
16 drawingsDrawn in code
01 Colors
Colors
Ink on paper. Cobalt for what is live.
Every color is a variable on the root element. The isometric drawings read the same variables, so a change here repaints them too.
Base
Paper
--paper
#FFFFFF
Paper 2
--paper-2
#F5F5F3
Ink
--ink
#0B0B0D
Ink 2
--ink-2
#47474E
Muted
--muted
#8D8D95
Line
--line
rgba(11,11,13,.085)
Line 2
--line-2
rgba(11,11,13,.22)
Accent
Accent
--accent
#2337FF
Accent top
--accent-top
#5767FF
Accent side
--accent-side
#1322C4
Accent wash
--accent-wash
rgba(35,55,255,.08)
Isometric faces
Face top
--face-top
#FFFFFF
Face left
--face-l
#F0F0EE
Face right
--face-r
#DFDFDB
Night
Night
--night
#0B0B0D
Night 2
--night-2
#151518
Night line
--night-line
rgba(255,255,255,.1)
Night text
--night-text
#F3F3F1
Night muted
--night-muted
#8E8E96
Night top
--night-top
#2A2A2F
Night left
--night-l
#18181C
Night right
--night-r
#101013
02 Type
Typography
Three typefaces. Each with one job.
Fraunces for headings and numbers, Inter Tight for reading, Martian Mono for labels. Display sizes scale with the viewport.
Build block by block.
Every run, traced.
Approvals happen in Chatline.
Finance lead approval
Every block is typed, tested and traced before it touches production.
Tessel turns workflows, data and AI agents into blocks your team can stack, test and ship.
Each agent gets a budget, a list of tools and a named approver. It cannot exceed any of the three, and every decision it makes is logged with its reasoning.
p95 184 ms per block · 12 regions
2,100,000,000
03 Buttons
Buttons
One size. Keys that press into their own depth.
Hover a button and it sinks toward the page. The side faces are pseudo-elements, so each button is a single link in the markup.
04 Forms
Form elements
Square fields. Labels you can always read.
Plain form elements with form_ classes on each wrapper. Focus turns the border cobalt.
Message received.
A solutions engineer will reply within one working day.
That did not go through. Check the highlighted fields and try again.
05 Components
Components
The shared blocks. Reuse them before adding new ones.
Every inner page is assembled from these. Each label shows the class to look for in the markup.
Slab and card · .card.slab · .slab.is-featured
Slab
Hover it. The card extrudes into a block with grey sides.
Slab, featured
Permanently raised with a cobalt edge. Use one per row.
Card
Padding, gap and an optional icon, title and text.
Chips and tags · .chip · .chip.is-accent · .tag-type · .tag-type.is-agent
146 connectors1 workspaceLogicAgent
Filter · .filters · .filter.is-active
Postgres Paylane Ledgerline Chatline REST API
Cells grid · .cells.is-4 · .cell
B1
2.1B
Runs last month
C1
146
Connectors
D1
12
Regions
Facts · .facts · .facts_item
SOC 2 Type IIAudited yearly
99.99% uptimeTrailing 12 months
p95 184 msPer block
Flow diagram · .flow · .flow_node · .flow_node.is-agent · .flow_link
01 · TriggerInvoice paid
02 · LogicMatch lines
03 · AgentFlag variance
04 · OutputPost entry
FAQ item · .faq_list · .faq_item · .faq_q · .faq_a
What counts as a run?
One trigger firing one workflow from start to finish is one run, however many blocks it passes through.
Can I export what I build?
Yes. Logic blocks compile to TypeScript and sync to your Git repository.
06 Isometric art
Isometric art
Drawn by one attribute. No hand-made polygons.
Add an empty SVG with one of these attributes and the shared script draws it on a true 30° grid. Change the value to change the drawing.
A1
Cube
data-iso="cube"
B1
Stack
data-iso="stack"
C1
Tower
data-iso="tower"
D1
Plinth
data-iso="plinth"
A2
Pair
data-iso="pair"
B2
Tiles
data-iso="tiles"
C2
Teams
data-iso="teams"
D2
Runs
data-iso="runs"
A3
Connectors
data-iso="connectors"
B3
Regions
data-iso="regions"
C3
Glyph, typed
data-glyph="typed"
D3
Glyph, traced
data-glyph="traced"
A4
Glyph, approved
data-glyph="approved"
B4
Connector chip
data-chip="PG"
C4
Chip, accent
data-chip="SL" data-accent
D4
Block city
data-city="23"
07 Spacing
Spacing and grid
One container. Three breakpoints.
Every section sits inside the same container, between two blueprint rails. Content keeps a fixed distance from the rails at every width.
Setting
Value
Where
Container max width
82rem (1312 px)
--container
Page gutter
clamp(1rem, 2.6vw, 2.5rem)
--gutter on .wrap
Rail padding
clamp(1rem, 3vw, 3rem)
--rail-pad on .container
Section padding
clamp(5rem, 9vw, 8.5rem)
.pad
Section padding, extra air
clamp(6rem, 12vw, 11rem)
.pad.is-xl
Tablet
max-width 991px
Grids drop to two columns
Mobile landscape
max-width 767px
Forms and facts stack
Mobile portrait
max-width 479px
Single column, full-width buttons