Design System Documentation
UBL Digital App
The single source of truth for all visual decisions in the UBL mobile banking application. Covers tokens, typography, effects, and guidelines for iOS and Android.
Variables
128 tokens
Collections
6
Paint Styles
34
Text Styles
48
Platforms
iOS · Android
Modes
Light · Dark
02.1
Cloudveil — Neutral Scale
Primary neutral palette. 11 steps, fully inverted between Light and Dark mode. Includes Hex and RGB values for both platforms.
Light Mode
10#F8F9FC
20#F4F5F8
30#EDF0F6
40#E8EBF2
50#E3E7EE
60#DCE2EB
70#9AA4B8
80#858F9E
90#5F6776
100#3E444E
110#24282F
Dark Mode
10#0B0E13
20#0F1219
30#121820
40#161B26
50#353C4A
60#585F6E
70#7C8291
80#858F9E
90#9FA5B8
100#BEC4D1
110#DCE0E8
| Step | Light Hex | Light RGB | Dark Hex | Dark RGB | Usage |
|---|---|---|---|---|---|
| cloudveil-10 | #F8F9FC |
rgb(248, 249, 252) | #0B0E13 |
rgb(11, 14, 19) | Page background |
| cloudveil-20 | #F4F5F8 |
rgb(244, 245, 248) | #0F1219 |
rgb(15, 18, 25) | Subtle background |
| cloudveil-30 | #EDF0F6 |
rgb(237, 240, 246) | #121820 |
rgb(18, 24, 32) | Hover / pressed |
| cloudveil-40 | #E8EBF2 |
rgb(232, 235, 242) | #161B26 |
rgb(22, 27, 38) | Border / divider |
| cloudveil-50 | #E3E7EE |
rgb(227, 231, 238) | #353C4A |
rgb(53, 60, 74) | Disabled state |
| cloudveil-60 | #DCE2EB |
rgb(220, 226, 235) | #585F6E |
rgb(88, 95, 110) | Subtle border |
| cloudveil-70 | #9AA4B8 |
rgb(154, 164, 184) | #7C8291 |
rgb(124, 130, 145) | Placeholder text |
| cloudveil-80 | #858F9E |
rgb(133, 143, 158) | #858F9E |
rgb(133, 143, 158) | Secondary text |
| cloudveil-90 | #5F6776 |
rgb(95, 103, 118) | #9FA5B8 |
rgb(159, 165, 184) | Body text |
| cloudveil-100 | #3E444E |
rgb(62, 68, 78) | #BEC4D1 |
rgb(190, 196, 209) | Primary text |
| cloudveil-110 | #24282F |
rgb(36, 40, 47) | #DCE0E8 |
rgb(220, 224, 232) | Headings |
02.2
Cerulean — Brand Scale
Primary brand color. Fully inverted in dark mode for legibility on dark surfaces.
Light Mode
10#CCE5F3
20#AAD4EC
30#80BCE2
40#55A8D8
50#2B93CF
60#007ABB
70#0068A4
80#005383
90#003E63
100#002A42
110#001927
Dark Mode
10#FBFCFE
20#F8FAFE
30#F5F8FB
40#F2F5FA
50#EEF2F8
60#EBEEF5
70#D1D8E5
80#A4ACBE
90#7F8595
100#5C6069
110#3D4049
| Step | Light Hex | Light RGB | Dark Hex | Dark RGB | Usage |
|---|---|---|---|---|---|
| cerulean-10 | #CCE5F3 |
rgb(204, 229, 243) | #FBFCFE |
rgb(251, 252, 254) | Lightest tint |
| cerulean-20 | #AAD4EC |
rgb(170, 212, 236) | #F8FAFE |
rgb(248, 250, 254) | Brand bg subtle |
| cerulean-30 | #80BCE2 |
rgb(128, 188, 226) | #F5F8FB |
rgb(245, 248, 251) | Brand fill light |
| cerulean-40 | #55A8D8 |
rgb(85, 168, 216) | #F2F5FA |
rgb(242, 245, 250) | Brand interactive |
| cerulean-50 | #2B93CF |
rgb(43, 147, 207) | #EEF2F8 |
rgb(238, 242, 248) | Brand primary light |
| cerulean-60 | #007ABB |
rgb(0, 122, 187) | #EBEEF5 |
rgb(235, 238, 245) | Brand primary |
| cerulean-70 | #0068A4 |
rgb(0, 104, 164) | #D1D8E5 |
rgb(209, 216, 229) | Brand pressed |
| cerulean-80 | #005383 |
rgb(0, 83, 131) | #A4ACBE |
rgb(164, 172, 190) | Brand dark |
| cerulean-90 | #003E63 |
rgb(0, 62, 99) | #7F8595 |
rgb(127, 133, 149) | Brand deep |
| cerulean-100 | #002A42 |
rgb(0, 42, 66) | #5C6069 |
rgb(92, 96, 105) | Brand darkest |
| cerulean-110 | #001927 |
rgb(0, 25, 39) | #3D4049 |
rgb(61, 64, 73) | Brand near-black |
02.3
Semantic Colors
Fixed-meaning status colors preserved across modes.
| Token | Light Hex | Light RGB | Dark Hex | Dark RGB | Usage |
|---|---|---|---|---|---|
| Color/Semantic/Error | #FD563A |
rgb(253, 86, 58) | #FD563A |
rgb(253, 86, 58) | Destructive actions, validation errors, critical alerts |
| Color/Semantic/Success | #00DEC9 |
rgb(0, 222, 201) | #00DEB9 |
rgb(0, 222, 185) | Completed transactions, confirmed states |
| Color/Semantic/Warning | #FFC300 |
rgb(255, 195, 0) | #FFC300 |
rgb(255, 195, 0) | Caution states, pending actions, advisories |
02.4
Neutral Overlays
Opacity-graduated scales for scrims, overlays, and compositing. Dark mode swaps base color, keeps alpha.
| Scale | Light Base (Hex) | Light Base (RGB) | Dark Base (Hex) | Dark Base (RGB) | Steps |
|---|---|---|---|---|---|
| Black (black-0 → 100) | #000000 | rgb(0, 0, 0) | #E1E6F0 | rgb(225, 230, 240) | 0%–100% in 10% increments |
| White (white-0 → 100) | #FFFFFF | rgb(255, 255, 255) | #2B313B | rgb(43, 49, 59) | 0%–100% in 10% increments |
02.5
Accent Colors
High-chroma values for data visualization and card skins. Mode-invariant.
| Token | Hex | RGB | Mode |
|---|---|---|---|
| Electric Blue/electric-blue-50 | #CCDBFF | rgb(204, 219, 255) | Same in both modes |
| Electric Blue/electric-blue-200 | #628BF5 | rgb(98, 139, 245) | Same in both modes |
| Electric Blue/electric-blue-400 | #003FE1 | rgb(0, 63, 225) | Same in both modes |
| Electric Blue/electric-blue-800 | #111360 | rgb(17, 19, 96) | Same in both modes |
| Cyan/cyan-200 | #80FFFF | rgb(128, 255, 255) | Same in both modes |
| Cyan/cyan-400 | #1AFFFF | rgb(26, 255, 255) | Same in both modes |
| Purple/purple-200 | #C080FF | rgb(192, 128, 255) | Same in both modes |
| Purple/purple-400 | #8040FF | rgb(128, 64, 255) | Same in both modes |
| Magenta/magenta-200 | #FF66A3 | rgb(255, 102, 163) | Same in both modes |
| Magenta/magenta-600 | #FF0066 | rgb(255, 0, 102) | Same in both modes |
| Orange/orange-100 | #FFA74D | rgb(255, 167, 77) | Same in both modes |
| Orange/orange-200 | #FF8D1A | rgb(255, 141, 26) | Same in both modes |
| Yellow/yellow-200 | #FFE100 | rgb(255, 225, 0) | Same in both modes |
| Yellow/yellow-300 | #FFC300 | rgb(255, 195, 0) | Same in both modes |
| Green/green-100 | #00E5C7 | rgb(0, 229, 199) | Same in both modes |
| Green/green-200 | #00B29B | rgb(0, 178, 155) | Same in both modes |
03.1
Tone — T1 through T10
Single-fill opacity ramps. Light: black fills at 10%–100%. Dark: white fills with −10% per step. All use Overlay blend.
Light — Black fill, Overlay
T110%
T220%
T330%
T440%
T550%
T660%
T770%
T880%
T990%
T10100%
Dark — White fill, Overlay (−10%)
T10%
T210%
T320%
T430%
T540%
T650%
T760%
T870%
T980%
T1090%
| Style | Light (Black) | Dark (White) | Usage |
|---|---|---|---|
| T1 | Black @ 10% | White @ 0% (transparent) | Hover |
| T2 | Black @ 20% | White @ 10% | Hover |
| T3 | Black @ 30% | White @ 20% | Pressed |
| T4 | Black @ 40% | White @ 30% | Pressed |
| T5 | Black @ 50% | White @ 40% | Scrim/overlay |
| T6 | Black @ 60% | White @ 50% | Scrim/overlay |
| T7 | Black @ 70% | White @ 60% | Scrim/overlay |
| T8 | Black @ 80% | White @ 70% | Scrim/overlay |
| T9 | Black @ 90% | White @ 80% | Scrim/overlay |
| T10 | Black @ 100% | White @ 90% | Scrim/overlay |
03.2
Depth — D1 through D5
Stacked fill layers for elevation. Light = black fills, Dark = white fills with one fewer 100% stack. 50% half-fills carry over.
D1 Minimal
Light
Black 100% · Overlay
Black 100% · Overlay
Dark
White 100% · Overlay
D2 Low
Light
Black 100% · Overlay
Black 100% · Overlay
Black 50% · Overlay
Dark
White 100% · Overlay
White 50% · Overlay
D3 Medium
Light
Black 100% · Overlay
Black 100% · Overlay
Black 100% · Overlay
Dark
White 100% · Overlay
White 100% · Overlay
D4 High
Light
Black 100% · Overlay
Black 100% · Overlay
Black 100% · Overlay
Black 50% · Overlay
Dark
White 100% · Overlay
White 100% · Overlay
White 50% · Overlay
D5 Maximum
Light
Black 100% · Overlay
Black 100% · Overlay
Black 100% · Overlay
Black 100% · Overlay
Dark
White 100% · Overlay
White 100% · Overlay
White 100% · Overlay
03.3
Blur & Shadows
| Style | Value | Usage |
|---|---|---|
| blur-soft | 32px | Standard glassmorphism card |
| blur-light | 48px | Modal, bottom sheet |
| blur-subtle | 64px | Ambient background |
04
Gradients
16 linear paint styles. Mode-invariant.
Aurora
#2F65EE → #4DFFFF
Neon Bloom
#FF66A3 → #C080FF
Electric Mist
#97B4FC → #D98BFF
Deep Signal
#0031AE → #8040FF
Radiant Wave
#8040FF → #FF99C2
Sunset Drift
#FF8D1A → #FF66A3
Prism Light
#628BF5 → #FFE100
Cosmic Flow
#A04DFF → #B3FFFF
Solar Flare
#FFE100 → #FF8D1A
Electric Pulse
#003FE1 → #FF33A3
Radiant Horizon
#1AFFFF → #FFE100
Neon Pulse
#FF33A3 → #FFC300
Electric Horizon
#628BF5 → #FF8D1A
Borealis Ember
#2F65EE → #97B4FC
Equatorial Blue
#007DBF → #003FE1
Carbon Fade
#242A2F → #3E434E
05
Typography
All type set in UBL Sans (iOS) and UBL Sans / Roboto fallback (Android).
| Style | Size | Unit | Line Height | Letter Spacing | Weights |
|---|---|---|---|---|---|
| Display Large | 36 | pt | 120% | −0.7pt | B M R L |
| Display Medium | 28 | pt | Auto | 0 | B M R L |
| Heading 1 | 24 | pt | Auto | 0 | B M R L |
| Heading 2 | 21 | pt | Auto | 0 | B M R L |
| Heading 3 | 18 | pt | Auto | 0 | B M R L |
| Body | 15 | pt | Auto | 0 | B M R L |
| Body Small | 13 | pt | Auto | −0.4pt | B M R L + CAPS |
| Caption | 11 | pt | Auto | 0 | B M R L + CAPS |
| Caption Small | 9 | pt | Auto | −0.3pt | B M R L + CAPS |
| Style | Size | Unit | Line Height | Letter Spacing | Weights |
|---|---|---|---|---|---|
| Display Large | 36 | sp | 43sp | −0.7sp | B M R L |
| Display Medium | 28 | sp | 34sp | 0 | B M R L |
| Heading 1 | 24 | sp | 29sp | 0 | B M R L |
| Heading 2 | 21 | sp | 25sp | 0 | B M R L |
| Heading 3 | 18 | sp | 22sp | 0 | B M R L |
| Body | 15 | sp | 20sp | 0 | B M R L |
| Body Small | 13 | sp | 18sp | −0.4sp | B M R L + CAPS |
| Caption | 11 | sp | 14sp | 0 | B M R L + CAPS |
| Caption Small | 9 | sp | 12sp | −0.3sp | B M R L + CAPS |
Android uses sp (scale-independent pixels) for text sizing. Line heights are explicit values rather than percentages. Font fallback: UBL Sans → Roboto.
06
Spacing
Layout spacing tokens. iOS uses pt, Android uses dp (1:1 value mapping).
| Token | iOS (pt) | Group | Usage |
|---|---|---|---|
| space-none | 0pt | Nano | Flush |
| space-2 | 2pt | Nano | Icon gap |
| space-4 | 4pt | Nano | Tag padding |
| space-8 | 8pt | Micro | Cell padding, icon margin |
| space-12 | 12pt | Micro | List item padding |
| space-16 | 16pt | Standard | Content padding |
| space-24 | 24pt | Standard | Section spacing |
| space-32 | 32pt | Standard | Card margin, modal padding |
| space-40 | 40pt | Standard | Large section gap |
| space-48 | 48pt | Standard | Nav bar height |
| space-56 | 56pt | Standard | Bottom bar height |
| space-64 | 64pt | Standard | Max safe area |
| Token | Android (dp) | Group | Usage |
|---|---|---|---|
| space-none | 0dp | Nano | Flush |
| space-2 | 2dp | Nano | Icon gap |
| space-4 | 4dp | Nano | Tag padding |
| space-8 | 8dp | Micro | Cell padding, icon margin |
| space-12 | 12dp | Micro | List item padding |
| space-16 | 16dp | Standard | Content padding |
| space-24 | 24dp | Standard | Section spacing |
| space-32 | 32dp | Standard | Card margin, modal padding |
| space-40 | 40dp | Standard | Large section gap |
| space-48 | 48dp | Standard | App bar height (56dp Material default) |
| space-56 | 56dp | Standard | Bottom nav height (80dp Material default) |
| space-64 | 64dp | Standard | Max content padding |
Android dp maps 1:1 with iOS pt in value. However, Material Design recommends 56dp app bars and 80dp bottom nav — adjust space-48/56 accordingly.
07
Corner Radius
iOS uses pt, Android uses dp. Android Material typically uses rounder surfaces — consider using one step up on Android.
| Token | iOS (pt) | Usage |
|---|---|---|
| radius-xs | 2pt | Tag corners |
| radius-sm | 4pt | Compact button, input |
| radius-md | 8pt | Card, secondary button |
| radius-lg | 12pt | Sheet, modal inner |
| radius-16 | 16pt | Primary card |
| radius-24 | 24pt | Bottom sheet |
| radius-32 | 32pt | Widget, hero card |
| radius-pill | 999pt | Pill button, avatar, badge |
| Token | Android (dp) | Material Shape | Usage |
|---|---|---|---|
| radius-xs | 2dp | Extra Small | Tag corners |
| radius-sm | 4dp | Extra Small | Compact button, input |
| radius-md | 8dp | Small | Card, secondary button |
| radius-lg | 12dp | Medium | Sheet, modal |
| radius-16 | 16dp | Large | Primary card |
| radius-24 | 24dp | Large | Bottom sheet |
| radius-32 | 28dp | Extra Large | Widget (Material uses 28dp) |
| radius-pill | 999dp | Full | Pill button, avatar, badge |
Material Design 3 shape tokens: Extra Small (4dp), Small (8dp), Medium (12dp), Large (16dp), Extra Large (28dp), Full (999dp). The UBL scale maps closely but radius-32 adjusts to 28dp to align with Material.
08
Stroke Widths
| Token | iOS (pt) | Android (dp) | Usage |
|---|---|---|---|
| stroke-0.5 | 0.5pt | 0.5dp (1px hairline) | Subtle list separators |
| stroke-1 | 1pt | 1dp | Default border |
| stroke-2 | 2pt | 2dp | Active / focused state |
| stroke-3 | 3pt | 3dp | Emphasis, avatar ring |
| stroke-4 | 4pt | 4dp | Strong outline |
| stroke-6 | 6pt | 6dp | Decorative frame |
| stroke-9 | 9pt | 9dp | Ultra-heavy decoration |
09
Themes
Boolean mode-detection variables.
isDark
Light
falseDark
truetheme/isDark
Light
falseDark
false ⚠Action required: theme/isDark is false in both modes. Must be corrected to true in Dark mode.
10
Usage Guidelines
Platform Differences
| Aspect | iOS | Android |
|---|---|---|
| Size unit | pt (points) | dp (density-independent pixels) |
| Text unit | pt | sp (scale-independent pixels) |
| Font | UBL Sans | UBL Sans (fallback: Roboto) |
| Nav bar height | 48pt | 56dp (Material standard) |
| Bottom nav | 49pt (iOS tab bar) | 80dp (Material nav bar) |
| Safe areas | Dynamic Notch/Island | System bars / cutouts |
| Shape tokens | Direct radius values | Map to Material Shape (XS–Full) |
Variable Binding
| Property | Method | Note |
|---|---|---|
| Fills | setBoundVariableForPaint() | Capture returned paint, reassign to node.fills |
| Corner radius | setBoundVariable("topLeftRadius"…) | Bind individual corners |
| Gradients | Paint style reference | Variable binding not supported on gradient stops |
Known Issues
theme/isDark: Dark mode value is false. Must be corrected to true.
Color FX: Tone/Depth styles are light-mode only. Apply dark corrections manually via blend mode.
11
Glossary
Design Token
Named, platform-agnostic value consumed by both design tools and code.
Variable
Figma-specific token. Holds COLOR, FLOAT, STRING, or BOOLEAN with multi-mode support.
pt
iOS point. 1pt = 1/163 inch on @1x displays. Maps 1:1 with Figma pixels.
dp
Android density-independent pixel. 1dp = 1px at 160dpi (mdpi). Equivalent to iOS pt in value.
sp
Android scale-independent pixel. Same as dp but respects the user’s font size accessibility setting.
Cloudveil
UBL’s neutral palette. Near-white (10) to near-black (110) in light; inverted in dark.
Cerulean
UBL’s primary brand blue — actions, links, identity elements.
Color FX
Paint styles modifying tone/depth via layered fills and Overlay blend mode.
Glassmorphism
Frosted-glass blur + semi-transparent fills + subtle borders.