00
05
SYSTEM
10
15
TOKENS
CORE IDENTITY

Design System.

The atomic primitives, semantic tokens, and components that power this digital experience.

SHOW DEV TOKENS
DOWNLOAD TOKENS (.JSON)
01 / COLORS
Backgrounds & Surfaces
Base Background
#0D0D0D
Raised Surface
#141414
Overlay
rgba(13, 13, 13, 0.6)
Ink & Borders
Primary Ink
#FFFFFF
Muted Ink
rgba(255, 255, 255, 0.6)
Border Line
rgba(255, 255, 255, 0.1)
Inverse Ink
#000000
Accent & Interactive
Neon Accent
#BFF549
Accent Hover
#8CC21F
Accent Ink
#0D0D0D
02 / TYPOGRAPHY
Headings
Aa
Archivo
Medium (500), Bold (700)
H1 HERO TITLE

Design System.

H2 SECTION TITLE

Case Studies.

H3 CARD TITLE

Product Design

Body & UI
Aa
Inter
Regular (400), Medium (500), SemiBold (600)
HERO DESC

The atomic primitives, semantic tokens, and components.

BODY COPY

Redesigning UI and introducing new monitoring features to streamline asset tracking.

Mono
Aa
JetBrains Mono
HUD LABEL
01/MY WORK
03 / COMPONENTS
Buttons & Links
PRIMARY BUTTON
OUTLINE BUTTON
NAV BUTTON
CARD LINK
NAV LINK
Tags
DEFAULT TAG
UX RESEARCH
COLORED TAGS (HOVER)
BLUE ORANGE PURPLE RED
HUD Elements
CARD HUD
01 PRODUCT DESIGN
STATUS INDICATOR
ACTIVE
REPACK TOOLS BUTTON
Accessibility