Design Specs

Comprehensive design specifications for the Simsalasim Design System. This document explains how the design is composed so that LLMs, developers, and designers can understand and reproduce it faithfully. Source: Simsalasim - Design System (Figma), file key AWjyHyds8Nc0jsVsmi5Xt6 Last synced: 28 March 2026

How the Design System Works

Architecture Overview

The system follows atomic design methodology across 7 content pages in Figma: Atoms (primitives), Molecules (69 component sets), Icons (1,221 standalone + 16 sets), Charts (26 types), Apps (representative third-party app icons for prototyping), OS (iOS components), Documentation (rules and guidelines).

Total inventory: 105 component sets, 1,705 variants, 1,266 standalone components.

Dark Mode vs Light Mode

Core Principle

Token-based theming. Components do NOT have separate dark/light variants. Same components reference semantic tokens that resolve to different values per mode. Only 3 iOS system components (StatusBar, AlphabeticKeyboard, NumericKeyboard) have explicit Dark Mode variants.

Semantic Token Mapping

Card/List Background Contexts

4 contexts: primary dark, secondary dark, primary light, secondary light. Each supports 5 states: Default, Hover, Active, Pressed, Deactive.

iOS System Tokens

System Background Light Primary: #ffffff. Dark Elevated Primary: #1c1c1e. Label Light Primary: #000000. Label Dark Primary: #ffffff. Label Light Secondary: #3c3c43 at 60%.

Visual Characteristics

