Principles
Operational clarity over decorative flourish.
High-contrast blue control surfaces anchored by quiet neutrals.
One accent color for signals, not multiple competing accents.
Rounded geometry and layered surfaces to imply trust and structure.
Interactive States
Rule 01
Dark blue surfaces shift to cobalt and keep text/icons white.
Rule 02
Light surfaces gain an electric blue border and soft cyan wash.
Rule 03
Icons inherit text color and can scale to 1.05 for emphasis.
Focus Rule
Use an electric-blue ring with cyan outer halo for all focus-visible states.
Brand Palette
The system uses the exact palette anchors you provided and extends them into semantic roles for the app.
01-sky
#21BCEE
02-electric
#1165F8
03-cobalt
#052698
04-cloud
#DCE3EB
05-steel
#878EA0
06-white
#FFFFFF
07-black
#000000
Blue Ramp
50
#F4F8FC
100
#DCE3EB
200
#B0C6E6
300
#7EA7E0
400
#4D95EA
500
#2A7BF5
600
#1165F8
700
#0E53D8
800
#0A3BAE
900
#052698
950
#021657
Semantic Tokens
Typography
display-xl
4rem
Measurement and control for AI systems
display-lg
3rem
Measurement and control for AI systems
display-md
2.25rem
Measurement and control for AI systems
h1
2.5rem
Measurement and control for AI systems
h2
2rem
Measurement and control for AI systems
h3
1.5rem
Measurement and control for AI systems
h4
1.25rem
Measurement and control for AI systems
body-lg
1.125rem
Measurement and control for AI systems
body
1rem
Measurement and control for AI systems
body-sm
0.875rem
Measurement and control for AI systems
caption
0.75rem
Measurement and control for AI systems
Components
Primary cards stay bright and structured.
Use white or pale-blue surfaces for reading-heavy sections.
Cyan is a signal accent.
Use it for focus, status emphasis, and controlled highlights.
Spacing