Aerospike
Design System · Generated 15/04/2026 · 50 colors · 54 type tokens · 35 spacing steps · 15 motion tokens
April 2026
Color Palette
Core Background Colors
Black
#000000 · ×1443
Deep Navy
#050E1D · ×16
Dark Navy
#0D1B32 · ×9
Dark Blue
#0C1424 · ×252
Space Blue
#051028 · ×40
Navy Mid
#152D54 · ×28
Navy Deep
#12305C · ×16
Abyss
#040B1D · ×24
Light / Warm Surface Colors
White
#FFFFFF · ×719
Ice Blue
#EEF6FF · ×406
Moon Gray (warm off-white)
#FBFAF8 · ×31
Light Gray
#F4F4F4 · ×19
Blue-Gray
#ECEFF4 · ×14
Near-White
#F6F8FF · ×280
Cyan Tint
#EEFFFF · ×96
Brand & Accent Colors
Sol Yellow (Brand)
#F8F413 · ×39
Sky Blue
#0097D3 · ×4
Light Cyan
#89DDFF · ×196
Light Blue
#82AAFF · ×40
Light Green
#C3E88D · ×40
Cyan 2
#61BFE4 · ×1
Deep Sky
#00548B · ×1
Dark Green
#008000 · ×2
Text & Border Colors
Dark Gray
#212121 · ×819
Near-Black
#1A1A1A · ×537
Mid Dark
#5C5C5C · ×179
Light Gray
#B4B4B4 · ×622
Space Blue
#59617E · ×58
Border Dark
#464E6A · ×17
Border Light
#E8E8E8 · ×9
Mid Border
#D5D5D5 · ×14
Typography
DISPLAY · TIEMPOS HEADLINE
Tiempos Headline
Aerospike: the real-time data platform for the world's most demanding applications.
Light · 300 Regular · 400
UI · HELVETICA NOW PRO DISPLAY
Helvetica Now Pro
Sub-millisecond latency. Billions of operations per second. Predictable at scale.
Regular · 400 Medium · 500 Semibold · 600 Bold · 700 Fira Code · mono
The Real-Time Data Platform
Display 60px · Tiempos Headline Light · line-height: 63px · letter-spacing: −0.6px
Built for extreme scale
Hero 42px · Tiempos Light · line-height: 46px · letter-spacing: −0.4px
Performance at Any Scale
Heading 32px · Helvetica Now Medium · line-height: 38.4px · ls: −0.08px
Fast. Consistent. Always on.
Heading 24px · Regular · line-height: 28.8px
Aerospike delivers real-time, consistent performance for the planet's most complex data challenges.
Body 18px · Regular · line-height: 30.6px · letter-spacing: +0.32px
99.999% uptime SLA · Sub-millisecond latency · 1M+ ops/sec per node
Body 14px · Regular · line-height: 23.8px · letter-spacing: +0.32px
PLATFORM · DATABASE · CLOUD
All-Caps 15px · Medium · letter-spacing: +1.44px · uppercase eyebrow
client.put("namespace", "set", key, bins);
Code · Fira Code · 14px · line-height: 22.1px
Line Heights — 21 tokens
Tight
12.75px
Snug
14.4px
Normal
16px
Relaxed
18px
Loose
19.2px
LH-7
20.7px
LH-8
22.1px
LH-9
22.5px
LH-10
23.8px
LH-11
25.2px
LH-12
26.4px
LH-14
28.8px
LH-15
30.6px
LH-16
35.2px
LH-17
38.4px
LH-19
44.1px
LH-20
46px
LH-21
63px
Letter Spacing — Bidirectional (−0.6px → +2.28px)
Display
--letter-spacing-tight
−0.6px · hero display, Tiempos Headline
Heading
--letter-spacing-normal
−0.4px · h2/h3 subheadings
SECTION TITLE
--letter-spacing-ls-6
+1.2px · uppercase category labels
EYEBROW LABEL
--letter-spacing-ls-8
+2.28px · maximum · allCaps eyebrow copy
Spacing
Spacing Scale
35 tokens — 1px → 331.5px (includes sub-pixel and fractional values)
1
2
4
5
6
8
9
10
12
14
20
22
24
25
30
32
35
40
45.3
48
50
57.9
60
68
80
100
103.5
120
139.5
180
240
331.5
Borders
Border Radii — 21 tokens (from 6px to 300px)
sm (bottom)
0/0/40/40px
md
6px · ×10
lg
6.4px
xl
8px · ×29
2xl
10px · ×8
full
12px · ×18
r7
14px · ×8
r9
18px · ×14
r10
20px · ×140
r11
32px
r12
36px
r13 (top)
40/40/0/0px
r14
40px · ×12
r15
50px
r16 (circle)
50% · ×7
r17
70px
r18
100px
r19
200px
r20
300px · ×20
r21 (pill)
999px · ×28
At 300px (×20) and 999px (×28), Aerospike heavily uses extreme curves for hero section "bubbles" and pill shapes. The r10 value of 20px (×140) is the most-used standard card corner — comparable to GitHub's 16px or HF's 25px but with a softer feel.
Border Widths
--border-width-hairline
0.5px · ×24 — sub-pixel (retina only)
--border-width-thin
1px · ×477 — standard UI borders
--border-width-base
2px · ×24 — focus rings, CTAs, emphasis
Shadow / Elevation
Shadow Tokens
6 tokens — ranging from subtle 8% blue-tint to dramatic 55% black blur
sm — Blue-tint lift
×8
8% blue-navy · 10px offset — card resting state, unique tint (not black)
md — Button bevel
×8
24% dark inset + 35% white inner highlight — button pressed/raised glass effect
lg — Dramatic float
×2
55% black · 32px offset, 80px spread — modal overlays, hero floating panels
xl — Soft float
×2
12% black · 8px offset, 24px spread — elevated cards, dropdowns
shadow-5 — Medium float
×2
25% black · 8px offset, 24px spread — midweight elevated surfaces
shadow-6 — Upward gray
×1
30% gray · −1px (upward) — footer/bottom bar in light mode context
Z-Index
10 layers — includes 4 values exceeding INT_MAX territory. The top value of 2,147,483,642 sits just below the 32-bit signed integer maximum (2,147,483,647), marking Aerospike as one of only 3 systems in this series using extreme z-index values for absolute overlay guarantees.
LayerValueUsage
z-1 (Below)-1Decorative background elements, pseudo-element underlays
z-2 (Base)1Base positioned elements
z-3 (Raised)2Slightly elevated inline cards
z-4 (Navigation)100Sticky top navigation bar
z-5 (Sub-nav)200Dropdown menus, mega-nav panels
z-6 (Modal)1,000Modal dialogs, drawer overlays
z-7 (Mega-overlay)9,999,999Full-screen modals, campaign overlays
z-8 (Ultra)99,999,999Cookie banners, critical notices
z-9 (Absolute)999,999,999Near-absolute top-level overlays
z-10 (INT_MAX−5)2,147,483,642Maximum stacking context — below browser chrome only
Breakpoints
22 breakpoints — 352px → 1439px. The most fine-grained mobile range in this series: 9 steps between 352–615px (increments of 3–15px), suggesting highly specific device targeting. Desktop maxes at 1439px, stopping before 1440.
📱
XS
352
📱
SM
375
📱
MD/LG
400/425
📱
XL/2XL
440/480
📲
3XL/BP-8
555/576
📲
BP-9/10/11/12
599–615
📲
BP-13
660
💻
BP-14
768
💻
BP-15/16
845/996
💻
BP-17/18
1023/1024
🖥️
BP-19/20
1240/1280
🖥️
BP-21/22 (Max)
1366/1439
Opacity
Opacity Tokens
4 tokens — 0.4 · 0.5 · 0.9 · 0.91 (high-end cluster with unusual 0.91)
--opacity-40
40% · ×1
--opacity-50
50% · ×2
--opacity-90
90% · ×28
--opacity-91
91% · ×6
Note the tight cluster at 90/91% — used heavily (×28 and ×6) for near-opaque glassmorphism effects in the frosted nav bar and hero panels. The separate 90 vs 91 tokens suggest pixel-level tuning for specific scroll-blur scenarios. No values below 40% are defined.
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
#212121 (Dark Gray)#FFFFFF (White)16.1:1AAA
#212121 (Dark Gray)#EEF6FF (Ice Blue)14.77:1AAA
#212121 (Dark Gray)#F8F413 (Yellow)13.76:1AAA
#212121 (Dark Gray)#FBFAF8 (Moon Gray)15.44:1AAA
#B4B4B4 (Light Gray)#000000 (Black)10.13:1AAA
#B4B4B4 (Light Gray)#FFFFFF (White)2.07:1Fail
#1A1A1A (Near-Black)#FFFFFF (White)17.4:1AAA
#1A1A1A (Near-Black)#F8F413 (Yellow)14.87:1AAA
#F6F8FF (Near-White)#000000 (Black)19.79:1AAA
#0C1424 (Dark Blue)#FFFFFF (White)18.4:1AAA
#0C1424 (Dark Blue)#F8F413 (Yellow)15.72:1AAA
#0C1424 (Dark Blue)#FBFAF8 (Moon Gray)17.64:1AAA
CSS Variables Reference
Background Colors
Black (page)--color-black#000000 · ×1443
Dark Blue (body text bg)--color-dark-blue#0C1424 · ×252
Deep Navy (card dark)--color-dark-blue-7#050E1D · ×16
Dark Navy (card)--color-dark-blue-8#0D1B32 · ×9
Navy Mid (elevated)--color-dark-blue-3#152D54 · ×28
Navy Deep (hover)--color-dark-blue-6#12305C · ×16
Space Blue--color-dark-blue-2#051028 · ×40
White--color-white#FFFFFF · ×719
Ice Blue--color-white-2#EEF6FF · ×406
Moon Gray (warm off-white)--color-white-5#FBFAF8 · ×31
Sol Yellow (Brand)--color-yellow#F8F413 · ×39
Sky Blue--color-cyan#0097D3 · ×4
Text & Accent Colors
Dark Gray (body light mode)--color-dark-gray#212121 · ×819
Light Gray (secondary)--color-light-gray#B4B4B4 · ×622
Near-Black--color-dark-gray-2#1A1A1A · ×537
Light Cyan (dark mode body)--color-light-cyan#89DDFF · ×196
Mid Dark Gray--color-dark-gray-3#5C5C5C · ×179
Light Blue--color-light-blue#82AAFF · ×40
Light Green--color-light-green#C3E88D · ×40
Space Blue text--color-blue#59617E · ×58
Border (dark mode)--color-dark-blue-5#464E6A · ×17
Border (light mode)--color-light-gray-4#E8E8E8 · ×9
Mid Border--color-light-gray-2#D5D5D5 · ×14
Dark Green--color-dark-green#008000 · ×2
Typography
Helvetica Now Pro Display (UI)--font-family-baseHelvetica Now Pro
Arial (fallback)--font-family-2 (fallback)Arial
Tiempos Headline (display/serif)--font-family-3Tiempos Headline
Fira Code (mono/code)--font-family-4Fira Code
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Bold--font-weight-bold700
11.2px → 60px (17 sizes)2xs → 60px
Tight (display) ←--letter-spacing-tight−0.6px
Normal (headings) ←--letter-spacing-normal−0.4px
Wide (body) →--letter-spacing-wide−0.08px
Wider (labels) →--letter-spacing-wider+0.32px
Widest →--letter-spacing-widest+0.4px
Caps label →--letter-spacing-ls-6+1.2px
Eyebrow →--letter-spacing-ls-7+1.44px
Max uppercase →--letter-spacing-ls-8+2.28px
Motion, Opacity & Layers
Instant (100ms)--duration-instant0.1s · ×8
Fast (150ms) — most used--duration-fast0.15s · ×171
Normal (200ms)--duration-normal0.2s · ×165
Slow (220ms)--duration-slow0.22s · ×42
Slower (240ms)--duration-slower0.24s · ×12
250ms--duration-duration-60.25s · ×36
Reveal (600ms)--duration-duration-120.6s · ×110
Ease Out--easing-ease-outease-out · ×52
Ease In-Out--easing-ease-in-outease-in-out · ×23
Linear--easing-linearlinear · ×1
Semi (40%)--opacity-400.4 · ×1
Half (50%)--opacity-500.5 · ×2
Frosted (90%)--opacity-900.9 · ×28
Frosted+ (91%)--opacity-910.91 · ×6
Below--z-1−1
Base / Raised--z-2 / z-31 / 2
Navigation--z-4100
Sub-nav--z-5200
Modal--z-61,000
Mega-overlay → INT_MAX--z-7 → z-109.9M → 2.1B
Aerospike Design System · Generated 15/04/2026 · 50 color tokens · 4 font families · 4 font weights · 17 font sizes · 21 line heights · 8 letter-spacing (bidirectional) · 35 spacing steps · 21 radius · 3 border widths · 6 shadows · 12 durations · 3 easings · 10 z-index layers · 22 breakpoints · 4 opacity tokens