# 6. Styling & Design System

## Tailwind CSS 4 — how styling works here

The site is styled almost entirely with **Tailwind CSS utility classes** written directly in the JSX `className` attributes. For example:

```tsx
<p className="text-2xl font-bold text-[#333333] mb-4">Heading</p>
```

means: large text, bold, dark-gray color, margin-bottom. You compose styles by stacking utilities rather than writing separate CSS files.

### Important: there is no `tailwind.config.js`

This project uses **Tailwind v4**, which is configured **CSS-first** instead of via a JS config file. The configuration lives in `app/globals.css`:

```css
@import "tailwindcss";

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-montserrat: var(--font-montserrat);
  --font-orbitron: var(--font-orbitron);
}
```

- `@import "tailwindcss";` pulls in all of Tailwind.
- The `@theme inline { … }` block is where custom design tokens (colors, fonts) are registered so they become usable as utility classes (e.g., `font-montserrat`).
- PostCSS wiring is in `postcss.config.mjs` (`@tailwindcss/postcss`).

> If you look for a `tailwind.config.js` to add a color or breakpoint — there isn't one. Add design tokens in the `@theme` block of `globals.css`, or just use Tailwind's arbitrary-value syntax (below).

### Arbitrary values — the project's main color technique

The codebase uses Tailwind's **square-bracket arbitrary value** syntax heavily, because the brand colors aren't registered as named tokens:

```tsx
className="bg-[#333333] text-[#FF3B30] border-[#B2B2B2]"
```

Anything in `[...]` is a literal CSS value. This is why you'll see raw hex codes all over the JSX rather than names like `bg-brand-red`. It works, but it means the palette isn't centralized — see [Known Issues](07-known-issues-and-maintenance.md) if you want to refactor.

## Fonts

Two Google Fonts are loaded once in `app/layout.tsx` via `next/font/google`:

| Font           | CSS variable        | Tailwind class     | Used for                                      |
| -------------- | ------------------- | ------------------ | --------------------------------------------- |
| **Montserrat** | `--font-montserrat` | `font-montserrat`  | Body text, paragraphs, most UI (the default). |
| **Orbitron**   | `--font-orbitron`   | `font-orbitron`    | Display headings, the techy/branded titles.   |

`body` defaults to Montserrat (set in `globals.css`). Apply `font-orbitron` explicitly on headings where you want the display font.

## Brand color palette

The DCPH brand is built around a **blue → red → yellow gradient**. The exact hex values are used in arbitrary-value classes throughout. There's a bit of drift (two slightly different blues/reds/yellows appear), so here's the reference:

| Role               | Hex(es) used                 | Where you'll see it                                  |
| ------------------ | ---------------------------- | ---------------------------------------------------- |
| Brand blue         | `#0057E0`, `#0061FF`, `#004CC1` | Gradient start, links hover, Purpose card accent.    |
| Brand red          | `#FF3B30`, `#E3332B`         | "Leading Operators" label, gradient mid, Mission accent. |
| Brand yellow       | `#F8CA32`, `#FAB803`         | Gradient end, Vision accent.                         |
| Near-black / dark  | `#333333`, `#292929`, `#222222`, `#2A2A2A`, `#2C2C2C` | Buttons, dark section backgrounds, headings. |
| Medium gray (text) | `#535353`, `#737373`, `#666666`, `#4A5565` | Secondary text, captions.                  |
| Light gray (bg)    | `#F2F2F2`, `#f0f0f0`, `#c9c9c9`, `#D2D2D2` | Section backgrounds, chips, dividers.       |
| Borders            | `#B2B2B2`                    | Card borders.                                        |

The signature gradient appears as both backgrounds and "gradient text":

```tsx
/* gradient background */
className="bg-gradient-to-r from-[#0057E0] via-[#FF3B30] to-[#F8CA32]"

/* gradient TEXT (background clipped to the text) */
className="bg-gradient-to-r from-[#0061FF] via-[#FF3B30] to-[#F8CA32] bg-clip-text text-transparent"
```

> **Tip:** if you're adding a new branded heading, copy a `bg-clip-text text-transparent` gradient class from an existing one (e.g., the hero in `components/Landing_bg.tsx`) so it matches.

## Responsive design

The site is mobile-first and uses Tailwind's standard breakpoints. A class with no prefix applies to all sizes; a prefixed class applies at that width **and up**:

| Prefix | Min width | Typical use here                         |
| ------ | --------- | ---------------------------------------- |
| (none) | 0         | Mobile (base styles).                    |
| `sm:`  | 640px     | Large phones.                            |
| `md:`  | 768px     | Tablets.                                 |
| `lg:`  | 1024px    | Laptops — the desktop nav appears here.  |
| `xl:`  | 1280px    | Desktops.                                |
| `2xl:` | 1536px    | Large desktops.                          |

Example: `text-2xl md:text-4xl lg:text-6xl` = grows from 2xl on mobile, to 4xl on tablets, to 6xl on laptops. When editing layout, test at a few widths (your browser's device toolbar / responsive mode is enough).

## Custom CSS & animations

A small amount of hand-written CSS lives in `app/globals.css` under `@layer utilities`:

| Class                     | Effect                                                                 | Used by                                      |
| ------------------------- | ---------------------------------------------------------------------- | -------------------------------------------- |
| `animate-infinite-scroll` | Continuous horizontal scroll (25s loop) — the operator logo marquee.   | `components/Landing.tsx`                      |
| `animate-pan-lr`          | Slow left-right pan of a background image (20s loop).                  | `app/about/page.tsx` hero (`about_bg.png`).  |
| `.leaflet-container`      | Forces the map's `z-index` to 0 so it sits behind overlays.            | the facility map.                            |
| `.custom-marker`          | Strips default styling from the custom Leaflet markers.                | `FacilityMap.tsx`.                            |

There's also an inline **`<style jsx global>`** block in `app/about/page.tsx` providing the 3D flip-card helpers (`.transform-style-3d`, `.backface-hidden`). That's scoped styling specific to that page's carousel.

> Some animation-style classes like `animate-in slide-in-from-top-4` / `fade-in` / `zoom-in-95` are used on the Why-Philippines and About pages. These come from Tailwind's built-in capabilities in v4 — if one ever stops working after an upgrade, that's the place to check.

## Conventions worth following

- **Match the surrounding code.** When you add markup, copy the class patterns from a nearby similar element so spacing/typography stays consistent.
- **Prefer utility classes** over adding new CSS files; only reach for `globals.css` for genuinely global things (animations, third-party overrides).
- **Keep responsive prefixes in order** (base → `sm:` → `md:` → `lg:`…) for readability.

Next: [Known Issues & Maintenance →](07-known-issues-and-maintenance.md)