Singler / Design system QA

Poppins. Built for clarity.

Section heading / 600

Card heading / 600

Body / 400 — The quick brown fox jumps over the lazy dog. 0123456789. Clear typography for digital operations.

Muted body on a dark surface — supporting information with a quieter emphasis.

Meta / 400 · Updated today · Small text sample

Dark card

Poppins 400. Shared card padding, small gap, border and rounded corners.

card-padding · radius-card

✦

Card with icon halo

Poppins 400. Shared card padding, small gap, border and rounded corners.

card-padding · radius-card

Light surface / shared system

Color, shape and space

Body / 400 — Poppins should remain consistent across both surface contexts.

Muted body on a light surface — readable secondary information.

Light card

Poppins 400. Shared card padding, small gap, border and rounded corners.

card-padding · radius-card

✦

Card with icon halo

Poppins 400. Shared card padding, small gap, border and rounded corners.

card-padding · radius-card

Global color palette

surface-dark

#030B1E

surface-dark-card

#0B1427

text-on-dark

#F8FAFF

text-muted-dark

#BAC3D5

brand-cyan

#12D8E8

brand-purple

#8B4DFF

brand-cyan-deep

#007C91

brand-purple-deep

#7435E8

surface-light

#F5F6FB

surface-light-card

#FFFFFF

text-on-light

#101936

text-muted-light

#47536B

border-dark

#243047

border-light

#E2E6F0

status-success

#28DC83

Layout tokens

This content container uses content-max: 75rem (1200px at a 16px root). Section padding responds through the shared section class.

← Maximum content width →

gap-small · 0.75rem

A

B

C

gap-medium · 1.5rem

A

B

C

gap-large · 2.5rem

A

B

C

radius-small

radius-card

radius-large

radius-pill