New
Building a Design System
How we built our design system from the ground up using OKLCH color spaces.
Alice
Theme
Page
Page-level layout components styled with the Ontopix theme — heroes, cards, CTAs, and marketing sections.
Production
Page-level components for building marketing pages, landing pages, and content layouts. These components combine surface tokens with typography for cohesive page sections.
Page Hero
Large banner section for page introductions with headline, description, and action buttons.
Design System
Build beautiful products
The Ontopix design system provides everything you need to create consistent, accessible, and beautiful user interfaces.
| Prop | Description |
|---|---|
title | Main heading text |
description | Supporting paragraph |
headline | Small label above the title |
links | Action buttons slot |
Page Header
Standard page header with title, description, and optional badges.
Stylebook
Theme Documentation
Complete guide to the Ontopix theme system, covering component defaults, color modes, and customization.
Page Card
Feature cards for showcasing capabilities, with icon, title, and description.
OKLCH Colors
Perceptually uniform color palettes with consistent lightness steps across all hues.
Dark Mode
Automatic light/dark adaptation through semantic CSS tokens — no manual overrides needed.
Component Theming
Centralized defaults for all Nuxt UI components via app.config.ts deep merge.
Pricing Plans
Pricing comparison cards for product tiers.
Starter
For small projects
$0
- 5 brand tokens
- Light mode only
- Community support
Pro
For growing teams
$49
- Unlimited tokens
- Light + Dark modes
- Priority support
- Custom palettes
Enterprise
For organizations
Custom
- Everything in Pro
- SSO integration
- Dedicated support
- SLA guarantee
| Feature | Description |
|---|---|
| Title | Plan name |
| Price | Cost display |
| Features | Bulleted feature list |
| Highlight | Visual emphasis for recommended plan |
| Action | CTA button slot |
Blog Posts
Blog post cards for content marketing sections.
Surface Hierarchy
Understanding visual hierarchy through background layering and contrast.
Bob
Dark Mode Done Right
Semantic tokens that adapt gracefully between light and dark color modes.
Carol