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.

Always access colors via 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.

CategoryExamplesSource
Brandprimary, primaryLight, primaryDarkBRAND.colors in brand.ts
Semanticsuccess, error, warning, infobrand.ts + theme.ts
Surfacelight, dark, elevated, glasscolors.surface in theme.ts
Textprimary, secondary, tertiary, disabledcolors.text in theme.ts
Bordersubtle, medium, strongcolors.border in theme.ts
Accent-derivedctaGlow, iconCircleBg, selectedOverlayaccentDerived 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

VariantSizeWeightUse Case
display48700Hero sections
h1h632–16600–700Headings
body / bodyLarge16 / 18400Body copy
label / labelSmall14 / 12500Form labels
button / buttonSmall16 / 14600Button text
largeTitle34700iOS-style large titles

UI Components

ComponentDescription
GlassCardFrosted glass card with border — signature VidNotes look
CTAButtonGradient call-to-action button with brand glow shadow
PressableCardAnimated press card with spring feedback
CinematicBackgroundGradient background overlay for onboarding slides
PageDotsAnimated pagination dots

Spacing & Border Radius

Access via useAppTheme() destructured as sp (spacing) and br (border radius).

Spacing Scale

TokenValueUse Case
spacing.xs4Small gaps
spacing.sm8Compact padding
spacing.md12Default padding
spacing.lg16Section padding
spacing.xl20Large padding
spacing.2xl24Section gaps

Border Radius Scale

TokenValueUse Case
borderRadius.md8Cards, inputs
borderRadius.lg12Modals, sheets
borderRadius.xl16Large cards
borderRadius.3xl24Hero elements
borderRadius.full9999Circles, pills

Animation Presets

Spring Presets

PresetFeelUse Case
gentleSoft, naturalPage transitions
defaultBalancedGeneral animations
bouncyPlayfulNotifications, toasts
stiffPreciseToggles, switches
quickSnappyButton presses

Timing Presets

PresetDurationUse Case
press100msButton feedback
quick150msMicro interactions
standard300msGeneral transitions
carousel600msSlide transitions
cinematic900msDramatic 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.

VidNotes Design System

Dark-first premium UI out of the box

GlassCard, CTAButton, animation presets, spacing tokens — all wired up.

Dark/light mode
6 font families
iOS native feel
Get ShipReactNative
Save 40+ hours of setup