GROWLEAFY DESIGN SYSTEM · PHASE 1
One identity.
One design language.
Semantic tokens shared by every GrowLeafy surface — the website, User App, Business Portal, Partner, Team, Developer and Control Center. Density differs by surface; meaning never does.
Brand & neutrals
Primary
--gf-primary
Primary hover
--gf-primary-hover
Primary soft
--gf-primary-soft
Primary strong
--gf-primary-strong
Ink
--gf-ink
Surface
--gf-surface
Background
--gf-background
Semantic status
Success
--gf-success
Warning
--gf-warning
Error
--gf-error
Info
--gf-info
Verified / Connected
--gf-verified · --gf-connected
Pending
--gf-pending
Revoked / Suspended
--gf-revoked
Lost
--gf-lost
Revenue
--gf-fin-revenue
Refund
--gf-fin-refund
Failed
--gf-fin-failed
Settled
--gf-fin-settled
Typography
Display — Give every physical thing a digital identity.
H1 — The identity and connectivity layer
H2 — Asset network
H3 — Manufacturer · Distributor · Owner
Body — GrowLeafy connects physical assets with people, organizations and services through one persistent digital identity.
LABEL — METADATA
Caption — secondary information, timestamps, references.
12,482
POST /v1/assets/bulk · scopes: assets:write
Spacing · Radius · Motion · Density
4px grid: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 — radius sm 8 / md 12 / lg 16 / xl 22 — motion 120/220/380ms with a calm cubic-bezier, always behind
prefers-reduced-motion — density modes Comfortable / Standard / Compact for enterprise tables, comfortable only for the User App.Status vocabulary (one language everywhere)
ACTIVE · PENDING · VERIFIED · CONNECTED · SUSPENDED · REVOKED · FAILED · WARNING · CRITICAL · EXPIRED · LOST · FOUND · PROCESSING · COMPLETED — rendered with the same component in Admin, Business, Partner and the apps.
Components (registered)
GFButton · GFInput · GFSelect · GFTerritorySelector · GFSearch · GFCommandPalette · GFTable · GFMetric · GFStatus · GFDrawer · GFModal · GFStepper · GFTimeline · GFGraph · GFLifecycle · GFAssetCard · GFIdentityCard · GFEmptyState · GFErrorState · GFSkeleton · GFToast — each defines Loading / Empty / Success / Error / Offline states before implementation.
