Composed, not decorated
Use alignment, spacing and hierarchy to make complex systems legible. Every tile has a job; not every tile needs an accent.
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.
The same identity, from the smallest status label to the whole page.
00 / Design principles
Precise, not cold
Pair geometric Satoshi headings with clear, human explanations. Reserve mono for labels, measurements and technical detail.
Evidence before spectacle
Show the workflow, the deliverable and the result. Colour should explain status or focus attention, not manufacture importance.
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: equal radial widths 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
Display
48 / 60px · 700 · tight
Systems, composed.
Section
30 / 36px · 500 · tight
Make the next step clear.
Card
18 / 20px · 500 or 700
One workflow. A measurable result.
Body
16px · 400 · 1.5 line height
Clear explanations give people the confidence to act.
Technical
12px · mono · 1.5 line height
WORKFLOW / REVIEW / DELIVERY
Use Satoshi 400, 500 and 700. Keep body copy in sentence case. Tight tracking belongs on large headings, not long paragraphs. Small mono labels support the content; they never replace readable instructions.
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
SuccessCitrus#CCFF57
WarningTangerine#FF6B35
DestructiveCrimson#E8294B
DataViolet#B396FF
InteractiveKlein#3B5BFF
Accents: Light-mode text
Mode-specific variants for light backgrounds. These are not all suitable for small text: see the contrast guidance below. Resolved via the theme's semantic tokens (e.g. text-success).
SuccessCitrus#2D8C0A
WarningTangerine#C44B1A
DestructiveCrimson#E8294B
DataViolet#6B3FA0
InteractiveKlein#3B5BFF
Neutrals: Light mode
White
#FFFFFF
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
Subdued
400
#A1A1AA
Secondary
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. Use one pairing per composition and keep text on a solid, contrast-checked surface. 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 / Layout, spacing & shape
A shared rhythm
Use a 4px spacing base. Standard pages sit in a centred 1024px content column with 24px outer gutters. Give sections room to breathe, then keep related information close.
4Fine adjustment
8Related elements
16Grid gaps
24Card padding / gutters
32Content groups
64Compact section
80Brand section
96Marketing section
Quiet edges
2px small details, 4px buttons and compact cards, 6px larger cards. Fully rounded chips are reserved for short tags. Separate surfaces with a 1px border and a neutral fill, not a heavy shadow.
Reflow, don’t shrink
Start with a single column. At 640px, suitable groups and actions can sit side by side. At 768px, use two-column content grids. Desktop navigation begins at 1024px. Keep reading order intact and let long labels wrap.
08 / Components in context
Neutral actions, structured cards and small semantic signals. These examples use the site’s existing Button and Pill components. Example content below is illustrative, not a reported client result.
A clear action hierarchy
One primary action per decision group. Pair it with an outline alternative; use text links for lower-priority navigation.
Primary buttons invert with the theme. Standard actions are at least 44px high; large actions are 48px and labels can wrap. Citrus is a success signal, not the default CTA colour. Disabled controls are visibly subdued and cannot be activated.
Reporting, ready for review.
Bring the inputs together, check the exceptions, and give the operator a clear next step.
Inputs checked
One exception needs review
Forms & feedback
Keep labels visible above fields. Explain requirements before submission. Use a visible focus ring, a specific error beside the field, and a written success confirmation. Loading states should say what is happening and prevent duplicate submission. Never rely on colour alone.
09 / Colour with responsibility
Colour is a signal, not the message
Keep essential copy neutral. Category labels pair neutral words with a small colour dot. On raised light surfaces, use the stronger zinc-600 supporting text. Pair success, warning and error colours with a label or icon. A darker light-mode variant is not a blanket accessibility guarantee: contrast depends on the foreground, background, size and opacity together.
- Normal text needs 4.5:1 contrast; large text needs 3:1.
- Essential icons, control boundaries and focus indicators need 3:1 against adjacent colours.
- Check raised surfaces separately from the page canvas.
- For new controls, aim for a 44px touch target and always preserve keyboard focus.
Know the limits
- Light Citrus on white: 4.31:1
- Not suitable for normal-sized text. Keep the words neutral and use the colour as a supporting signal.
- Crimson on white: 4.33:1
- Use neutral error copy with a Crimson icon or border; do not use tiny red instructions.
- Klein on dark canvas: 3.91:1
- Suitable for some non-text signals, not normal-sized link text. Use neutral underlined links where needed.
Ratios use opaque sRGB colours against #FFFFFF or #09090B. They do not certify every component or translucent combination.
10 / Voice, imagery & motion
Say what changes
Use direct, specific language: the problem, the work, the outcome. Write in sentence case. Use real evidence and identify illustrative numbers. Avoid hype, unexplained jargon and em dashes.
Show the system
Prefer real product captures, workflow diagrams and purposeful editorial illustrations. Keep diagrams geometric and labels readable. Avoid generic robot imagery and decorative dashboard mockups with invented results.
Make motion useful
Use short colour and opacity transitions for feedback. Keep reading surfaces still, respect reduced-motion preferences, and never make movement the only way to understand a state change.
Keep
Original logo geometry. Satoshi and JetBrains Mono. Neutral zinc surfaces. Five purposeful accents. Small radii, strong alignment and generous section spacing.
Avoid
Stretching or redrawing the logo. Gradients inside the mark. A new typeface for each page. Rainbow controls, oversized soft cards, decorative glow and competing primary actions.
11 / Logo Specification
| Mark | 1:1:1 equal weight · Outer R=70 · Inner R=46.67 · Core R=23.33 |
| Core | Solid hexagon (no gradient) |
| Wordmark font | Satoshi Bold · SVG 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 · Use a contrasting solid background |
| Clear Space | 1× ring width (20.2u) minimum |
| Min Size | Mark: 16px · Lockup: 120px |