LEMMOUI
HomeDesign System
Single Source of Truth — 100% Audit Complete

Lemmo Design System

Complete design specification extracted verbatim from System_design and audited against reference standards. Strictly dark-only with zero raw hex in components.

Live Theme: neon

Brand Accent Palette

Signature vibrant accents calibrated for obsidian dark canvases (docs/color.md §1 & §2).

Surface & Canvas Hierarchy

Dark-only surface ladder creating physical depth without noisy outlines (docs/color.md §1).

Page Primary

#131517

Standard canvas page background

--lemmo-color-page-primary

App Background

#131416

Application shell viewport background

--lemmo-color-app-background

Surface Tertiary

#0F1113

Deepest backdrop surface (pricing bg)

--lemmo-color-surface-tertiary

Surface Primary

#1C1E20

Default card & panel surface

--lemmo-color-surface-primary

Surface Secondary

#23262A

Raised surface & popover menus

--lemmo-color-surface-secondary

Surface Elevated

#18191C

Gradient base & elevated layers

--lemmo-color-surface-elevated

Surface Glass

rgba(15,17,19,0.88)

Translucent frosted glass card

--lemmo-color-surface-glass

Status Color Matrix & WCAG AA Verification

Sourced directly from reference product audit (docs/color.md §5). Text roles use the bright AA-passing tone.

Danger / Critical
WCAG AA 5.84:1 PASS
Errors, destructive actions, negative alerts
Notification: Status alert live message#FF5462
Main FG
Text Soft
Dark BG
Glow
Text: --lemmo-color-status-danger-fg-softBG: --lemmo-color-status-danger-bg
Warning
WCAG AA 8.68:1 PASS
Caution, expiring limits, pending actions
Notification: Status alert live message#FFEF33
Main FG
Text Soft
Dark BG
Glow
Text: --lemmo-color-status-warning-fgBG: --lemmo-color-status-warning-bg
Success
WCAG AA 10.99:1 PASS
Positive confirmations, connected states
Notification: Status alert live message#4EE466
Main FG
Text Soft
Dark BG
Glow
Text: --lemmo-color-status-success-fg-softBG: --lemmo-color-status-success-bg
Information
WCAG AA 6.04:1 PASS
System announcements, helpful tooltips
Notification: Status alert live message#5B91FE
Main FG
Text Soft
Dark BG
Glow
Text: --lemmo-color-status-info-fg-softBG: --lemmo-color-status-info-bg

Typography & Multi-Language Architecture

Four fonts with dedicated roles, automatic [lang="fa"] switching, and isolated numerals (docs/typography.md).

Display / Hero (EN)

Oddval (600) / Satoshi · 4rem (64px)

Autonomous AI Synthesis

Section Heading (EN)

Oddval / Satoshi · 2rem (32px)

Design System Primitives

Persian Heading (FA)

Morabba (400-700) · 2rem (32px)

سیستم طراحی مستقل لِمو

Persian Body (FA)

IRANSansX (Variable) · 0.875rem (14px)

توسعه رابط کاربری مدرن با معماری تم‌های تعویض‌پذیر و توکن‌های پایدار.

English Body & UI (EN)

Satoshi (Variable) · 0.875rem (14px)

Decoupled components adhering to WCAG AA contrast rules.

Isolated Numerals (All)

Satoshi [data-numeric] · 1rem (16px)

قیمت: $299.00 — 2026-09-14 — 99.98% SLA

Mandatory Numeral Rule: [data-numeric] & .tabular-nums

In Persian and RTL contexts, all numbers, stats, and prices must carry [data-numeric]. This forces rendering in Satoshi with direction: ltr and unicode-bidi: isolate so digits never break inside Persian text.

Iconography Ladder & Rendering Rules

Strict 5-step ladder, locked to Synthline with 1.5 stroke-width and currentColor (docs/iconography.md).

icon-xs

12px (0.75rem)

Dense tables, ultra-compact list rows

icon-sm

16px (1rem)

Default inline buttons & inputs

icon-md

20px (1.25rem)

Control headers, form labels

icon-lg

24px (1.5rem)

Section titles, navigation bars

icon-xl

28px (1.75rem)

Featured cards, large highlight badges

Radius Matrix (Quarter-Rem Ladder)

Proportional scaling ladder from micro tags up to full outer window shells (lemu.radius.css).

Pill / Full

9999px

Badges, status chips, pills

Featured Card

1.25rem (20px)

Featured pricing & modal shells

Media Card

1rem (16px)

Media players, image frames

Card / Panel

0.75rem (12px)

Standard cards, tables, CTA button

Control

0.5rem (8px)

Standard buttons, text inputs

Badge

0.375rem (6px)

Micro tags, small badges

Sharp (Zero)

0px

Minimalist & square boundaries

Elevation & Signature Brand Gloss

Multi-layer inset bevel stacks producing tactile physical controls (docs/color.md & lemu.elevation.css).

Brand Primary CTA Gloss Stack
Triple inset edge stack with ambient drop shadow
box-shadow: inset 0 0.8px 0 0 #d1fe17,
            inset 0 -1.6px 0 0 #829b19,
            inset 0 -2.4px 0 0 #829b19,
            10px 34px 24px 0 rgba(0,0,0,0.15);
Brand Breathe Glow
Soft ambient lime breathing effect for focus & status states
Design Tokens Verified & Active
box-shadow: 0 0 0.4rem color-mix(
  in srgb,
  var(--lemmo-color-surface-brand) 56%,
  transparent
);
← Token ContractExplore Components