Apidog
Design System · Generated 15/04/2026 · 29 colors · 25 type tokens · 23 spacing steps · 2 motion tokens
April 2026
Color Palette
Background Colors
White
#FFFFFF
Page (Near White)
#FAFBFF
Border / Tint
#ECEFFF
Dark Navy
#0C1230
Black
#000000
Brand & Accent Colors
Blue (Primary)
#4D6AFF
Blue 3
#4080FF
Blue 4
#1A66FF
Blue 8
#4D4DFF
Blue 7
#1A8CFF
Cyan (Teal)
#00C7A6
Cyan 3
#00AAFF
Text Colors
Dark Blue 3 (Primary)
#1D2447
Dark Blue 2
#2F3659
Dark Blue (Secondary)
#464D6A
Blue 2 (Tertiary)
#7F85A3
White 4
#F5F5F5
Border & Fill Colors
Light Gray (Border)
#E5E7EB
Light Blue (Border)
#E1E5F7
Light Blue 2
#DBEAFE
Light Red
#FF7396
Orange (Amber)
#FFBF00
Cyan 2
#00ACE6
White 5
#E6EEFF
Typography
Primary Display Font · Poppins
Poppins
Design, debug, and test APIs. The all-in-one API platform for teams.
Regular · 400 Medium · 500 Semibold · 600
UI Font · ui-sans-serif (system)
System Sans
GET /users · POST /endpoints · 200 OK
Regular · 400 Medium · 500
API Platform
Display 4xl · 56px · Semibold · line-height: 78.4px
Design APIs Together
Heading 3xl · 40px · Semibold · line-height: 52px
Collaborative API Development
Heading 2xl · 32px · Semibold · line-height: 41.6px
Build, test, mock, document
Heading XL · 24px · Semibold · line-height: 32px
The next-generation API development tool
Heading LG · 20px · Medium · line-height: 30px
Apidog combines API design, debugging, testing, and documentation into one seamless workflow platform.
Body Large · 18px · Regular · line-height: 28px
Last tested 5 minutes ago · 24 endpoints · REST API v2.1
Body Small · 14px · Regular · line-height: 22.4px
ENDPOINTS · SCHEMAS · ENVIRONMENTS
Caption · 13px · Medium · uppercase
Line Heights
Tight
18.2px
Snug
19.5px
Normal
21px
Relaxed
22.4px
Loose
24px
LH-6
28px
LH-7
30px
LH-8
32px
LH-9
41.6px
LH-10
52px
LH-11
78.4px
Letter Spacing
No tokens defined
Not extracted
Apidog defines no letter-spacing tokens. Typography relies on default browser spacing and Poppins' built-in metrics.
Spacing
Spacing Scale
23 tokens — 1px → 281.891px
1
4
6
8
10
12
16
20
24
32
38
40
48
56
64
72
75.5
80
96
104
120
150.5
281.9
Borders
Border Radii
sm
8px
md
24px
lg (top)
24/24/0/0
xl
32px
2xl (Pill)
9999px
Border Width
--border-width-hairline
1px · ×527 — the single border width used throughout
One border width applied to all cards, inputs, dividers, and table rows. Extremely rounded shapes — 24px and 32px radii — paired with a fine 1px stroke creates Apidog's friendly, pill-forward aesthetic.
Shadow / Elevation
Shadow Tokens
4 tokens — purple-blue tinted glows on white surfaces
sm — White Lift
×2
White upward glow — cards on subtle backgrounds
md — Navy Drop
×2
rgba(12,18,48,.04) 12px radial — default card elevation
lg — Blue Glow
×1
rgba(102,102,255,.08) 56px bloom — brand hover, CTAs
xl — Purple Glow
×1
rgba(128,102,255,.06) 40px — panels, modals, floating
Z-Index
LayerValueUsage
z-1 (Behind)-10Background decorative canvas, particle/illustration layers
z-2 (Raised)2Slightly elevated content, inline floating elements
z-3 (Sticky)10Sticky navigation, headers, pinned sidebars
z-4 (Overlay)30Dropdowns, popovers, floating menus
z-5 (Modal)50Modal dialogs, sidesheets, overlays
z-6 (Top)100Toasts, global alerts, critical banners
Breakpoints
🚫
No breakpoints defined
Not extracted
Apidog's design system does not define explicit breakpoint tokens. Responsive behavior is implemented via CSS media queries without named token values.
Opacity
Opacity Tokens
4 tokens — 0.1 · 0.2 · 0.3 · 0.5 (low range, tint-focused)
--opacity-10
10% · ×1
--opacity-20
20% · ×4
--opacity-30
30% · ×1
--opacity-50
50% · ×1
All opacity values are 50% or below — used primarily for hover tints, overlay glass effects, and dimming. The most common is 20% (×4) for semi-transparent UI surfaces like frosted nav bars and blurred cards.
Accessibility
WCAG 2.1 thresholds: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
Text ColorBackground ColorRatioWCAG Rating
#000000 (Black)#FFFFFF21:1AAA
#000000 (Black)#FAFBFF20.31:1AAA
#000000 (Black)#0C1230 (Dark Navy)1.14:1Fail
#464D6A (Dark Blue)#FFFFFF8.3:1AAA
#464D6A (Dark Blue)#FAFBFF8.03:1AAA
#464D6A (Dark Blue)#0C1230 (Dark Navy)2.21:1Fail
#4D6AFF (Blue / Brand)#FFFFFF4.36:1AA Large
#4D6AFF (Blue / Brand)#FAFBFF4.21:1AA Large
#4D6AFF (Blue / Brand)#0C1230 (Dark Navy)4.21:1AA Large
#7F85A3 (Blue 2)#FFFFFF3.63:1AA Large
#7F85A3 (Blue 2)#FAFBFF3.51:1AA Large
#7F85A3 (Blue 2)#0C1230 (Dark Navy)5.05:1AA
#2F3659 (Dark Blue 2)#FFFFFF11.71:1AAA
#2F3659 (Dark Blue 2)#FAFBFF11.33:1AAA
#2F3659 (Dark Blue 2)#0C12301.57:1Fail
CSS Variables Reference
Background Colors
White--color-white-2#FFFFFF
Page (Near White)--color-white-3#FAFBFF
Border / Tint--color-white#ECEFFF
White 4--color-white-4#F5F5F5
White 5--color-white-5#E6EEFF
White 6--color-white-6#EBEEFF
Dark Navy--color-dark-blue-4#0C1230
Black--color-black#000000
Brand & Fill Colors
Blue (Brand Primary)--color-blue#4D6AFF
Blue 3--color-blue-3#4080FF
Blue 4--color-blue-4#1A66FF
Blue 8--color-blue-8#4D4DFF
Blue 7--color-blue-7#1A8CFF
Cyan (Teal)--color-cyan#00C7A6
Cyan 2--color-cyan-2#00ACE6
Cyan 3--color-cyan-3#00AAFF
Light Red--color-light-red#FF7396
Orange (Amber)--color-orange#FFBF00
Text & Border Colors
Text Primary--color-dark-blue-3#1D2447
Text Strong--color-dark-blue-2#2F3659
Text Secondary--color-dark-blue#464D6A
Text Tertiary--color-blue-2#7F85A3
Border Light Gray--color-light-gray#E5E7EB
Border Light Blue--color-light-blue#E1E5F7
Border Light Blue 2--color-light-blue-2#DBEAFE
White 7 (Border α)--color-white-7rgba(236,239,255,.5)
Motion, Opacity & Layers
Instant (150ms)--duration-instant0.15s · ×38
Fast (300ms)--duration-fast0.3s · ×106
Easing functions—None defined
Ghost (10%)--opacity-100.1
Faint (20%)--opacity-200.2
Dim (30%)--opacity-300.3
Muted (50%)--opacity-500.5
Behind--z-1-10
Raised--z-22
Sticky / Nav--z-310
Dropdown / Overlay--z-430
Modal / Sheet--z-550
Toast / Top Layer--z-6100
Typography
Poppins (Display)--font-family-2Poppins
System UI (Base)--font-family-baseui-sans-serif
Regular--font-weight-regular400
Medium--font-weight-medium500
Semibold--font-weight-semibold600
Caption--font-size-2xs13px
Body Small--font-size-xs14px
Body Default--font-size-sm16px
Body Large--font-size-base18px
Heading LG--font-size-lg20px
Heading XL--font-size-xl24px
Heading 2xl--font-size-2xl32px
Heading 3xl--font-size-3xl40px
Display 4xl--font-size-4xl56px
Letter spacing—None defined
Spacing (selected) & Borders
Space 1--space-11px · ×156
Space 4 (SM)--space-48px · ×59
Space 8 (MD)--space-816px · ×48
Space 10 (LG)--space-1020px · ×250
Space 12--space-1224px · ×27
Space 16--space-1632px · ×45
Space 24--space-2440px · ×115
Space 48--space-4864px · ×4
Space 96--space-9680px · ×4
Space 192--space-192120px · ×1
Space 23 (Max)--space-23281.891px
Hairline--border-width-hairline1px · ×527
sm--radius-sm8px
md--radius-md24px
xl--radius-xl32px
2xl (Pill)--radius-2xl9999px
Apidog Design System · Generated 15/04/2026 · 29 color tokens · 25 type tokens · 23 spacing steps · 5 border radii · 1 border width · 4 shadows · 2 durations · 0 easing functions · 6 z-index layers · 0 breakpoints · 4 opacity tokens