Style guide
Kerno is dark only. Every colour and text style on this page is a named style in the Assets panel: change one there and it changes everywhere.
Colour
Each style has one value. Pick a colour by its job, never by how it looks.
#060A14
Color/Background Base
Page background
#0A1020
Color/Background Raised
Bands that sit one step above the page
#0A1122
Color/Surface Card
Cards and panels
#131B30
Color/Surface Card 2
Nested cards, table rows
#0A1122 · 88%
Color/Surface Over Photo
Scrim over photography
#0A1122 · 92%
Color/Surface Glass Strong
Glass panels that need more cover
#FFFFFF · 12%
Color/Surface On Photo
Chips and pills on a photo
#FFFFFF · 10%
Color/Border Subtle
Hairlines, 1px at 60%
#FFFFFF · 16%
Color/Border Strong
Inputs, focus outlines
#FFFFFF · 24%
Color/Border On Photo
Hairlines over a photo
#F2F4F8
Color/Text Primary
Headings and key numbers
#A3ABBD
Color/Text Secondary
Body copy
#6F7890
Color/Text Tertiary
Captions, eyebrows, meta
#EEF0F3
Color/Text On Dark
Text on brand blue and on photos
#EEF0F3 · 72%
Color/Text On Dark Muted
Secondary text on brand blue
#0E1A33
Color/Brand Navy
Brand blue
#070F22
Color/Brand Navy Deep
Footer gradient, deep brand fields
#1E2F55
Color/Brand Navy Mid
Brand blue, mid step
#8FCBFF
Color/Accent Highlight
Links, placeholders, highlights
#8FCBFF · 60%
Color/Accent Highlight Line
Underlines and chart guides
#8FCBFF
Color/Accent Sky
Primary button gradient
#C2E4FF
Color/Accent Sky Light
Primary button light edge
#62A8F2
Color/Accent Sky Deep
Primary button shadow edge
#5B95FF
Color/Accent Blue
Eyebrow dot, small accents
#1F4FD1
Color/Accent Blue Mid
Chart fills, mid step
#081640
Color/Accent Blue Deep
Chart fills, deep step
#14234A
Color/Accent Tint
Soft highlight behind numbers
#0E1A33
Color/Button Primary Fill
Primary button fill
#1E2F55
Color/Button Primary Fill Hover
Primary button hover
#EEF0F3
Color/Button Primary Text
Primary button label
#FFFFFF · 6%
Color/Button Ghost Fill Hover
Ghost button hover
#000000 · 30%
Color/Shadow Paper Near
Near shadow on cards
#000000 · 45%
Color/Shadow Paper Far
Far shadow on cards
#5B95FF
Color/Paint Blue Glow
Artwork gradient, bright step
#8FCBFF
Color/Focus Ring
Keyboard focus outline
#070F21
Color/Paint Shadow Text
Shadow behind artwork text
#0A1A4F
Color/Paint Shadow Card
Artwork card shadow
#050D29
Color/Paint Shadow Ink
Artwork shadow, darkest
#FFFFFF
Color/Paint White
Pure white in artwork
#D6E4FF
Color/Paint Card Edge
Light edge on artwork cards
#1A2236
Color/Paint Arrow Bottom
Arrow artwork, bottom
#060A14
Color/Paint Arrow Top
Arrow artwork, top
#0A1A4F
Color/Paint Blue Floor
Artwork gradient, dark step
#163A9E
Color/Paint Blue Step
Artwork gradient, mid step
Signals
Use them only on biomarker states and trend arrows. Never brand blue for a state, never green.
In range
78
Color/Signal In Range
At or better than the Kerno target. No action.
Watch
104
Color/Signal Watch
Inside the lab range, outside the Kerno target. Retest.
Act
132
Color/Signal Act
Outside the lab range or rising fast. The plan changes.
Up
+12
Color/Signal Up
A number went up. Same colour as In range when up is good.
Flat
0
Color/Signal Flat
No meaningful change between two tests.
Down
−54
Color/Signal Down
A number went down. Read it with the marker, not alone.
Type
Inter for everything you read. Doto only for biomarker values. Marketing numbers use Text/Stat, set in Inter.
Text/Display Hero
Inter Regular, 82.5 / 95%
Home hero only
Text/Display MD
Inter Regular, 52.5 / 95%
Page titles
Text/H3
Inter Regular, 34.7 / 105%
Section titles
Text/H4
Inter Medium, 23.1 / 120%
Card titles
Text/Body Lead
Inter Regular, 18.75 / 150%
The one paragraph size: leads, body, card text, notes
Measure first, then treat.
Text/Body
Same size as Text/Body Lead, 18.75 / 155%
Body copy
Measure first, then treat.
Text/Body Small
Same size as Text/Body Lead, 18.75 / 160%
Card text, lists, table cells
Measure first, then treat.
Text/Caption
Inter Regular, 15.4 / 150%
Figure captions, chart labels, meta, form help, fine print
Measure first, then treat.
Text/Label Nav
Inter Regular, 16 / 100%
Navigation
Measure first, then treat.
Text/Label Button
Inter Medium, 17 / 100%
Buttons
Measure first, then treat.
Text/Label Tag
Inter Medium, 13.5 / 100%, the smallest size
Eyebrows, column labels
Measure first, then treat.
Text/Stat
Inter Regular, 84.8 / 90%
Marketing numbers
120+
Text/Numeral XL
Doto Medium, 92.5 / 90%
Hero biomarker value
41.2
Text/Numeral L
Doto Medium, 54 / 95%
Biomarker values in cards
78
Text/Numeral M
Doto Medium, 30.9 / 100%
Biomarker values in tables
132
Text/Partner Mark
Inter Semi Bold, 19.3 / 120%
Partner names
Measure first, then treat.
Text/Article H2
Inter Regular, 34.7 / 105%
H2 inside CMS long text
Text/Article H3
Inter Medium, 23.1 / 120%
H3 inside CMS long text
Text/Body Primary
Same size as Text/Body, 18.75 / 155%
Body copy in Color/Text Primary, not Color/Text Secondary
Measure first, then treat.
Text/Menu Link
Inter Regular, 96 / 95%
Links in the open menu, scaled down on phone
Programs
Text/Numeral XL Diagnostics
Doto Medium, 92.5 / 90%
Large reading on /diagnostics
41.2
Text/Legal Anchor
Inter Medium, 13.5 / 100%
Section links on /legal
Privacy
Text/Legal H3
Inter Regular, 23.1 / 120%
Clause titles on /legal
Spacing, radii and effects
Spacing runs on a 4 px base. Sections use 120 top and bottom, cards 24 to 32 inside. These are the values the template follows, so match them when you add a section.
4 px
4
8 px
8
12 px
12
16 px
16
20 px
20
24 px
24
32 px
32
40 px
40
48 px
48
64 px
64
80 px
80
120 px
120
Small · 12
Chips, small inputs
Medium · 20
Inputs, swatches, images in cards
Large · 32
Cards and panels
Extra large · 40
Large media, CTA band
Full · 999
Pills and round buttons
Highlight hairline
Highlight hairline on featured cards
Paper shadow
Cards that sit on the page
Card glass
Glass cards over photos
Longevity clinic
Pill glass
Eyebrow pills
Glass on photo
Glass on top of photography
Button chip
Arrow chip inside buttons
Button arrow
Round arrow button
Data card
Data cards in reports
Inner page
Journal articles, programmes, team members and results share one reading layout: a 680 column for text and a 360 hang for notes, data and pull quotes, 80 apart, 1120 in total. Body is Text/Body in Color/Text Secondary. In long text, H2 is Text/Article H2 with 48 above it, H3 is Text/Article H3.
Column · 680
Body, H2, H3, lists, data blocks
Hang · 360
Notes, sources, pull quotes, small charts
Most people who come to us for a baseline already know their cholesterol. Fewer know their ApoB. It is the first number we read on every cardiometabolic panel, and the one most often missing from a standard annual check.
The difference is not academic. LDL cholesterol is a mass: how much cholesterol travels inside low density particles in a decilitre of blood. ApoB is a count. Every particle that can enter the artery wall and start a plaque carries exactly one ApoB protein on its surface. Count the protein and you have counted the particles.
One to one
Each LDL, VLDL, IDL and Lp(a) particle carries a single ApoB molecule. The test is a particle count.
Two people can have the same LDL cholesterol and very different particle counts. When each particle carries less cholesterol, you need more of them to reach the same total. That person looks average on a standard lipid panel and carries more risk than the number suggests.
A routine lipid panel reports total cholesterol, HDL, triglycerides and LDL cholesterol. In many labs that last figure is not measured at all. It is calculated from the other three with a formula written in 1972, and it drifts most in exactly the people we worry about: anyone with high triglycerides, insulin resistance or a very low LDL after treatment.
ApoB is a direct measurement. One antibody test, run on the same tube of blood, with no fasting needed and a lab error of a few percent. It costs little and most European labs already run it. It is missing from most annual checks out of habit, not because it is hard to get.
Member 0412 is a good example. A runner in her forties, normal weight, no medication. Her standard panel read borderline and her previous doctor suggested waiting a year. Her ApoB told a different story.
Components
Anything used on more than one page is a component. Swap variants in the right panel; never detach. Hover states live inside each component and run on their own, so they are not listed here.
Eyebrow above every section title. Always glass.
Longevity clinic
Paper
Longevity clinic
Photo
Primary is the main action, Ghost the secondary.
Style=Ghost, State=Default, Size=Large
Style=Ghost, State=Default, Size=Small
Style=Primary, State=Default, Size=Large
Style=Primary, State=Default, Size=Small
Marketing numbers in a row.
Desktop
Top links in the nav.
Default
The state of a marker in reports and tables.
Optimal
Optimal
Watch
Watch
Act
Act
Flat
Flat
Where a value sits inside its range.
Optimal
Watch
Act
Programme card on a raised surface, used on Home.
Default
Compact doctor card with portrait and role.
Default
Send button on /contact, with its success state.
Default
Success
One body system on /diagnostics.
Default
One marker in a results table.
Act
Optimal
Watch
One line of the sample report.
Act
Watch
In range
Step panel of the how it works section on Home. Steps 2 to 4 are variants of it.
Step 1
Questions, open and closed.
Open
Closed
Title and subtitle pair for sections.
What we measure
Seven systems, one morning, one report you can read.
Section header (pattern)
What we measure
Seven systems, one morning, one report you can read.
Align=Left
Article data inserts: number, chart, table.
Single
Three Rows
Programmes, index and related.
Vertical
Index
Results, by direction of change.
ApoB
Borderline LDL on a standard panel. Her particle count said act now.
132
→
78
mg/dL
↓ Down
Down
ApoB
Borderline LDL on a standard panel. Her particle count said act now.
132
→
78
mg/dL
↓ Down
Up
ApoB
Borderline LDL on a standard panel. Her particle count said act now.
132
→
78
mg/dL
↓ Down
Flat
Journal index and related articles.
Featured
Team index and related.
Medical director
Reg. no. 28/2814517
Default
Membership plans.
Most members
€1,900
once
Deducted in full if you join within 60 days.
One morning, every test, a physician readout and a written plan you keep.
120 biomarkers, 62 from one blood draw
DEXA, VO2 max and carotid ultrasound
14 days of glucose and HRV at home
90-minute physician readout
Written 12-month plan
Video review on day 15
Featured
€1,900
once
Deducted in full if you join within 60 days.
One morning, every test, a physician readout and a written plan you keep.
120 biomarkers, 62 from one blood draw
DEXA, VO2 max and carotid ultrasound
14 days of glucose and HRV at home
90-minute physician readout
Written 12-month plan
Video review on day 15
Default
Text field in each state.
Default
Name
Carmen López
Focus
Name
Carmen López
Filled
Name
Carmen López
Please tell us your name.
Error
Name
Carmen López
Disabled
Page-level
These run edge to edge: Kerno/Nav, Kerno/CTA Band and the notice strip. Kerno/Footer is the one at the bottom of this page, and it swaps variant at each breakpoint. Nav and Footer are placed once, in the layout template Kerno/Layout.
The block that lists a body system on /diagnostics, in its four layouts. Copy a section from that page and change the text.
Text left
System 01
22
markers
What it tells you
Whether your particle count puts you at risk of plaque
What it does not
Whether a plaque has already formed
Instruments
Fasted blood panel, carotid ultrasound, 12-lead ECG
Duration
40 minutes of the baseline morning
ApoB
Watch
0.92
g/L
0.40
1.40
Target
Below 0.80 g/L
Venous sample at 07:30, fasted 10 h. The lab flags only above 1.30 g/L; our target is stricter.
Text right
System 01
22
markers
What it tells you
Whether your particle count puts you at risk of plaque
What it does not
Whether a plaque has already formed
Instruments
Fasted blood panel, carotid ultrasound, 12-lead ECG
Duration
40 minutes of the baseline morning
Photo right
System 01
22
markers
What it tells you
Whether your particle count puts you at risk of plaque
What it does not
Whether a plaque has already formed
Instruments
Fasted blood panel, carotid ultrasound, 12-lead ECG
Duration
40 minutes of the baseline morning
ApoB
Watch
0.92
g/L
0.40
1.40
Target
Below 0.80 g/L
Venous sample at 07:30, fasted 10 h. The lab flags only above 1.30 g/L; our target is stricter.
Photo left
System 01
22
markers
What it tells you
Whether your particle count puts you at risk of plaque
What it does not
Whether a plaque has already formed
Instruments
Fasted blood panel, carotid ultrasound, 12-lead ECG
Duration
40 minutes of the baseline morning
ApoB
Watch
0.92
g/L
0.40
1.40
Target
Below 0.80 g/L
Venous sample at 07:30, fasted 10 h. The lab flags only above 1.30 g/L; our target is stricter.
Keep one on every page that shows a member outcome.
Fixed on every page. Clear over a photo, a frosted pill once it leaves the photo.
Desktop Top
Desktop Scrolled
The closing section. Keep it on every page; change the words through its controls.
