Novaiok Style System
Dark mode first · 4px grid · Rajdhani + DM Sans · Nova × Cana
Colors
Novaiok Style System semantic color tokens built on dark-first principles. Always use var() — never hardcode hex values.
Surfaces
Brand & Status
Program Colors
Text Colors
--color-text-primary · #f0f4ff — Headings and labels
--color-text-secondary · #8a9bc0 — Body and descriptions
--color-text-muted · #4a5568 — Placeholders and hints
--color-text-brand · #6b9eff — Links and active states
--color-text-success · #00d4aa — Success messages
--color-text-error · #ff7a7a — Error messages
--color-text-warning · #fbbf24 — Warning messages
Spacing & Radius
4px base grid. Use --space-* tokens exclusively. Border radius scale from 0 to pill.
Spacing Scale
Border Radius Scale
0px
2px
4px
8px
12px
16px
24px
pill
Shadows
6-level elevation scale + semantic shadows for buttons, focus rings, and cards.
Typography
Rajdhani for headings (drama + power). DM Sans for body (clarity + warmth). JetBrains Mono for code.
Rajdhani — Headings
Display 40px · Weight 700
Heading 1 · 32px
Heading 2 · 28px
Heading 3 · 24px
Heading 4 · 20px
Heading 5 · 18px
DM Sans — Body
Body Large · 16px · Regular — The quick brown fox jumps over the lazy dog.
Body · 14px · Regular — The quick brown fox jumps over the lazy dog.
Caption · 12px · Medium · Secondary color
Label · 11px · Semibold · Uppercase · Muted
Micro · 10px · Bold · Widest spacing
JetBrains Mono — Code
const member = { id: 'fake:1001', belt: 'blue', segment: 'adult_member' };
// Always use var() tokens — never hardcode hex values
var(--color-brand) // ✓ correct
#3b6eff // ✗ never hardcode
Graphic Examples
Real-world component combinations showing how tokens come together in actual interfaces.
Member Card — Adult
Blue belt • 68 classes in 30d • Streak: 3 weeks
Member Card — Junior
Gray/Black belt • 12 classes in 30d • Age: 11
Status Examples
Novaiok Icons
Custom geometric icon set. Minimal, bold, perfect for dark interfaces. 24px base, scalable 1:1.
Core Icons
Icon Guidelines
Grid: 24px base unit, scale 1:1 or 2:1 (48px, 32px, 24px, 16px)
Stroke: 1.5px – consistent weight across all icons
Radius: 2px on corners for warmth (not sharp, not rounded)
Color: Inherit from parent (use `currentColor` in SVG)
Spacing: ~3px padding inside the 24px grid
Imagery
Photography and visual treatment. Dark overlays, brand accent borders, and consistent framing.
Hero Image
Class Cards
Student Profile Card
Photography Rules
Overlays: Dark gradient (rgba(8,12,20,0.6+)) on real photos to preserve text contrast
Framing: 16:9 hero, 4:3 cards, 1:1 avatars — consistent aspect ratios
Borders: 1px `--color-border` on light backgrounds, 1.5px `--color-border-accent` on dark/photo overlays
Radius: Match card radius (`--radius-3` to `--radius-5`)
Emphasis: Brand accent borders (1.5px) on hero/featured images
Video
Video embeds, player skins, and thumbnail treatments for the Novaiok design system.
Embedded Video
Video Grid
Video Guidelines
Player: 16:9 aspect ratio standard, dark overlay on play button area
Thumbnails: Gradient backgrounds using Novaiok colors (brand, success, warning, etc.)
Play icon: Centered, 48-64px, white or dark depending on background contrast
Cards: Title below (2-line max), subtle label
Hover: Minimal lift (shadow change), never intrusive
Ratio: 16:9 for embeds, 1:1 for thumbnails in grids
Badges & Chips
Status indicators, program labels, filter chips. Tonal variants for low-contrast contexts.
Status Badges
<span class="badge badge-active">Active</span> <span class="badge badge-trial">Trial</span> <span class="badge badge-overdue">Overdue</span> <span class="badge badge-frozen">Frozen</span>
Program Badges
Semantic (Tonal)
Chips
Belt Badges
IBJJF belt system — adult belts (white→black) and kids belts (white→green). Split badges for barred transition belts.
Adult Belts
Kids Belts (IBJJF)
Inputs & Forms
Dark surface inputs with brand focus rings. States: default, hover, focus, error, success, disabled.
Text Input States
<div class="form-field"> <label class="form-label required">Label</label> <input class="input" placeholder="..." /> <span class="form-help">Help text</span> </div> /* Error: add class "error" to input */ /* Disabled: add disabled attribute */
Other Controls
Cards
Surface containers with shadow, border, and hover state. Stat cards, member cards, and alert variants.
Stat Cards
Basic Card
Card content goes here. Use cards to group related information and actions into a cohesive unit.
Alert Cards
Tables
Data tables with hover rows, avatar cells, badge columns, and action buttons. No harsh borders — subtlety through color.
| Member | Program | Belt | Status | Last Visit | |
|---|---|---|---|---|---|
MT Marcus Teixeira |
Adults | Blue | Active | 2 days ago | |
SO Sarah Okonkwo |
Adults | Purple | Active | Yesterday | |
DF Diego Ferreira |
Adults | White | Overdue | 14 days ago | |
ET Ethan Clarke |
Juniors | Gray | Active | 3 days ago |
Overlays & Toasts
Modal with spring animation + blur backdrop. Toasts with colored left accent. Tabs for navigation.
Modal
Toasts
Tabs
Tab content goes here
Misc Components
Progress bars, skeleton loaders, avatars, and empty states.