01 / LOGO
Logo Primary lockup, symbol, clear space, minimum sizes
CLEAR SPACE & MINIMUM SIZES
Clear space = x, where x is the diameter of the dot.
160 PX — LOCKUP
96 PX — COMPACT
24 PX — SYMBOL
Below these sizes the dot closes up and the arc loses its curve. Use the symbol alone rather than shrinking the lockup further.
02 / COLOUR
Colour Warm monochrome — ivory #FFF9F2 anchors both modes
SURFACES — SECTIONS ARE THE EXTREME, THE GROUND IS ONE STEP IN
INK
ACTION
DATA SCALE
STATE — SIGNAL ONLY, NEVER DECORATION
GRADIENTS — DATA FILLS ONLY
WARM — PRIMARY SERIES
Ink fading into the ground, so the leading curve always sits on top.
COOL — SECONDARY SERIES
The only cool tone in the system. Deep petrol, never saturated enough to read as blue at a glance.
WASH — NEUTRAL LIFT
Grid columns and specimen grounds. Never a card or a section.
RULES
03 / TYPOGRAPHY
Typography Geist + Geist Mono — two faces, nothing else
Aa
Geist
HEADINGS AND BODY
300 · 400 · 500 · 600 · 700
The quick brown fox jumps over the lazy dog 0123456789
Aa
Geist Mono
LABELS, DATA, METADATA
400 · 500
THE QUICK BROWN FOX 0123456789 // ()[]{}<>
TYPE SCALE — NINE STEPS, TWO TRACKS
04 / GRID
Grid and space 12 columns · 24 px gutter · 8 px rhythm · zero radius
12-COLUMN GRID
Max content width 1400 px · side margin 100 px · gutter 24 px
SPACING RHYTHM
$space-1 … $space-9 · every step a multiple of 4 px
TEXTURES AND SURFACES
45° hatch, 10 px pitch. True token $hatch.
Dot grid, 18 px. Page margins.
Construction grid, nodes 5–13 px.
0
Corner radius = 0. No exceptions.
DEPTH — SECTIONS SIT BELOW THE GROUND, NOT ABOVE IT
$PAPER — GROUND
$SURFACE — CARD, SECTION
$SURFACE-SUNK
Toolbars, code blocks, search fields. Never darker than the card it sits in.
Each step down the stack is roughly four per cent apart. The steps are deliberately small — a section should read as a cut into one plane, not as a card floating above a lighter page.
05 / COMPONENTS
Buttons and fields Sharp corners, 1 px rule, no shadows
VARIANTS
Get started
Learn more
View code
Cancel
Delete
Unavailable
Primary · secondary · quiet · ghost · destructive · disabled
SIZES
Small Medium Large
Small Medium Large
SM 32 px · MD 40 px · LG 48 px — heights on the 8 px rhythm
FORM FIELDS
DEPARTMENT
Production Logistics This field is disabled.
⌘K
Notifications on Notifications off I agree
Field height 40 px · rule 1 px · focus state = $accent
NAVIGATION ELEMENTS AND FLAGS
Preview
Code
Home / Devices / Terminal A
ONLINE
Attendance Access Biometrics API
Tabs · segmented · breadcrumbs · badges · tags — colour only on state
08 / WEB
Web / Home The system applied to a page
NEW TERMINAL T2 // RECOGNITION IN THE DARK
Your Biometric
for elevated security and seamless experience
Book a demo
Calculate price
TRUSTED BY
MATADOR
ESET
SLOVNAFT
KIA
VOLKSWAGEN
ZSSK
WHAT IT DOES
One identity for attendance and doors.
PRICING
You pay per employee, not per feature.
Deployed in a single day.
We arrive, mount it, train your team. No changes to your network.
Book a demo →
Call me back
10 / APPLICATIONS
Brand in use Business card, signature, terminal display, mobile, poster
BUSINESS CARD AND EMAIL SIGNATURE
TERMINAL DISPLAY, MOBILE, POSTER
11 / GRID SYSTEM
Grid and ruler variants Three blueprint grids · three rulers · seven node states
NODE STATES — SHOWN AT ACTUAL SIZE, HOVER TO SEE THE TRANSITION
BLUEPRINT GRIDS — PATTERN SPECIMEN, REDUCED TO 50 PX CELLS
RULERS — SHOWN AT ACTUAL SIZE
BUILD NOTES