Figma Design Tokens

Sqior Healthcare Platform Analysis

Report by Eni Veshi

Overview

📊
Two-Tier Architecture
The token system follows a sophisticated two-tier structure:
  • Primitive Tokens: Foundation layer with base values for colors, sizes, and spacing
  • Semantic Tokens: Context-specific tokens that reference primitives for component styling
🎯
Completion Status
Overall Completeness 70%
✓ Desktop ✓ Phone ✗ Tablet
🚀
Key Features
  • Dark/Light mode support
  • Responsive breakpoints
  • Comprehensive color system
  • Component-specific tokens
  • Healthcare-specific colors

Token Files Structure

1. token_Primitive_Value.json ✓ Complete
├── BorderRadius (9 values)
├── BorderWidth (Small, Medium, Large)
├── Breakpoints (Desktop, Tablet, Phone)
├── Colours
│ ├── Neutral (10 shades)
│ ├── Primary (10 shades)
│ ├── Secondary (5 shades)
│ ├── Status (Error, Success, Warning, Info)
│ └── Specials (Female, Male, Gold)
├── Effects (Shadows, Frosted Glass)
├── Motion (11 duration values)
├── Spacings (13 values)
└── Typography (Families, Sizes, Weights)
2. token_Semantic_DarkMode.json & LightMode.json ✓ Complete
├── Base (Background, shapes, borders, fonts)
├── Buttons (Primary, Secondary, Tertiary)
├── Navigation (States included)
├── Inputs (AI-specific variants)
├── Interactive Cards
├── Toggles (Pill, Switch)
└── Clock Component
✅
Desktop Breakpoint
Component heights: 45px
Font sizes: Properly configured
Body spacing: 12px
✅
Phone Breakpoint
Component heights: 36px
Scaled font sizes
Body spacing: 8px
⚠️
Tablet Breakpoints
INCOMPLETE:
Most font sizes set to 0
Body spacing set to 0
Needs immediate fixing

Color Palette

Primary Brand Colors

50
Dark Blue
100
Deep Blue
300
Primary
400
Light Blue
500
Pale Blue

Status Colors

Error
Red
Success
Green
Warning
Yellow
Info
Blue

Special Colors

Female
Pink
Male
Blue
Gold
Premium

Typography System

🔤
Font Families
Primary: Be Vietnam Pro
Secondary: Inter
📏
BaseUI Sizes
Hero: 48px
Headline1: 24px
Headline2: 20px
Title: 16px
Body1: 14px
Body2: 12px
🖥️
DoorSign Sizes
For large displays:

Hero: 72px
Headline: 50px
Title: 32px
Body: 24px

Critical Issues 🔴

1. Incomplete Tablet Breakpoints

TabletLandscape and TabletPortrait have most font sizes set to 0. This will cause tablet layouts to have no text or broken spacing.

// Current (BROKEN)
"FontSize": {
  "Body1": { "$value": 0 },
  "Body2": { "$value": 0 }
}

2. Single Font Weight

Only "500 Regular" is defined. Missing Light (300), Medium (500), SemiBold (600), Bold (700). Cannot create proper typographic hierarchy.

3. No Fallback Fonts

Font families don't include fallback fonts. Text won't render if custom fonts fail to load.

Important Gaps ⚠️

Missing Typography Tokens

  • Line heights
  • Letter spacing
  • Text transform rules

Incomplete Shadow System

Dropshadow values all set to 0. No box-shadow tokens defined. UI will lack depth/elevation.

Missing Animation Tokens

  • Easing curves (ease-in, ease-out, etc.)
  • Transition properties

Recommended Actions

🚨
Immediate Priority
  1. Fix Tablet Breakpoints
    Replace all 0 values with actual font sizes
  2. Add Font Weights
    Define Light, Regular, Medium, SemiBold, Bold
  3. Define Shadow System
    Create Small, Medium, Large shadow tokens
📋
Short Term
  1. Add line heights and letter spacing
  2. Define z-index layers
  3. Add easing curves for animations
  4. Create layout constraint tokens
  5. Add fallback fonts
🎯
Long Term
  1. Document usage guidelines
  2. Add missing component tokens
  3. Create icon size tokens
  4. Define print-specific tokens
Example Fix for Tablet Breakpoints:

// TabletLandscape and TabletPortrait should have:
"FontSize": {
  "Body1": { "$value": 13 },    // Not 0
  "Body2": { "$value": 11 },    // Not 0
  "Title": { "$value": 15 },    // Not 0
  // etc.
}
Example Font Weights:

"FontWeight": {
  "Light": { "$type": "number", "$value": 300 },
  "Regular": { "$type": "number", "$value": 400 },
  "Medium": { "$type": "number", "$value": 500 },
  "SemiBold": { "$type": "number", "$value": 600 },
  "Bold": { "$type": "number", "$value": 700 }
}

Strengths ✅

📂
Well-Organized Structure
Clear separation of primitive and semantic tokens with logical naming conventions and comprehensive button state coverage.
🎨
Good Color System
Rich neutral palette for dark themes, all necessary status colors, and opacity variants for backgrounds.
🔗
Complete Semantic Layer
Most UI components have semantic tokens with dark and light modes properly separated and interactive states well-defined.