New Era of Normalcy
Contact us arrow_forward
Theme
Color

Neon · Design System

Neon
Design System

8Services
8Color Pairs
2Typefaces
70+Tokens

Color Pairs

Neutral Scale

Semantic Roles

Primary
Teal
Success
Lime
Warning
Amber
Danger
Orange
Info
Blue

Typography

Display / Bold
The quick
brown fox
Syncopate — 700 Bold
Body / Regular
Jumps over
the lazy dog.
A refined variable typeface with excellent screen legibility at every weight.
Epilogue — 400 / 700
Monospace / Code
--color-primary:
  #FF6FFF;
font-size: 14px;
border-radius: 8px;
IBM Plex Mono
6XL80px / 900
Display
5XL64px / 900
Heading 1
4XL50px / 800
Heading 2
3XL38px / 700
Heading 3
2XL30px / 700
Heading 4
LG20px / 500
Subtitle — body copy lead-in
BASE15px / 400
Body — primary typeface for longform reading, optimized for screen.
SM13px / 400
Body Small — captions, helper text, secondary information
XS / MONO11px / wider
LABEL · CAPTION · TOKEN · TAG

Spacing

Border Radius

--radius-none
0px
--radius-sm
4px
--radius-md
8px
--radius-lg
12px
--radius-xl
16px
--radius-2xl
24px
--radius-full
9999px

Elevation

Flat0No shadow — border only
ShadowSM--shadow-sm
ShadowMD--shadow-md
ShadowLG--shadow-lg

Components

Solid Buttons — All Pairs
Sizes
Ghost & Outline
Neutral Violet Indigo Blue Teal Lime Amber Orange Pink
check_circle Value validated
error Invalid format
Primary · Violet
Design Token

A named variable storing a visual decision as a reusable value across the entire system.

Info · Teal
Color Pair

Each pair combines a deep hue-shifted dark with a vivid accent for maximum contrast and harmony.

Warning · Amber
Semantic Role

Colors mapped to intent — primary, success, warning, danger, info — consistent across your product.

Mesh Gradients

Gradient Text

CSS Variables

design-tokens.css