Dark Mode (app default): Pure black bg (#000000), white text/icons, glassmorphic cards with blur, vibrant red-blue gradient photography, premium purples and 3D elements, gradient overlays. Light Mode: Warm gray bg (#f5f4f4, not pure white), black text, gray-600 secondary, subtle gray cards, minimal borders. Colored Mode (special): Gradient backgrounds for plan selection flows.

Color System

Monochrome

White #ffffff and Black #000000, each with opacity variants at 72%, 48%, 32%, 24%, 12%, 6%.

Primary

brand-100: #000000. Black is the primary brand color.

Gray Scale (Warm-Toned)

gray-100: #f5f4f4 (light bg), gray-200: #e2e0e0 (cards), gray-300: #c5c1c1 (disabled borders), gray-400: #a29f9f (dark sec text), gray-500: #7e7d7d (placeholders), gray-600: #545353 (light sec text), gray-700: #424141 (dark cards), gray-800: #1b1a1a (near-black).

Brand Secondary - 16 Hues x 3 Tonal Variants

Light = high luminance for dark backgrounds. Base = default. Dark = low saturation for light backgrounds.

State Colors

Success: #04dc74 (Green), Warning: #ed8c1d (Orange), Danger: #eb3743 (Red).

Purpose Colors

reward-background: #8830f3, vpn-color: #3385e3, focus-color: #3385e3, auto-renew-background: #8830f3, unread-color: #e1472e.

Gradients

black-top, black-bottom, white-top, white-bottom (fade in/out). background-blur-fade-top: transparent to rgba(0,0,0,0.09). background-blur-fade-bottom: rgba(22,22,23,0.32) to transparent.

Typography

Primary Font: PP Object Sans (fallback: DM Sans)

3 weights: Regular (400), Medium (500), Bold (700).

Headlines

XL Strong: 44px/58px/700. XL Regular: 44px/58px/400. LG Strong: 32px/42px/700. LG Regular: 32px/42px/400. MD Strong: 24px/32px/700. MD Regular: 24px/32px/400. SM Strong: 16px/20px/700. SM Regular: 16px/20px/400.

Copy

XL: 24px/34px. LG: 16px/26px. MD (BASE): 14px/20px. SM: 12px/18px. Each in Strong (700) and Regular (400). Copy MD (14px) is the base reading size.

Labels

LG: 18px/23.4px. MD: 14px/18.2px. SM: 12px/15.6px. XS: 12px/15.6px. Each Strong/Regular.

Buttons

LG/MD: 14px/18.2px/Medium(500)/letter-spacing 1.68px (12%). SM: 10px/13px/Medium(500)/letter-spacing 1.2px. Only style with letter-spacing.

Line Length

Optimal: 50-60 chars. Max: 75 chars.

Secondary Fonts

Inter (admin dashboard), SF Pro (iOS), Roboto (legacy), Maven Pro (docs covers).

Spacing and Sizing

Scale

size-8: 8px, size-12: 12px, size-16: 16px, size-24: 24px, size-32: 32px, size-48: 48px, size-64: 64px, size-120: 120px, size-240: 240px, size-full: 800px.

Border Radius

radius-none: 0px, radius-md: 8px (default), radius-lg: 12px, radius-xl: 24px (sheets), radius-full: 800px (pills).

Component Sizes - 3 Tiers

Spacious (large, preferred for app), Comfortable (medium), Compact (small/dense). Always prefer Spacious for native app touch targets.

Interaction Design Rules

5 Component Categories

A. Floating (tertiary buttons, mini-dropdowns): Hover adds bg overlay + radius-md. Pressed shrinks 2px + overlay. B. Outline (secondary buttons, bordered chips): Hover outline grows 2px outward. Pressed shifts 2px inward. C. Filled Low Contrast (cards, banners, sec tags): Hover 2px outside outline. Pressed 2px inside. Fallback: inverted overlays on busy backgrounds. D. Filled High Contrast (primary buttons, colored cards): Hover expands 1px. Pressed contracts 1px. E. No Resizing (constrained): Hover/pressed use fill overlay only.

Contrast fallback: Add overlay if outline change is not noticeable.

Confirmation

Major events: modal. Minor events: toast/flag, auto-dismiss if non-interactive. Modal close: X button default, tertiary close if no CTA.

Effects

Blur

blur/full: 64px bg blur (nav, glass cards). blur/fade-top: 64px. blur/fade-bottom: 0px.

Shadows

Shadow/xs: 2px radius, (0,1), rgba(16,24,40,0.05). Shadow/lg: 6px+16px, (0,4)+(0,12). E200: 5px, (0,3). Elevation Medium Light: 12px, (0,3).

Glows

Primary/Medium: 12px, rgba(83,112,242,0.24). Success/Medium: 12px, rgba(41,204,57,0.12).

Iconography

Min size 20px, min stroke 1.5px. Per 8px increase: +0.5px stroke. 20px=1.5px, 24px=1.5px, 48px=3px, 64px=4px. 1,221 icons in 21 categories. Naming: kebab-case.

Components

Button (270 variants)

Size: Compact/Comfortable/Spacious. State: Default/Hover/Pressed/Focussed/Deactive. Weight: Primary/Secondary/Tertiary/Danger/Danger Sec/Danger Tert/Re-Boost-Primary/Re-Boost-Sec/Re-Boost-Tert. Only Icon: True/False. 3 tiers x 3 themes = 9 weights. Re-Boost = upsell/premium accent. Icons: Up-right arrow (Continue), Right arrow (Next), Check (Save), No icon (Login).

Form Inputs

Text Field: 3 sizes x 7 states (incl Error, Success). Text Area: 3x7. Dropdown: 3x6. Mini Dropdown: 3x5.

Selection Controls

Toggle: 3 sizes x 3 states x selected. Checkbox/Radio: 8 states incl Indeterminate and Error.

Navigation

Switcher Tab: 60 variants. Vert Nav Item: Level 1/2, 6 states, collapse. Horiz Nav: 6 states. Breadcrumb: 3 states.

Feedback

Toast: 5 types x 2 sizes. Flag: 4 types x 2 sizes. Badge: 8 types. Tag: 4 types x 3 sizes x 3 hover. Status Bubble: 19 states.

Telecom

Quota Badge (GB/MIN/SMS), Flag Item (30+ countries), Status Bubble (eSIM lifecycle), Country List.

Logo System

3 brands: Simsalasim (consumer), Global Cloud Core (infrastructure), Prism (admin/B2B). Each: Horizontal, Vertical, Symbol + Bleed variant. Min heights: Horizontal 24px, Vertical 44px, Symbol 24px. Only in Black or White.

Visual Language

"Tech Meets Emotion." Red-blue gradient lighting on people. Dynamic lighting, high contrast, futuristic. Glassmorphism in dark mode. Gradient overlays. 3D crystalline elements for premium. Minimal borders. Red/Pink/Malibu = emotion. Blue/Aero/Royal = tech. Purple/Neon = premium. Green = success.

Naming

Colors: Category/Step. Text: Category/Size/Weight. Components: Title Case. Internal: _prefix. Brands: hyphenated. Variants: PascalCase, True/False booleans. Sizes: Compact/Comfortable/Spacious. Weights: Regular=400, Medium=500, Strong=700.