Foundations

Colour

Ten tokens, one gradient and a strict balance: about 85% white and zinc, under 5% gradient. Everything bright in a Lario page is a photograph.

The palette

Solid Dark

#27272A

Headings, primary button, wordmark, open FAQ item, photo fades

Charcoal

#606063

Running text, nav, pill text and icons

Gray

#D4D4D8

Disabled and placeholder only

Light Gray

#E4E4E7

Pill, image-well and boxed-card borders

Extra Light Gray

#EBEBEB

Card borders, header and footer rules, dot texture

XXL Grey

#FAFAFA

Image wells, check chips, text on ink

Solid White

#FFFFFF

Canvas and cards

Blue 100 (misnamed)

#8CC63F

Brand gradient; decorative line icons on stat cards

Turkuaz

#7EE5FC

Brand gradient, light end

Orange

#FF7700

Rating stars only

Tokens

Every colour is a custom property on :root. Components never carry a literal hex value - if a value is not in this table it does not belong in a Lario surface.

Token	Hex	Framer name	Role
`--lr-ink`	#27272A	Solid Dark	Headings, primary button, wordmark, open FAQ item, photo fades
`--lr-ink-2`	#606063	Charcoal	Running text, nav, pill text and icons
`--lr-gray`	#D4D4D8	Gray	Disabled and placeholder only
`--lr-line`	#E4E4E7	Light Gray	Pill, image-well and boxed-card borders
`--lr-line-soft`	#EBEBEB	Extra Light Gray	Card borders, header and footer rules, dot texture
`--lr-mist`	#FAFAFA	XXL Grey	Image wells, check chips, text on ink
`--lr-paper`	#FFFFFF	Solid White	Canvas and cards
`--lr-lime`	#8CC63F	Blue 100 (misnamed)	Brand gradient; decorative line icons on stat cards
`--lr-turquoise`	#7EE5FC	Turkuaz	Brand gradient, light end
`--lr-star`	#FF7700	Orange	Rating stars only

The gradient

Lime to turquoise at 135 degrees, turning at 60%. On the live site the logo tile runs a slow shader; everywhere else it is this static gradient. It belongs on squircle tiles - the logo, 56px and 86px icon tiles, the rating tile - and on at most one promo card per page.

--lr-fresh: linear-gradient(135deg, #7EE5FC 0%, #8CC63F 60%);

Do. Put the gradient on a tile with a white glyph on it.

Start for freeGradient text

Don't. Use it on a button, on text, on a border or as a page background. White on lime is 2.0:1.

Contrast

Measured pairs. Anything not listed here has not been checked, so check it before you ship it.

Pair	Ratio	Verdict
Ink on white	14.9:1	Headings and controls at any size
Charcoal on white	6.3:1	The lightest text grey allowed on white
Mist on ink	14.3:1	Text on the primary button and the open FAQ item
Ink on lime	7.3:1	The only text that may sit on the gradient
White on lime	2.0:1	Fails. Glyphs and icons only, never words
White on turquoise	1.4:1	Fails. Never

White text on a photo needs the photo fade, lr-stage--scrim or a scrim background, and belongs in the upper sky where the image is darkest and calmest.

Inherited mistakes

The source site carries four problems from the template it was built on. They are recorded here so nobody copies them forward.

White text on a green card at 2.0:1.
Links that hover to #D4D4D8, a 1.5:1 change. Links hover to ink.
Three unused template blues: #376F9B, #689ECB, #84ACD1.
A lime token named Blue 100 in Framer. The name is wrong; the value is right.