Customization Guide

Customize every aspect of Fabrk's design system. From quick brand color changes to creating entirely new themes, this guide covers it all.

1. 1. Convert your brand color to OKLCH → oklch.com
2. 2. Open src/app/globals.css
3. 3. Find the :root block (~line 15)
4. 4. Update --primary and --primary-foreground tokens
5. 5. Run npm run scan:hex to verify

Example:

:root {
  --primary: oklch(57% 0.21 276);           /* Your brand color */
  --primary-foreground: oklch(100% 0 0);    /* Text on brand color */
}

Fabrk includes 12 retro terminal-inspired color themes:

• CRT Phosphor: green, amber, blue, red, purple
• Retro Computer: gameboy, c64, gbpocket, vic20, atari, spectrum
• Light: bw

Change default theme:

1. 1. Edit src/design-system/providers/ThemeProvider.tsx:82
2. 2. Change defaultColorTheme = 'green' to your choice
3. 3. Restart dev server

OKLCH is a perceptually uniform color space that makes it easier to create consistent, accessible color palettes.

Format: oklch(L% C H)

• L = Lightness (0-100%)
• C = Chroma (0-0.4, intensity)
• H = Hue (0-360 degrees, color angle)

Why OKLCH?

• Better color mixing than HSL
• Perceptually uniform (50% looks halfway bright)
• Future-proof CSS color format
• Better dark mode support

Steps:

1. 1. Duplicate an existing theme section in globals.css
2. 2. Rename [data-theme="yourtheme"]
3. 3. Update all CSS variables with OKLCH values
4. 4. Test contrast ratios (4.5:1 for text)
5. 5. Add theme to ThemeProvider.tsx
6. 6. Restart dev server

Required Variables:

• --background, --foreground
• --card, --card-foreground
• --primary, --primary-foreground
• --muted, --muted-foreground
• --border, --input, --ring

Change Monospace Font:

1. 1. Install font: npm install @next/font
2. 2. Edit src/app/layout.tsx
3. 3. Replace JetBrains_Mono import
4. 4. Update className on body tag

Recommended Monospace Fonts:

• Fira Code (with ligatures)
• IBM Plex Mono (retro IBM feel)
• Space Mono (geometric terminal)
• VT323 (authentic CRT look)

Never hardcode colors. Always use semantic tokens:

Banned patterns:

• background-white, background-black
• bg-gray-*, text-gray-*
• #hexvalues
• rgb(), hsl()

Import mode from design-system for consistent styling:

import { mode } from "@/design-system";

<Button className={cn(mode.radius, mode.font, "w-full")}>
  > SUBMIT
</Button>

Available tokens:

• mode.radius - Border radius (rounded-none)
• mode.font - Font family (font-mono)
• mode.inputStyle - Input styling classes

• [ ] Run npm run scan:hex (should find zero hardcoded colors)
• [ ] Test all 12 color themes (switch in theme dropdown)
• [ ] Check contrast ratios (4.5:1 for text)
• [ ] Verify mobile responsiveness
• [ ] Test dark mode toggle
• [ ] Run Lighthouse accessibility audit (90+ score)