Style Guide
A reference for the Nexlayer design system. Use these components and patterns to build consistent interfaces.
Colors
Brand
Primary
Primary Hover
Semantic
Success
Warning
Error
Surfaces
Background
Surface
Elevated
Text
Primary
Secondary
Tertiary
Muted
Typography
Display
The quick brown fox
Headline
The quick brown fox jumps
Title
The quick brown fox jumps over the lazy dog
Body (default)
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Small
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Monospace
npx nexlayer deploy
Buttons
Variants
Inverted: Use variant="inverted" — white on dark mode, dark on light mode
Sizes
With Icons
States
Badges
Default
Primary
Success
Warning
Error
Outline
Cards
Card Title
This is a description of the card content.
Card content goes here. You can put any content inside a card.
Interactive Card
This card has hover effects.
Hover over this card to see the interaction.
Featured
Highlighted Card
This card is highlighted with the primary color.
Spacing
2 (0.5rem / 8px)
4 (1rem / 16px)
6 (1.5rem / 24px)
8 (2rem / 32px)
Border Radius
sm (8px)
default (12px)
lg (16px)
xl (20px)
2xl (24px)
full