Design System
The boilerplate uses a comprehensive design system inspired by VidNotes' "dark-first cinematic premium" aesthetic. All tokens are centralized in src/constants/ for easy per-app customization.
useAppTheme() — never hardcode hex values. This ensures dark/light mode works automatically everywhere.Color System
Brand colors live in src/constants/brand.ts. Theme tokens are in src/constants/theme.ts. Use the useAppTheme() hook to access colors as tc.text, tc.surfaceElevated, tc.borderSubtle, etc.
| Category | Examples | Source |
|---|---|---|
| Brand | primary, primaryLight, primaryDark | BRAND.colors in brand.ts |
| Semantic | success, error, warning, info | brand.ts + theme.ts |
| Surface | light, dark, elevated, glass | colors.surface in theme.ts |
| Text | primary, secondary, tertiary, disabled | colors.text in theme.ts |
| Border | subtle, medium, strong | colors.border in theme.ts |
| Accent-derived | ctaGlow, iconCircleBg, selectedOverlay | accentDerived in theme.ts |
Typography
6 font families available. Font configured via BRAND.font in src/constants/brand.ts. Change the font with one line — theme.ts and _layout.tsx handle the rest automatically.
Text Variants
| Variant | Size | Weight | Use Case |
|---|---|---|---|
display | 48 | 700 | Hero sections |
h1 – h6 | 32–16 | 600–700 | Headings |
body / bodyLarge | 16 / 18 | 400 | Body copy |
label / labelSmall | 14 / 12 | 500 | Form labels |
button / buttonSmall | 16 / 14 | 600 | Button text |
largeTitle | 34 | 700 | iOS-style large titles |
UI Components
| Component | Description |
|---|---|
GlassCard | Frosted glass card with border — signature VidNotes look |
CTAButton | Gradient call-to-action button with brand glow shadow |
PressableCard | Animated press card with spring feedback |
CinematicBackground | Gradient background overlay for onboarding slides |
PageDots | Animated pagination dots |
Spacing & Border Radius
Access via useAppTheme() destructured as sp (spacing) and br (border radius).
Spacing Scale
| Token | Value | Use Case |
|---|---|---|
spacing.xs | 4 | Small gaps |
spacing.sm | 8 | Compact padding |
spacing.md | 12 | Default padding |
spacing.lg | 16 | Section padding |
spacing.xl | 20 | Large padding |
spacing.2xl | 24 | Section gaps |
Border Radius Scale
| Token | Value | Use Case |
|---|---|---|
borderRadius.md | 8 | Cards, inputs |
borderRadius.lg | 12 | Modals, sheets |
borderRadius.xl | 16 | Large cards |
borderRadius.3xl | 24 | Hero elements |
borderRadius.full | 9999 | Circles, pills |
Animation Presets
Spring Presets
| Preset | Feel | Use Case |
|---|---|---|
gentle | Soft, natural | Page transitions |
default | Balanced | General animations |
bouncy | Playful | Notifications, toasts |
stiff | Precise | Toggles, switches |
quick | Snappy | Button presses |
Timing Presets
| Preset | Duration | Use Case |
|---|---|---|
press | 100ms | Button feedback |
quick | 150ms | Micro interactions |
standard | 300ms | General transitions |
carousel | 600ms | Slide transitions |
cinematic | 900ms | Dramatic reveals |
Onboarding
Onboarding is configured via src/constants/onboarding.ts and src/locales/en.ts. Features include cinematic gradient backgrounds per slide, glassmorphism icon circles with animated glow, and bold/ExtraBold titles using the configured font family.
Dark-first premium UI out of the box
GlassCard, CTAButton, animation presets, spacing tokens — all wired up.