Brand System
Tessera
The Tessera mark is built from isometric geometry — a tessera (tile) inside a hexagonal frame. Every proportion derives from one rule: equal visual weight across ring, negative space, and core.
01 / Logo
02 / Construction
Equal Weight System
The outer hexagon's flat-to-center radius is divided into three equal zones. Ring wall, negative space gap, and core each occupy 20.2 units — identical visual mass in every zone.
Geometry
Outer hex — vertex R = 70
Inner hex — vertex R = 46.67
Core hex — vertex R = 23.33
Zone width — 20.21u each
Ratio — 1 : 1 : 1
Lockup Rules
Type — Satoshi Bold (all paths, no font deps)
Scale — 0.1414 (vertex-aligned to T crossbar)
Gap — 2u ink-to-ink (40.4 SVG units)
Vertical — cap midpoint on mark center
Color — currentColor throughout
Kerning
T–e −6 · e–s +1 · s–s +1
s–e +1 · e–r +1 · r–a −1
03 / Clear Space & Minimum Size
Clear Space
Minimum exclusion zone = 1× ring width (20.2u) on all sides. Ensures the mark breathes and isn't crowded by adjacent elements.
Minimum Size
The mark holds readability down to 16px. Below that, details collapse. The full lockup should not be used below 120px wide.
48px
32px
16px
04 / Typography
Satoshi Regular · 400
Revenue, composed.
Satoshi Medium · 500
Revenue, composed.
Satoshi Bold · 700
Revenue, composed.
JetBrains Mono · Code
tessera-systems.io · LCP 2.2s · Lighthouse 93
05 / Color
Five accent colors derived from a shared HSL logic — high saturation (82–100%), hues at intentional intervals around the wheel. The traffic trio (Citrus → Tangerine → Crimson) maps directly to score semantics. Violet and Klein extend the palette for data visualization and interactive elements. Neutrals use the zinc scale — no warm or cool bias — letting the accents do the talking.
Accents
Accents — Light-mode text
Darkened variants for text on light backgrounds where the full accent fails WCAG AA contrast. Used automatically via the theme's semantic tokens (e.g. text-success).
Neutrals — Light mode
50
#FAFAFA
Surface
100
#F4F4F5
Raised
200
#E4E4E7
Border
300
#D4D4D8
Divider
400
#A1A1AA
Tertiary
500
#71717A
Secondary
600
#52525B
Emphasis
800
#27272A
Strong
950
#09090B
Primary
Neutrals — Dark mode
950
#09090B
Surface
900
#18181B
Raised
800
#27272A
Border
700
#3F3F46
Muted
600
#52525B
Subtle
500
#71717A
Secondary
400
#A1A1AA
Tertiary
200
#E4E4E7
Border Lt
50
#FAFAFA
Primary
Neutrals (zinc 950→50) + Accents (Citrus → Tangerine → Crimson → Violet → Klein)
HSL System
| Color | Hex | Hue | Sat | Light | Role |
|---|---|---|---|---|---|
| Citrus | #CCFF57 | 76° | 100% | 67% | Success |
| Citrus (light mode text) | #2D8C0A | 108° | 84% | 29% | Success text |
| Tangerine | #FF6B35 | 16° | 100% | 60% | Warning |
| Tangerine (light mode text) | #C44B1A | 17° | 77% | 44% | Warning |
| Crimson | #E8294B | 349° | 82% | 54% | Destructive |
| Violet | #B396FF | 258° | 100% | 79% | Data |
| Violet (light mode text) | #6B3FA0 | 267° | 43% | 44% | Data |
| Klein | #3B5BFF | 230° | 100% | 62% | Interactive |
06 / Gradients
Accent gradients for backgrounds, hero sections, and thumbnails. Each pairing is tested for adjacency harmony. The full-spectrum sweep is available for larger surfaces. All gradients use a linear left-to-right direction by default.
Adjacency Pairs
Citrus → Tangerine
Tangerine → Crimson
Violet → Klein
Citrus → Violet
Crimson → Violet
Citrus → Klein
Full Spectrum
Crimson → Tangerine → Citrus → Violet → Klein
Traffic — Citrus → Tangerine → Crimson (score mapping 100→0)
07 / System Summary
| Mark | 1:1:1 equal weight · Outer R=70 · Inner R=46.67 · Core R=23.33 |
| Core | Solid hexagon (no gradient) |
| Font | Satoshi Bold · All text converted to paths |
| Scale | 0.1414 · Vertex 2 aligned to T crossbar bottom |
| Cap Height | 103.4u (74% of mark height) |
| Gap | 2u ink-to-ink (40.4u) · T bearing compensated |
| Kerning | T–e −6 · e–s +1 · s–s +1 · s–e +1 · e–r +1 · r–a −1 |
| Color | currentColor · Adapts to any background |
| Clear Space | 1× ring width (20.2u) minimum |
| Min Size | Mark: 16px · Lockup: 120px |