Design System

LeanLiver Style Guide

Shared visual language for the LeanLiver marketing website and PWA webapp. Adapted from the SEADS Systems design language — Montserrat type, midnight-blue surface, azure accent, pill buttons and rounded glow cards — extended with the liver traffic-light palette and health components LeanLiver needs.

01

Colors

Brand palette carried over from SEADS. The traffic-light greens/ambers/reds are LeanLiver additions — the entire food experience depends on them.

Brand

Midnight
#051229
Midnight Tint
#0A2445
Navy
#0E3360
Slate
#355D8E
Azure (accent)
#0092D3

Liver Traffic Light (LeanLiver)

Green — liver-friendly
#22B07A
Amber — caution
#F5B700
Red — avoid
#E9473F
Orange — warning
#FF7F30

Semantic roles

TokenValueUse
--c-successGreenHealthy choice confirmed, green meal
--c-infoAzureLinks, focus, primary accent
--c-warningAmberCaution, rapid-loss / muscle nudges
--c-dangerRedAvoid, errors, safety blocks
--c-disabled#D4D2C8Disabled controls

02

Typography

Montserrat, root size 17px, body weight 300, line-height 1.4. Headings scale up at the 940px breakpoint. Content is bilingual (English + Hinglish) — Montserrat covers Latin; pair with a Devanagari face for Hindi.

H1 — Reset your liver, one habit at a time

H2 — This week's green meals

H3 — Post-meal walk

Body (300). Help adults with Grade 1–2 fatty liver lose 5–10% weight in 12 weeks through sustainable, Indian, liver-friendly habits — not crash diets.

Thin 100 Light 300 Regular 400 Medium 500 Bold 700 Italic

Aa — .heading-mega display scale

03

Spacing

Base unit 10px. Classes .spacing, .spacing-2 … .spacing-10 (and .spacing-half) with direction suffixes -t -b -l -r -h -v.

half · 5px
1 · 10px
2 · 20px
3 · 30px
5 · 50px
8 · 80px
10 · 100px

04

Layout

Containers .container-sm 640 · -mid 940 · -lg 1200 · -xl 1500. 12-column .row / .col grid with responsive suffixes -sm -mid -lg. Breakpoints: 640 / 940 / 1200.

col-6 / col-3-mid
col-6 / col-3-mid
col-6 / col-3-mid
col-6 / col-3-mid

05

Buttons

Pill shape (27px radius), 46px min height. Use .btn--accent (azure) for the main app CTAs — Log Meal, Start Walk.

06

Forms

Please enter a number.

07

Cards

Rounded panel on the midnight-tint surface. Hover reveals the azure border; add .card--glow for the SEADS-style glow.

Learn card

Why is sugar worse than ghee for your liver? 2-min read.

Weekly check-in

Log Sunday weight & waist to generate your doctor PDF.

08

Liver Traffic Light

Core to US-03: every food gets a green/amber/red light, a one-line reason, and a swap. Never a calorie verdict or medical claim.

Green Amber Red
Chicken Biryani + Coke Red

Fried + sugary drink = high fructose load.

Try: Veg Pulao + curd, skip the Coke.
Moong Dal + Bajra Roti Green

High fibre + protein, low glycemic load.

Nice choice — this is a green meal.

09

Activity Rings

Today Dashboard. Set --pct inline (0–100). Three rings: Eat Clean, Move, Recover.

Eat
75%
Move
50%
Recover
40%

10

Badges & Indicators

+10 Liver Points 🔥 7-day alcohol-free You

11

Notices & Safety

Inline .notify variants, plus the .disclaimer callout that must appear on onboarding, the doctor PDF and Learn.

Logged. +10 Liver Points for your post-lunch walk.
Gentle heads-up. Low protein + no strength for 3 days — consider discussing protein & resistance training with your doctor.
Couldn't save. Check your connection and try again.
For lifestyle support and education only. LeanLiver does not diagnose, treat, or cure fatty liver disease, diabetes, or obesity, and does not prescribe medicines. Please speak to a healthcare professional before starting any weight-loss, diet, or exercise program.