Colors
Orange-accented dark theme palette
Theme
Primary#ea580c
Primary Hover#f97316
Surface Base#000000
Surface Card#0a0a0a
Border Default#262626
Border Accent#ea580c
Text Primary#fafafa
Text Secondary#737373
Chart Palette (OKLCH)
Orange0.65 0.26 30
Cyan0.75 0.18 190
Yellow0.88 0.21 95
Violet0.58 0.32 285
Green0.72 0.2 150
Pink0.68 0.24 0
Blue0.58 0.28 250
Amber0.7 0.22 50
Typography
Chakra Petch for UI, IBM Plex Mono for code
Display Font (Chakra Petch)
The quick brown fox jumps over the lazy dog
BRUTALIST UPPERCASE HEADING
Regular body text for descriptions and content.
Mono Font (IBM Plex Mono)
const code = "For technical content";2024-01-15 • Technical metadataVariants
Sizes
States
With Icons
Badges
Status indicators and tags
Variants
DefaultFeaturedLiveBetaNewTagDraft
Sizes
SmallMediumLarge
Cards
Content containers with optional interactivity
Basic Card
Simple card with title and description
THUMBNAIL
Interactive Card
Hover for accent title
THUMBNAIL
Card with Footer
Includes badges in footer
FeaturedNew
Links
Navigation and action links
External Links
Underline Styles
Tooltips
Informational overlays using CSS anchor positioning
Positions
Rich Content
Form Inputs
Text inputs, selects, checkboxes, and radios with hairline borders
Text Inputs
Choose a unique username
This field is required
Textarea
Message is too short
Select
Please select an option
Checkbox & Radio
Input Sizes
Date & Time
Slider & Color
Toggle Groups
Single or multi-select option buttons
Single Select
Selected: grid
Multiple Select
Selected: featured
Primary Variant
Sizes
Action Group
Detached Group
Diagonal Dividers
Brutalist slash separators
Inline Usage
Item OneItem TwoItem Three
Thickness Variants
Default
Thick
Heavy
Color Variants
Default
Strong
Accent