[GUIDE]: CUSTOMIZATION

Customization Guide

Modify design system, change colors, update components, and add features to match your brand.

Time: ~20 minutes

Level: Intermediate

[0x00] OVERVIEW

Fabrk uses a centralized design system in src/design-system.ts and CSS variables in globals.css. All templates use these tokens for consistency.

[WHAT YOU'LL INTEGRATE]:

src/design-system.ts - TypeScript design tokens
src/app/globals.css - CSS variables for colors
tailwind.config.ts - Tailwind configuration
DESIGN_SYSTEM.md - Complete specification

[0x01] CHANGE COLORS

Update color scheme by modifying CSS variables:

1/* src/app/globals.css */
2@layer base {
3  :root {
4    --background: 0 0% 100%;     /* White background */
5    --foreground: 240 10% 3.9%;  /* Nearly black text */
6    --primary: 271 91% 65%;      /* Purple accent */
7    --secondary: 240 5.9% 10%;   /* Dark gray */
8    --muted: 240 4.8% 95.9%;     /* Light gray */
9    --border: 240 5.9% 90%;      /* Border color */
10
11    /* Add custom colors */
12    --brand: 200 95% 50%;        /* Your brand color */
13  }
14
15  .dark {
16    --background: 240 10% 3.9%;
17    --foreground: 0 0% 98%;
18    --primary: 271 91% 65%;
19    /* ... dark mode colors */
20  }
21}

[COLOR TOOL]:

Use uicolors.app to generate HSL color scales, then copy values to globals.css.

[0x02] CHANGE TYPOGRAPHY

Replace terminal font with your brand font:

1// src/app/layout.tsx
2import { Inter } from "next/font/google";
3
4const inter = Inter({ subsets: ["latin"] });
5
6export default function RootLayout({ children }) {
7  return (
8    <html>
9      <body className={inter.className}>  {/* Remove font-mono */}
10        {children}
11      </body>
12    </html>
13  );
14}

Update design system tokens:

1// src/design-system.ts
2export const mode = {
3  font: "", // Remove font-mono
4  radius: "rounded" + "-lg", // Example: Change from rounded-none to rounded corners
5  // ... rest of design system
6};

[0x03] CHANGE BORDER RADIUS

Switch from sharp terminal aesthetic to rounded design:

1// src/design-system.ts
2export const mode = {
3  font: "font-sans",
4  radius: "rounded" + "-lg",  // Example: rounded corners (change from rounded-none)
5  // Components automatically inherit this
6};
7
8/* src/app/globals.css */
9@layer base {
10  :root {
11    --radius: 0.5rem;  /* 8px = rounded corners */
12  }
13}

[RADIUS VALUES]:

rounded-none → 0px (terminal default)
rounded‑sm → 2px (subtle)
rounded‑md → 6px (moderate)
rounded‑lg → 8px (soft)

[0x04] MODIFY COMPONENTS

Customize individual template components:

Change button style:

1// Before: Terminal style
2<Button className={cn(mode.radius, mode.font, "text-xs")}>
3  > SUBMIT
4</Button>
5
6// After: Modern style (example with custom radius)
7<Button className={"rounded" + "-lg font-sans text-sm"}>
8  Submit
9</Button>

Update card headers:

1// Replace terminal headers
2- <CardHeader code="0x00" title="SECTION_NAME" />
3
4// With standard headers
5+ <CardHeader>
6+   <h2>Section Name</h2>
7+ </CardHeader>

[0x05] ADD CUSTOM FEATURES

Extend templates with new functionality:

1. Add Search to Tables:

1const [searchQuery, setSearchQuery] = useState("");
2
3const filteredData = data.filter(item =>
4  item.name.toLowerCase().includes(searchQuery.toLowerCase())
5);
6
7<Input
8  placeholder="Search..."
9  value={searchQuery}
10  onChange={(e) => setSearchQuery(e.target.value)}
11/>

2. Add Export Functionality:

1function exportToCSV(data) {
2  const csv = data.map(row => Object.values(row).join(",")).join("\n");
3  const blob = new Blob([csv], { type: "text/csv" });
4  const url = URL.createObjectURL(blob);
5  const a = document.createElement("a");
6  a.href = url;
7  a.download = "export.csv";
8  a.click();
9}

[0x06] TESTING CHANGES

After making customizations, verify everything works:

Run type check:

1$npm run type-check

Test in multiple themes:

Toggle light/dark mode to verify colors work

Check responsive design:

Test on mobile, tablet, and desktop sizes

Verify accessibility:

Use Lighthouse audit to check color contrast and keyboard navigation

[0x07] BEST PRACTICES

Use design tokens: Always use CSS variables instead of hardcoded colors
Maintain consistency: Update design-system.ts so all templates inherit changes
Test thoroughly: Verify changes work across all templates you're using
Document changes: Keep notes on customizations for future updates
Version control: Commit design system changes separately from feature work

[0x08] NEXT STEPS

Check troubleshooting if you encounter issues
Browse more templates to add to your project
Read component docs for advanced customization

1/* src/app/globals.css */

2@layer base {

3 :root {

4 --background: 0 0% 100%; /* White background */

5 --foreground: 240 10% 3.9%; /* Nearly black text */

6 --primary: 271 91% 65%; /* Purple accent */

7 --secondary: 240 5.9% 10%; /* Dark gray */

8 --muted: 240 4.8% 95.9%; /* Light gray */

9 --border: 240 5.9% 90%; /* Border color */

11 /* Add custom colors */

12 --brand: 200 95% 50%; /* Your brand color */

13 }

15 .dark {

16 --background: 240 10% 3.9%;

17 --foreground: 0 0% 98%;

18 --primary: 271 91% 65%;

19 /* ... dark mode colors */

20 }

21}

1// src/app/layout.tsx

2import { Inter } from "next/font/google";

4const inter = Inter({ subsets: ["latin"] });

6export default function RootLayout({ children }) {

7 return (

8 <html>

9 <body className={inter.className}> {/* Remove font-mono */}

10 {children}

11 </body>

12 </html>

13 );

14}

1// src/design-system.ts

2export const mode = {

3 font: "font-sans",

4 radius: "rounded" + "-lg", // Example: rounded corners (change from rounded-none)

5 // Components automatically inherit this

6};

8/* src/app/globals.css */

9@layer base {

10 :root {

11 --radius: 0.5rem; /* 8px = rounded corners */

12 }

13}

1// Before: Terminal style

2<Button className={cn(mode.radius, mode.font, "text-xs")}>

3 > SUBMIT

4</Button>

6// After: Modern style (example with custom radius)

7<Button className={"rounded" + "-lg font-sans text-sm"}>

8 Submit

9</Button>

1const [searchQuery, setSearchQuery] = useState("");

3const filteredData = data.filter(item =>

4 item.name.toLowerCase().includes(searchQuery.toLowerCase())

5);

7<Input

8 placeholder="Search..."

9 value={searchQuery}

10 onChange={(e) => setSearchQuery(e.target.value)}

11/>

1function exportToCSV(data) {

2 const csv = data.map(row => Object.values(row).join(",")).join("\n");

3 const blob = new Blob([csv], { type: "text/csv" });

4 const url = URL.createObjectURL(blob);

5 const a = document.createElement("a");

6 a.href = url;

7 a.download = "export.csv";

8 a.click();