Design Tokens — Make It Yours

Set up the colours, fonts, and spacing rules once. Then every component you build looks intentional automatically.

A design token is just a named value. Instead of writing #4F46E5 everywhere you need indigo, you write indigo. Instead of 'Cormorant Garamond, serif' everywhere, you write font-display. Then if you decide your school's indigo should be a touch warmer, you change one place and every page updates.

This is the whole reason real projects feel "designed" and prototypes don't.

1. Pick Your Tokens

Open the brief you wrote in Project 1. You have three adjectives and probably a sense of the colours. Now pin them down.

Pick exactly:

Two colours — a primary accent (used for buttons, links, highlights) and a secondary accent (used sparingly for a different kind of emphasis).
One dark surface colour — for footers, dark sections, dark mode if you add it later.
Two fonts — one for body text (sans-serif), one for the main heading (serif or display font for character).

Aurora Public School's choices (used in examples throughout):

Primary:        Indigo #4F46E5   (buttons, links, accents)
Primary hover:  Indigo #4338CA   (button hover)
Secondary:      Amber  #F59E0B   (CTA highlights, badges)
Dark surface:   #111827          (footer, dark cards)
Light surface:  #F9FAFB          (alternate section background)
Body font:      DM Sans          (everything that isn't a heading)
Display font:   Cormorant Garamond  (just the hero h1)

You can use these exact values if you can't decide. They're tested and they work for a school site.

2. Add Your Tokens to `globals.css`

create-next-app generates a globals.css that starts with @import "tailwindcss". That one line pulls in every Tailwind utility. Right after it, add an @theme block — Tailwind v4's way of declaring design tokens:

@import "tailwindcss";
 
@theme {
  /* Colours */
  --color-indigo:       #4F46E5;
  --color-indigo-hover: #4338CA;
  --color-amber:        #F59E0B;
  --color-amber-dark:   #D97706;
  --color-dark-base:    #111827;
  --color-off-white:    #F9FAFB;
 
  /* Fonts — Next.js injects --font-sans / --font-display via layout.tsx */
  --font-family-sans:    var(--font-sans), system-ui, sans-serif;
  --font-family-display: var(--font-display), Georgia, serif;
}

After saving, in any component you can now write:

<button className="bg-indigo hover:bg-indigo-hover text-white">
  Plan a Visit
</button>

And it just works. The @theme variable names are the source of truth — Tailwind generates bg-indigo, text-dark-base, font-display, etc. directly from them. No separate config file needed.

If your project has a tailwind.config.ts (older templates still generate one), you can delete it — @theme in CSS replaces it entirely in Tailwind v4.

3. Load the Fonts

Next.js has built-in font optimisation. Open src/app/layout.tsx. Add font imports at the top:

import type { Metadata } from "next";
import { DM_Sans, Cormorant_Garamond } from "next/font/google";
import "./globals.css";
 
const dmSans = DM_Sans({
  subsets: ["latin"],
  variable: "--font-sans",
});
 
const cormorant = Cormorant_Garamond({
  weight: ["500", "700"],
  subsets: ["latin"],
  variable: "--font-display",
});
 
export const metadata: Metadata = {
  title: "Aurora Public School",
  description: "Where curious children grow into confident adults.",
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${dmSans.variable} ${cormorant.variable}`}>
      <body className="font-sans bg-white text-dark-base antialiased">
        {children}
      </body>
    </html>
  );
}

The --font-sans and --font-display CSS variables that layout.tsx injects get picked up by the @theme block you wrote in step 2. No extra config needed.

Now <h1 className="font-display">...</h1> renders in Cormorant Garamond. <p>...</p> defaults to DM Sans.

4. Finish `globals.css`

Your final globals.css combines the Tailwind import, your @theme tokens, and the two global rules from above:

@import "tailwindcss";
 
@theme {
  --color-indigo:       #4F46E5;
  --color-indigo-hover: #4338CA;
  --color-amber:        #F59E0B;
  --color-amber-dark:   #D97706;
  --color-dark-base:    #111827;
  --color-off-white:    #F9FAFB;
 
  --font-family-sans:    var(--font-sans), system-ui, sans-serif;
  --font-family-display: var(--font-display), Georgia, serif;
}
 
/* Smooth scroll on anchor clicks */
html {
  scroll-behavior: smooth;
}
 
/* Default selection colour matches brand */
::selection {
  background: #C7D2FE;  /* indigo-200 */
  color: #1E1B4B;       /* indigo-950 */
}

That's it. Most styling is per-component, using Tailwind classes. Global CSS should stay tiny.

5. Store the School Data in One Place

Create src/lib/constants.ts. This is your school's "single source of truth" — the constant that every page imports.

export const SCHOOL = {
  name: 'Aurora Public School',
  tagline: 'Where curious children grow into confident adults.',
  founded: 2008,
  type: 'CBSE K-12',
  city: 'Mumbai',
  state: 'Maharashtra',
} as const
 
export const BRANCHES = [
  {
    slug: 'andheri',
    name: 'Andheri',
    address: 'Plot 18, JB Nagar, Andheri East, Mumbai 400059',
    phone: '+91 22 5500 1234',
    email: 'andheri@aurora-school.in',
    classes: 'Nursery to Grade 12',
    image: '/branches/andheri.jpg',
  },
  {
    slug: 'powai',
    name: 'Powai',
    address: 'Hiranandani Gardens, Powai, Mumbai 400076',
    phone: '+91 22 5500 5678',
    email: 'powai@aurora-school.in',
    classes: 'Nursery to Grade 12',
    image: '/branches/powai.jpg',
  },
  {
    slug: 'thane',
    name: 'Thane',
    address: 'Hiranandani Estate, Thane 400607',
    phone: '+91 22 5500 9012',
    email: 'thane@aurora-school.in',
    classes: 'Nursery to Grade 10',
    image: '/branches/thane.jpg',
  },
] as const
 
export const CONTACT = {
  admissionsEmail: 'admissions@aurora-school.in',
  generalEmail: 'hello@aurora-school.in',
  phoneTel: '+912255001234',
  phoneDisplay: '+91 22 5500 1234',
  hours: 'Mon to Sat, 9:00 AM to 5:00 PM',
} as const

Now every page imports from @/lib/constants and there is exactly one place to update if a branch phone number changes.

This is the single most important difference from Project 1. In Lovable, the branches were mentioned in 7 different places. Here, they're a constant. Adding a new branch is one entry in the BRANCHES array.

6. Add Photos to `/public`

Inside public/, create a branches/ folder. Drop your downloaded photos in:

public/
├── branches/
│   ├── andheri.jpg
│   ├── powai.jpg
│   └── thane.jpg
├── hero.jpg
└── og-image.jpg

Files inside public/ are served from the root of your site. So public/branches/andheri.jpg becomes the URL /branches/andheri.jpg — which matches the image: '/branches/andheri.jpg' in BRANCHES.

For now, even placeholder photos are fine. You can replace them later. The naming is what matters.

7. Commit and Push

git add .
git commit -m "set up design tokens, fonts, school data"
git push

Wait ~60s, then refresh aurora-school.vercel.app. The default Next welcome page is still there (we haven't touched page.tsx yet), but the production build now includes your fonts and tokens — ready to use on the next page.

What's Next

The infrastructure is set. The design language is locked in. Now you build the actual pages.

The next page (branches-page.mdx) builds the /branches route — and along the way you'll see how having BRANCHES as one constant makes the whole thing trivial. After that, the home page, the admissions page with a working contact form, and finally about + deploy + checklist.

Next: Build the branches page

This is the whole reason real projects feel "designed" and prototypes don't.

1. Pick Your Tokens

Open the brief you wrote in Project 1. You have three adjectives and probably a sense of the colours. Now pin them down.

Pick exactly:

Two colours — a primary accent (used for buttons, links, highlights) and a secondary accent (used sparingly for a different kind of emphasis).
One dark surface colour — for footers, dark sections, dark mode if you add it later.
Two fonts — one for body text (sans-serif), one for the main heading (serif or display font for character).

Aurora Public School's choices (used in examples throughout):

Primary:        Indigo #4F46E5   (buttons, links, accents)
Primary hover:  Indigo #4338CA   (button hover)
Secondary:      Amber  #F59E0B   (CTA highlights, badges)
Dark surface:   #111827          (footer, dark cards)
Light surface:  #F9FAFB          (alternate section background)
Body font:      DM Sans          (everything that isn't a heading)
Display font:   Cormorant Garamond  (just the hero h1)

You can use these exact values if you can't decide. They're tested and they work for a school site.

2. Add Your Tokens to `globals.css`

@import "tailwindcss";
 
@theme {
  /* Colours */
  --color-indigo:       #4F46E5;
  --color-indigo-hover: #4338CA;
  --color-amber:        #F59E0B;
  --color-amber-dark:   #D97706;
  --color-dark-base:    #111827;
  --color-off-white:    #F9FAFB;
 
  /* Fonts — Next.js injects --font-sans / --font-display via layout.tsx */
  --font-family-sans:    var(--font-sans), system-ui, sans-serif;
  --font-family-display: var(--font-display), Georgia, serif;
}

After saving, in any component you can now write:

<button className="bg-indigo hover:bg-indigo-hover text-white">
  Plan a Visit
</button>

And it just works. The @theme variable names are the source of truth — Tailwind generates bg-indigo, text-dark-base, font-display, etc. directly from them. No separate config file needed.

If your project has a tailwind.config.ts (older templates still generate one), you can delete it — @theme in CSS replaces it entirely in Tailwind v4.

3. Load the Fonts

Next.js has built-in font optimisation. Open src/app/layout.tsx. Add font imports at the top:

import type { Metadata } from "next";
import { DM_Sans, Cormorant_Garamond } from "next/font/google";
import "./globals.css";
 
const dmSans = DM_Sans({
  subsets: ["latin"],
  variable: "--font-sans",
});
 
const cormorant = Cormorant_Garamond({
  weight: ["500", "700"],
  subsets: ["latin"],
  variable: "--font-display",
});
 
export const metadata: Metadata = {
  title: "Aurora Public School",
  description: "Where curious children grow into confident adults.",
};
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en" className={`${dmSans.variable} ${cormorant.variable}`}>
      <body className="font-sans bg-white text-dark-base antialiased">
        {children}
      </body>
    </html>
  );
}

The --font-sans and --font-display CSS variables that layout.tsx injects get picked up by the @theme block you wrote in step 2. No extra config needed.

Now <h1 className="font-display">...</h1> renders in Cormorant Garamond. <p>...</p> defaults to DM Sans.

4. Finish `globals.css`

Your final globals.css combines the Tailwind import, your @theme tokens, and the two global rules from above:

@import "tailwindcss";
 
@theme {
  --color-indigo:       #4F46E5;
  --color-indigo-hover: #4338CA;
  --color-amber:        #F59E0B;
  --color-amber-dark:   #D97706;
  --color-dark-base:    #111827;
  --color-off-white:    #F9FAFB;
 
  --font-family-sans:    var(--font-sans), system-ui, sans-serif;
  --font-family-display: var(--font-display), Georgia, serif;
}
 
/* Smooth scroll on anchor clicks */
html {
  scroll-behavior: smooth;
}
 
/* Default selection colour matches brand */
::selection {
  background: #C7D2FE;  /* indigo-200 */
  color: #1E1B4B;       /* indigo-950 */
}

That's it. Most styling is per-component, using Tailwind classes. Global CSS should stay tiny.

5. Store the School Data in One Place

Create src/lib/constants.ts. This is your school's "single source of truth" — the constant that every page imports.

export const SCHOOL = {
  name: 'Aurora Public School',
  tagline: 'Where curious children grow into confident adults.',
  founded: 2008,
  type: 'CBSE K-12',
  city: 'Mumbai',
  state: 'Maharashtra',
} as const
 
export const BRANCHES = [
  {
    slug: 'andheri',
    name: 'Andheri',
    address: 'Plot 18, JB Nagar, Andheri East, Mumbai 400059',
    phone: '+91 22 5500 1234',
    email: 'andheri@aurora-school.in',
    classes: 'Nursery to Grade 12',
    image: '/branches/andheri.jpg',
  },
  {
    slug: 'powai',
    name: 'Powai',
    address: 'Hiranandani Gardens, Powai, Mumbai 400076',
    phone: '+91 22 5500 5678',
    email: 'powai@aurora-school.in',
    classes: 'Nursery to Grade 12',
    image: '/branches/powai.jpg',
  },
  {
    slug: 'thane',
    name: 'Thane',
    address: 'Hiranandani Estate, Thane 400607',
    phone: '+91 22 5500 9012',
    email: 'thane@aurora-school.in',
    classes: 'Nursery to Grade 10',
    image: '/branches/thane.jpg',
  },
] as const
 
export const CONTACT = {
  admissionsEmail: 'admissions@aurora-school.in',
  generalEmail: 'hello@aurora-school.in',
  phoneTel: '+912255001234',
  phoneDisplay: '+91 22 5500 1234',
  hours: 'Mon to Sat, 9:00 AM to 5:00 PM',
} as const

Now every page imports from @/lib/constants and there is exactly one place to update if a branch phone number changes.

6. Add Photos to `/public`

Inside public/, create a branches/ folder. Drop your downloaded photos in:

public/
├── branches/
│   ├── andheri.jpg
│   ├── powai.jpg
│   └── thane.jpg
├── hero.jpg
└── og-image.jpg

For now, even placeholder photos are fine. You can replace them later. The naming is what matters.

7. Commit and Push

git add .
git commit -m "set up design tokens, fonts, school data"
git push

What's Next

The infrastructure is set. The design language is locked in. Now you build the actual pages.

Design Tokens — Make It Yours

1. Pick Your Tokens

2. Add Your Tokens to `globals.css`

3. Load the Fonts

4. Finish `globals.css`

5. Store the School Data in One Place

6. Add Photos to `/public`

7. Commit and Push

What's Next

Next: Build the branches page

On this page

Design Tokens — Make It Yours

1. Pick Your Tokens

2. Add Your Tokens to `globals.css`

3. Load the Fonts

4. Finish `globals.css`

5. Store the School Data in One Place

6. Add Photos to `/public`

7. Commit and Push

What's Next

Next: Build the branches page

On this page