The single reference for making anything look like SKINSTATE — scraped from every live surface (dashboards, pitch, prototype) and the v1.1 design guidelines. Click any swatch or snippet to copy it.
01 Wordmark
SKINSTATE
PRIMARY — IBM PLEX MONO BOLD · ALL CAPS · GRADIENT #0B41A0 → #00030E (DARK MODE: #9FB6EA → #EDF1FA)
Rules: never letterspace, never italicise, never re-colour outside the approved treatments. The gradient runs horizontally, always cobalt→dark. On photography use the white wordmark over the dark-gradient plate (centre panel).
02 Colour
Tints for UI: click to copy — borders/lines #DCE1EE · soft fill #E7EDF9 · track #EDF0F8 · warn #A32D2D
SEQUENTIAL DATA RAMP — CHOROPLETHS, HEATMAPS (ALWAYS PERIWINKLE→COBALT, NEVER RAINBOW)
LOWHIGH
ITA PHOTOTYPE — THE 6 DIAGNOSTIC SKIN TONES (SELECTED STATE = ORANGE KEYLINE)
SUB-PALETTES IN THE WILD
DARK MODE — A DEEP-COBALT WORLD, NOT A GREY ONE (ORANGE UNCHANGED)
03 Typography
DM Serif Display400 only · never bold never letterspaced sentence case
Shape rules: sharp, flat, bordered — cards/panels are 1px #DCE1EE, radius 4px, no drop shadows. Pills (radius 999) are reserved for interactive chips and back-buttons; badges/tags are rectangular (radius 3px, mono caps). Selection state = cobalt fill, white text.
06 Patterns & motifs
THE WAVE-DOT FIELD — ANIMATED COBALT DOT GRID (DASHBOARD FRONT DOOR, HERO BACKDROPS)
INVERSE FIELD — WHITE DOTS ON THE COBALT PLATE (PITCH HEROES, APP CTAS)
THE SIGNATURE GRADIENTS — COBALT → NEAR-BLACK · AND THE ORANGE RAMPS (PITCH / APP CTA)
Other motifs: images and media sit in sharp-cornered frames on a strict grid, each with a sans label and a mono spec line beneath. Thin 1px rules separate sections; generous whitespace; content column 920–1040px.
07 Charts & data-viz
LINE — COBALT SERIES, ORANGE FOR THE HERO LINE, MONO END-LABELS
BARS — COBALT FILL, ORANGE = SKINSTATE, VALUE ON THE BAR
BRIDGE — COBALT POOLS, MUTED STEPS DOWN, ORANGE RESULT
PEER DISTRIBUTION — ROUNDED BARS, BRIGHTNESS = DENSITY (APP)
Dermal thickness 1.42 mm · measured by ultrasound — thicker dermis means more structural collagen.
Rules: one hero series per chart, always orange; everything else cobalt/periwinkle. Values in mono, printed at the data (end-labels, on-bar), not in floating legends. Gridlines 1px var(--line); no 3-D, no shadows, no rainbow scales. Heat/choropleth uses the periwinkle→cobalt ramp above. Educational content lives on the navy deep-dive card: mono-caps kicker, serif white headline, sans body, white plate for the illustration, colour-keyed layer legend.
08 Iconography
PRODUCT ICON LIBRARY — THE 16 SKIN INDICATORS (FROM THE PROTOTYPE / PITCH)
White line-glyphs, one per diagnostic indicator. In product they sit in the cobalt-gradient rounded box; the raw transparent PNGs live in assets/brand/ind/ (true scan-thumb vectors lifted from the prototype: 98×90 on #001856; the no-background set is the navy-on-white card version).
SYSTEM GLYPHS
No emoji, no icon fonts. The system uses mono glyphs and thin rules only. Anything richer (photos aside) should be an inline SVG drawn in brand colours.
09 Imagery
Faces — the accent light
NEUTRAL SKIN · ONE COBALT/UV ACCENT
The diagnostic overlay
HALF-FACE SCAN · DATA ON SKIN
Clinical truth
UNRETOUCHED TEXTURE · MAPPED ZONES
Texture as material
B/W COMPLEXION ANALYSIS
Treatments in action
DEVICE-LED · ORANGE SAFETY POP
Skincare on cobalt
PRODUCT RITUAL · FLAT BLUE FIELD
The scan room
WARM MINIMAL INTERIOR · ONE PATIENT
The consultation
SOFT CURVES · COBALT SCREEN MOMENT
Warm neutral register
DTC VOICE · CREAM FIELD · NATURAL SKIN
The close portrait
BEIGE FIELD · SERIF NAVY OVERLAY
Photography over illustration — and skin is the subject. Four recurring registers, all sourced from the live pitch and prototype: faces (diverse, natural skin, minimal makeup, one deliberate cobalt/UV or orange accent per frame); diagnostics (scan overlays, mapped zones, unretouched texture — honesty is the aesthetic, including B/W complexion analysis); treatments (device-led moments, hands + tools, orange appearing only as a functional pop — goggles, markers); and place (warm minimal interiors that let the cobalt UI moments carry the brand). Cool-toned grade with cobalt/periwinkle bias for product and diagnostics; a warm neutral register (cream/beige fields, natural skin, navy serif overlays) carries the DTC and editorial voice; the full set lives in assets/brand/img/.
10 Using the system
✓ Do
Link skinstate_brand.css after your own styles on every new page
Style with tokens (var(--accent), var(--orange)…) — never new hex values
Give every page an eyebrow, a serif H1 and one orange moment
Keep the 7 clinic-type colours identical across every view
Design dark mode as deep cobalt, with #04102E text on filled accents
✕ Don't
No emoji, no icon fonts, no drop shadows, no rainbow scales
Never bold or letterspace the serif; never re-colour the wordmark
Don't use orange as a fill colour — it's an accent, not a surface
Don't round cards beyond 4px (pills are for chips/back-buttons only)
Don't restyle the segment colours or the periwinkle→cobalt ramp
Full written spec: SKINSTATE_DESIGN_GUIDELINES.md (folder root) · tokens live in UK_Clinics_Database/skinstate_brand.css. Python generators must emit these links and tokens rather than their own colours.
HIFU · single session
