LAVI · UX Case Study
·
Duration: 8 weeks·
Role: Certified UX Designer (solo)·FigmaVS Code·
Section 10 of 12
10: UI design documentation
LAVI design system
The LAVI design system was built and documented in Figma. Every token, component, and rule is traceable to a research insight or a usability testing finding. This section documents the system as it was delivered for developer handoff.
Design principles
01
Clarity over complexity
Every screen must be understandable at a Flesch-Kincaid grade 6 reading level. If a clinical term appears anywhere in the app, a plain-language alternative must follow immediately, never assume medical knowledge.
02
Tone before information
Health anxiety is the baseline emotional state of our users. Visual language, color, iconography, copy, must first de-escalate before it informs. A user who feels frightened cannot process information effectively. Tone is a functional design decision, not a stylistic one.
03
Language is identity, not a setting
Choosing Haitian Creole or Spanish is a statement of self. Language selection must be the first interaction, permanently accessible, and stigma-free, never treated as an accessibility feature buried in settings.
Color system
Forest
#0E4D34
Header, hero, primary bg
LAVI green
#1A6B4A
Brand, CTAs, active nav
Leaf
#2D9B68
Success, urgency OK
Mint
#EAF5EF
Success fills, selected states
Sage
#7ECBA8
Accent text on dark bg
Amber
#EF9F27
Caution urgency states
Warm cream
#FFF4E5
Warning fills, alert bg
Alert red
#E24B4A
Error states + emergency
Off-white
#F6F6F4
Page bg, surface fills
Near-black
#1A1A18
Body text, headings
Color usage rules: Red (#E24B4A) is used in two specific contexts: (1) form validation and failed scan error states within the app, and (2) the emergency access column in the site map and any "call 911" CTA, where urgency and immediate action are the intent. Red is never used for general health urgency states. Those use amber (#EF9F27) to avoid triggering anxiety before users have read the content, a decision validated in usability testing (Finding F4). All urgency states are paired with an icon and text label so color is never the only indicator.
Typography
App name
DM Sans · 22px · wt 500 letter-spacing: 0.02em
LAVI
Screen title
DM Sans · 18px · wt 500 line-height: 1.2
Tcheke senbòl ou
Section heading
DM Sans · 15px · wt 500 line-height: 1.3
Kisa pou w fè kounye a
Body text
DM Sans · 14px · wt 400 line-height: 1.7
Sa ka se estrès oswa refleks asid. Pa bezwen lopital kounye a. Veye pandan 24 zè.
Typography rules: DM Sans was chosen for its large open apertures and exceptional legibility at small sizes, critical for users who hold phones at arm's length or have lower vision. Minimum body text size in the production app is 14px. Note: portfolio documentation screens (phone frame mockups) use smaller text for representational purposes only, this does not reflect the actual app's type scale. WCAG 2.1 AA requires a 4.5:1 contrast ratio for normal text; all text in the LAVI system meets or exceeds this threshold.
Spacing system
4px
Icon-to-label gap · tight internal padding
8px
Card compact padding · chip gap
12px
Grid gap · between list items
16px
Card standard padding · section internal gap
24px
Screen horizontal padding · between sections
32px
Major section breaks · bottom safe area
48px
Screen top padding · hero padding
Spacing rationale: All values are multiples of a 4pt base unit · a standard grid system that ensures consistent rhythm and clean developer handoff. Pixel bars above are scaled proportionally for documentation. The 4pt base was chosen because it divides evenly at common mobile densities (1×, 2×, 3× DPI) and aligns with both iOS HIG and Material Design spacing conventions.
Core components
Buttons
Tcheke senbòl yo
Jwenn Doktè
Pataje
primary: bg #1A6B4A · color #fff · r-10px · wt-500secondary: transparent · border #1A6B4A · color #1A6B4Aghost: surface bg · border rgba(0,0,0,0.1)min-tap: 44×44px · WCAG 2.1 AA touch target
Urgency states
Repoze lakay ou
Rest and monitor at home.
Ale kay doktè ou
See a doctor within 24–48 hours.
Ale lopital touswit
Go to ER now, never use red alone, always pair with icon.
green: bg #EAF5EF · border #2D9B68 · rest at homeamber: bg #FFF4E5 · border #EF9F27 · see doctor (post-test)red: bg #FCEAEA · border #E24B4A · ER / emergency onlyrule: color always paired with icon + text label
Language toggle
KreyòlEspañolEnglish
placement: persistent global top nav baractive: bg #1A6B4A · color #fff · wt-500inactive: transparent · border rgba(0,0,0,0.1)trigger: full app re-render in selected languagenote: moved to global bar post usability test F1