Lotus Vita Design System

Figma-linked colors, typography, spacing, components, and native interactions.

Color primitives

Neutral/Stone/700 · #585858
var(--lv-color-stone-700)

Neutral/Stone/900 · #1D1D1B
var(--lv-color-stone-900)

Neutral/Cream/50 · #F8F8F8
var(--lv-color-cream-50)

Neutral/Cream/100 · #F9F6F4
var(--lv-color-cream-100)

Neutral/Cream/200 · #F3ECE7
var(--lv-color-cream-200)

Brand/Sage/500 · #738063
var(--lv-color-sage-500)

Status/Success · #5E8C61
var(--lv-color-success)

Status/Warning · #D7A14A
var(--lv-color-warning)

Status/Error · #B85C5C
var(--lv-color-error)

Neutral/Stone/300 · #C1C1C1
var(--lv-color-stone-300)

Neutral/Cream/25 · #FCFCFC
var(--lv-color-cream-25)

Neutral/Cream/400 · #D8D3CF
var(--lv-color-cream-400)

Neutral/White · #FFFFFF
var(--lv-color-white)

Supporting/Green/500 · #5F9B63
var(--lv-color-green-500)

Brand/Sage/400 · #899976
var(--lv-color-sage-400)

Brand/Sage/700 · #58634B
var(--lv-color-sage-700)

Neutral/Stone/800 · #353635
var(--lv-color-stone-800)

Neutral/Stone/600 · #5F625F
var(--lv-color-stone-600)

Supporting/Green/50 · #F2F5F0
var(--lv-color-green-50)

Neutral/Stone/500 · #8A8A8A
var(--lv-color-stone-500)

Supporting/Red/200 · #E3C5C5
var(--lv-color-red-200)

Supporting/Green/25 · #F5F7F0
var(--lv-color-green-25)

Status/Info · #6B8BB6
var(--lv-color-info)

Semantic paint styles

Background/Extra Light white
lv-style-background-extra-light-white → var(--lv-color-cream-25)

Background/Light
lv-style-background-light → var(--lv-color-cream-100)

Background/Regular
lv-style-background-regular → var(--lv-color-cream-200)

Background/White
lv-style-background-white → var(--lv-color-white)

Background/Card
lv-style-background-card → var(--lv-color-cream-50)

Background/Card Light
lv-style-background-card-light → var(--lv-color-white)

Body Text/Regular
lv-style-body-text-regular → var(--lv-color-stone-800)

Body Text/Muted
lv-style-body-text-muted → var(--lv-color-stone-600)

Body Text/Heading Accent
lv-style-body-text-heading-accent → var(--lv-color-sage-400)

Body Text/White
lv-style-body-text-white → var(--lv-color-white)

Body Text/Accent
lv-style-body-text-accent → var(--lv-color-green-500)

Lines/Regular
lv-style-lines-regular → var(--lv-color-stone-300)

Lines/Light
lv-style-lines-light → var(--lv-color-cream-400)

Button/Primary
lv-style-button-primary → var(--lv-color-sage-500)

Button/Primary light
lv-style-button-primary-light → var(--lv-color-sage-400)

Button/Primary Dark
lv-style-button-primary-dark → var(--lv-color-sage-700)

Button/Light
lv-style-button-light → var(--lv-color-cream-100)

Icons/Light
lv-style-icons-light → var(--lv-color-stone-300)

Icons/Med
lv-style-icons-med → var(--lv-color-stone-700)

Icons/Dark
lv-style-icons-dark → var(--lv-color-stone-900)

Icons/Accent
lv-style-icons-accent → var(--lv-color-sage-400)

Icons/Warning
lv-style-icons-warning → var(--lv-color-warning)

Body Text/Primary
lv-style-body-text-primary → var(--lv-color-sage-500)

Body Text/Primary Dark
lv-style-body-text-primary-dark → var(--lv-color-sage-700)

Icons/Primary
lv-style-icons-primary → var(--lv-color-sage-500)

Form/Background green
lv-style-form-background-green → var(--lv-color-green-50)

Form/Card Background green
lv-style-form-card-background-green → var(--lv-color-white)

Form/Input Background green
lv-style-form-input-background-green → var(--lv-color-white)

Form/Form Text Light
lv-style-form-form-text-light → var(--lv-color-stone-500)

Button/Icon
lv-style-button-icon → var(--lv-color-white)

Icons/Negative
lv-style-icons-negative → var(--lv-color-error)

Icons/Backround negative
lv-style-icons-backround-negative → var(--lv-color-red-200)

Lines/Accent
lv-style-lines-accent → var(--lv-color-green-500)

Background/Green light
lv-style-background-green-light → var(--lv-color-green-25)

Background/Statement Dark
lv-style-background-statement-dark → var(--lv-color-sage-700)