Reference
The Ujenva system
One warm, living system. Earth beneath structure - dawn light, terrain, growth. Everything below is generated from tokens; nothing here is a one-off.
Typography
Fraunces for voice, Inter for work, JetBrains for facts.
Display type carries the brand's humanity - a warm, slightly bookish serif with its SOFT and WONK axes engaged. UI type disappears. Monospace is reserved for labels, identifiers and generated specification.
Display · Fraunces
Ag 123
Variable: opsz, SOFT, WONK. Optical size drives tracking.
Text · Inter
Ag 123
cv11 + ss01 for a single-storey g and disambiguated l/I.
Mono · JetBrains
Ag 123
Tabular by default so figures never reflow mid-animation.
Colour
Ramps in OKLCH, addressed only through semantic tokens.
Components never reach for verdant-600. They ask for accent, and the theme decides. That is why light and dark are one system rather than two stylesheets.
Verdant - primary. Growth, resolution.
Ember - accent. Warmth, the call to act.
Lagoon - informational signal.
Stone - warm-olive neutral.
Semantic tokens
Canvas
--ui-canvas
Surface
--ui-surface
Sunken
--ui-sunken
Accent
--ui-accent
Warm
--ui-warm
Info
--ui-info
Caution
--ui-caution
Risk
--ui-risk
Premium
--ui-premium
Generated media
Every image in Ujenva is drawn by code.
No stock photography, no CDN, no licensing. Procedural and seeded - the same input always produces the same art, on the server and in the browser.
DawnField
Drifting radial suns with a slow hue rotation. The signature background.
Topography
Contour lines of terrain, drawn on reveal.
HorizonRidges
Layered hills receding into haze.
GrowthRings
Trunk cross-section. Accumulated seasons.
DappledLight
Canopy shadow moving across a surface.
RootSystem
The product metaphor, and the hero animation.
Living portraits
A sprig grown from the hash of a person’s name. Same person, same plant, everywhere.
Portfolio tiles & venation
Components
Variants are exhaustive, so nothing needs overriding.
Buttons
Status & confidence
Capped below certainty by design - Ujenva never renders 100%.
Form controls
Town or county is enough.
A rough number is still needed.
Selection & progress
Callouts - how honesty is encoded
Insight
Note
Not yet known
Needs a professional
Verified
Steps
Photograph the pattern
Upper and lower field, plus standing water after rain.- 2
Sample the soil properly
ProfessionalTechnique determines whether the result means anything. - 3
Apply the indicated amendment
Only once the laboratory result is back.
Nothing here yet
Empty states explain what would fill them.
Icons
74 glyphs, one grid, one stroke weight.
Hand-tuned rather than imported. Consistency here is most of what makes an interface feel authored instead of assembled.