Role & Project Context
Design System Owner & Product Designer
- System foundations → Defined color, spacing, and typography tokens to unify the brand.
- Components & patterns → Built reusable Figma + coded components to scale across iOS, Android, Web.
Scaling Lenme with a unified Design System
Collaborated closely with engineers to align Figma + code libraries, cutting delivery time by 40%.
Project Overview — Lenme Design System (LDS)
A design system is a collection of reusable tokens, patterns, and components—guided by clear standards—that can be composed to build countless experiences. At Lenme, the Lenme Design System (LDS) brings scale, efficiency, and consistency to our product surface, turning design chaos into order.
iOS uses size classes to adapt layouts. Use Compact on iPhone-like widths and Regular on iPad-like widths. Margins are container-level.
Main Size Classes
System defaults: Compact width margin 16pt, Regular width margin 20pt. Values shown in pixels for this web demo.
Typically iPhone portrait; keep actions stacked and content concise.
iPad / expansive space; allow multi-column or side panels.
Regular Full-width Subclass
On Regular width you may opt into a wider reading area (40pt margins). Recommended when container ≥ 768pt.
Lenme Spacing — 8px Grid
| Token | Value | Typical usage | Visual |
|---|---|---|---|
| --ls-8 | 8px | Small gaps, icon padding | |
| --ls-16 | 16px | Default component padding, grid gap | |
| --ls-24 | 24px | Card inner spacing, list item vertical | |
| --ls-32 | 32px | Section inner padding | |
| --ls-40 | 40px | Dense section spacing | |
| --ls-48 | 48px | Card stacks / modal gutters | |
| --ls-64 | 64px | Large section spacing | |
| --ls-80 | 80px | Hero top/bottom padding | |
| --ls-96 | 96px | Hero / marketing blocks |
| Token | Value | When to use | Visual |
|---|---|---|---|
| --ls-4 | 4px | Chip/Tag tight padding, icon nudges | |
| --ls-0 | 0px | Remove default gaps |
Lenme Color System — Reorganized
| Swatch / Hex | Name | Usage |
|---|---|---|
#FFFFFF |
Primary Background (Light) |
Default surface for pages, tables, and content areas. |
#F8F7F9 |
Secondary Background (Light) |
Used for grouping, cards, or secondary panels. |
#EAEAEA |
Tertiary Background (Light) |
Less prominent surfaces, subtle dividers. |
#232323 |
Primary Background (Dark) |
Main background in dark mode. |
#2F2F2F |
Secondary Background (Dark) |
Cards or secondary panels in dark mode. |
#232323 @40% |
Background Blur / Overlay |
Overlay or modal backdrop with blur utility |
| Swatch / Hex | Name | Usage |
|---|---|---|
#151515 | Text / Primary | Main text on light surfaces. |
#585858 | Text / Secondary | Supporting text, captions. |
#838383 | Text / Tertiary | Less emphasis, hints. |
#B4B4B4 | Text / Disabled | Disabled or inactive state labels. |
#FFFFFF | Text on Dark | Text on dark backgrounds. |
#C9BDFF | Text / Accent Light | Highlight or decorative text. |
| Swatch / Hex | Name | Usage |
|---|---|---|
#7659FB | Primary Tint | Primary buttons, links, highlights. |
#05E4B5 | Success Action | Positive actions like confirm/complete. |
#FFDA69 | Warning Action | Attention actions, warning badges. |
#FFCE38 | Warning Emphasis | Strong warning emphasis. |
| Swatch / Hex | Name | Usage |
|---|---|---|
#E42121 | Error / Critical | Errors, failure, danger states. |
#E74646 | Error / Base | Error buttons, labels, alerts. |
#05E4B5 | Success | Success, completed states. |
#FFDA69 | Warning | Pending or caution states. |
#7659FB | Info / Accent | Informational or highlight states. |
| Swatch / Hex | Name | Usage |
|---|---|---|
#FFDA69 @20% | Yellow / 20% Opacity | Soft warning background. |
#05E4B5 @20% | Green / 20% Opacity | Soft success background. |
#7659FB @20% | Violet / 20% Opacity | Soft info/accent background. |
#E74646 @20% | Red / 20% Opacity | Soft error background. |
Lenme Typography — Poppins
Card
The card body is the main content area beneath a header. It holds key details or supporting components—lists, charts, forms—so you can build card types like chart cards, list cards, and object cards. Lenme cards group information clearly and keep the experience quick to scan.
Set your own pay back period!
Profile details
Loan amount
EditWhere are they used?
Anywhere users type text: sign up / login, KYC, address forms, loan/invest flows, settings, search bars, and inline edits.
States (top → bottom)
Default — Not focused yet; placeholder only; neutral border.
Active (Focused) — Caret visible; focus ring/border highlights the current field.
Typing — Focused and user is entering text; placeholder is replaced by input.
Typed — Value present, not focused; returns to neutral styling but keeps content.
Disabled — Not editable; reduced contrast and “not-allowed” cursor; still readable.
Read-only — Not editable but selectable/copyable; no focus emphasis.
Error — Validation failed; red border + icon + short message
Toast
A toast is a small, lightweight notification that appears as a temporary pop-up. It provides short feedback in response to an action or system event, without interrupting the current task flow. Toasts in Lenme communicate new information, confirm a completed action, or surface errors and warnings — always outside the user’s primary focus.
Two lines
Toast text filled need to be less than three lines.
Toast text filled need to be less than three lines.
Toast text filled need to be less than three lines.
Toast text filled need to be less than three lines.
One line
Toast text for status update
Toast text for status update
Toast text for status update
Toast text for status update