Brightbase DS

v0.1

Color Palette

primary
50
100
200
300
400
500
600
700
800
900
950
secondary
50
100
200
300
400
500
600
700
800
900
950
accent
50
100
200
300
400
500
600
700
800
900
950
neutral
50
100
200
300
400
500
600
700
800
900
950
dark
50
100
200
300
400
500
600
700
800
900
950

Semantic Colors

Backgrounds
bg-primary
bg-surface
bg-card
Text
text-primary
text-secondary
text-on-action
Dark
bg-dark-primary
bg-dark-surface
bg-dark-card
text-dark-primary
text-dark-secondary
Actions
action-primary
action-primary-hover
action-secondary
action-secondary-hover
action-destructive
action-destructive-hover
Borders
border-default
border-faint
border-focus
Feedback
feedback-success
feedback-error

Gradients

gradient-primary
180° · primary-300 → primary-600
gradient-secondary
180° · secondary-300 → secondary-600
gradient-accent
180° · accent-300 → accent-600
gradient-neutral
180° · neutral-300 → neutral-600
gradient-dark
180° · dark-300 → dark-600

Typography

Eyebrow Label
Inter · 600 · 12px
The quick brown fox jumps over the lazy dog
DM Sans · 600 · 48px
The quick brown fox jumps over the lazy dog
DM Sans · 600 · 30px
The quick brown fox jumps over the lazy dog
DM Sans · 600 · 20px

The quick brown fox jumps over the lazy dog. Body text at base size — this paragraph demonstrates the body font, weight, line height, and secondary text color. All values are driven by design tokens.

Inter · 400 · 16px
The quick brown fox jumps over the lazy dog. Small / caption text for labels and secondary content.
Inter · 400 · 14px
const mono = "JetBrains Mono";
JetBrains Mono · 400 · 14px
Font Specimens
DM Sans — The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
Inter — The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog
JetBrains Mono — The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog

Spacing Scale

1
4px
2
8px
3
12px
4
16px
6
24px
8
32px
12
48px
16
64px

Atoms — Light

Button Variants
Button Sizes
Button States
Inputs
As it appears on your ID
Password must be at least 8 characters
Badges
PrimarySecondarySuccessError
Toggles
Email notifications
Marketing emails
Push notifications
Cards

Design Tokens

Foundation colors cascade through semantic assignments to every component automatically.

Typography

Font families, sizes, weights, and line heights all respond to token changes in real time.

Spacing

A base unit drives the entire spacing scale, keeping proportions consistent throughout.

Atoms — Dark

Button Variants (Dark)
Button Sizes (Dark)
Cards (Dark)

Dark Card

Cards automatically adapt their background, border, and text colors to dark context.

Dark Card

Shadow and border styling is independently configurable for dark backgrounds.
Inputs (Dark)
Text on Dark
Heading on dark background
Body text on dark background — typography adapts to dark sections like hero areas, footers, and dark cards.

Molecules

Navigation Bar
Feature Grid
⚡

Lightning Fast

Optimized for speed with sub-second load times across all devices.

🎨

Fully Themeable

Every color, font, and spacing value is driven by design tokens.

📦

Export Anywhere

Generate CSS, Tailwind, or Figma variables from your design system.

Stats Block
12K+
Active Users
450
Projects Shipped
99%
Uptime
4.9
Average Rating
Testimonials

“This design system saved us weeks of work. The token cascade means we change one color and the whole brand updates.”

Sarah Chen
Design Lead, Acme Corp

“Finally a tool that bridges the gap between design and code. The Figma export is a game changer for our workflow.”

Marcus Rivera
Frontend Engineer, Startup Co
Pricing Cards
Starter
$0/month
  • ✓ 5 design tokens
  • ✓ CSS export
  • ✓ Basic components
Pro
$29/month
  • ✓ Unlimited tokens
  • ✓ All export formats
  • ✓ Full component library
  • ✓ Figma sync
Team
$79/month
  • ✓ Everything in Pro
  • ✓ Team collaboration
  • ✓ Version history
  • ✓ Priority support