# 11 · Implementation · For Developers

Copy-paste-ready code for engineering. CSS, SCSS, JSON tokens, Tailwind config, React tokens.

## CSS variables (drop into globals.css)

```css
:root {
  /* Foundation */
  --color-dark: #1E1B2E;
  --color-depth: #2A2640;
  --color-canvas: #FAFAFA;
  --color-white: #FFFFFF;

  /* Signal · Module colors */
  --color-blueprint: #2E61E1;
  --color-scout: #7D3CED;
  --color-reach: #BF27D2;
  --color-meet: #EB77FF;

  /* Support */
  --color-soft: #E9D5FF;
  --color-neutral: #A1A1AA;
  --color-gray: #6B7280;
  --color-rule: #E5E5EA;

  /* Typography */
  --font-display: "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
}
```

## Tailwind v4 (CSS-first config)

Add to `globals.css` after `@import "tailwindcss";`:

```css
@theme inline {
  --color-dark: #1E1B2E;
  --color-depth: #2A2640;
  --color-canvas: #FAFAFA;
  --color-white: #FFFFFF;
  --color-blueprint: #2E61E1;
  --color-scout: #7D3CED;
  --color-reach: #BF27D2;
  --color-meet: #EB77FF;
  --color-soft: #E9D5FF;
  --color-neutral: #A1A1AA;
  --color-gray: #6B7280;
  --color-rule: #E5E5EA;

  --font-display: "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
}
```

Use as:
```html
<div class="bg-dark text-meet font-display">…</div>
```

## Tailwind v3 (JavaScript config)

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        dark: "#1E1B2E",
        depth: "#2A2640",
        canvas: "#FAFAFA",
        blueprint: "#2E61E1",
        scout: "#7D3CED",
        reach: "#BF27D2",
        meet: "#EB77FF",
        soft: "#E9D5FF",
        neutral: "#A1A1AA",
        gray: "#6B7280",
        rule: "#E5E5EA",
      },
      fontFamily: {
        display: ['"Neue Haas Display"', "Helvetica Neue", "Arial", "sans-serif"],
        body: ['"Manrope"', "Helvetica Neue", "Arial", "sans-serif"],
      },
    },
  },
};
```

## SCSS variables

```scss
// _tokens.scss
$color-dark: #1E1B2E;
$color-depth: #2A2640;
$color-canvas: #FAFAFA;
$color-blueprint: #2E61E1;
$color-scout: #7D3CED;
$color-reach: #BF27D2;
$color-meet: #EB77FF;
$color-soft: #E9D5FF;
$color-neutral: #A1A1AA;
$color-gray: #6B7280;
$color-rule: #E5E5EA;

$font-display: "Neue Haas Display", "Helvetica Neue", Arial, sans-serif;
$font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
```

## Font loading · @font-face

```css
@font-face { font-family: "Neue Haas Display"; src: url("/fonts/NeueHaasDisplayLight.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("/fonts/NeueHaasDisplayRoman.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("/fonts/NeueHaasDisplayMediu.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("/fonts/NeueHaasDisplayBold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Neue Haas Display"; src: url("/fonts/NeueHaasDisplayBlack.ttf") format("truetype"); font-weight: 900; font-display: swap; }
```

Plus Manrope via Google Fonts:
```html
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
```

## React · Brand tokens module

```ts
// lib/brand-tokens.ts
export const brandTokens = {
  colors: {
    foundation: {
      dark: "#1E1B2E",
      depth: "#2A2640",
      canvas: "#FAFAFA",
      white: "#FFFFFF",
    },
    signal: {
      blueprint: "#2E61E1",
      scout: "#7D3CED",
      reach: "#BF27D2",
      meet: "#EB77FF",
    },
    support: {
      soft: "#E9D5FF",
      neutral: "#A1A1AA",
      gray: "#6B7280",
      rule: "#E5E5EA",
    },
  },
  fonts: {
    display: '"Neue Haas Display", "Helvetica Neue", Arial, sans-serif',
    body: '"Manrope", "Helvetica Neue", Arial, sans-serif',
  },
  modules: [
    { id: "blueprint", num: "01", name: "Blueprint", color: "#2E61E1", role: "Direction" },
    { id: "scout", num: "02", name: "Scout", color: "#7D3CED", role: "Intelligence" },
    { id: "reach", num: "03", name: "Reach", color: "#BF27D2", role: "Activity" },
    { id: "meet", num: "04", name: "Meet", color: "#EB77FF", role: "Human" },
  ],
} as const;
```

## Logo usage in HTML

```html
<!-- Light background -->
<img src="/assets/logos/Horizontal - Color-Dark.svg" alt="talentix" />

<!-- Dark background -->
<img src="/assets/logos/Horizontal - Color-White.svg" alt="talentix" />

<!-- Signal color background -->
<img src="/assets/logos/Horizontal - White.svg" alt="talentix" />

<!-- Pink background -->
<img src="/assets/logos/Horizontal - Black.svg" alt="talentix" />
```

## Favicon setup

```html
<link rel="icon" type="image/svg+xml" href="/favicons/Favicon - Color-Dark.svg" />
<link rel="alternate icon" type="image/png" href="/favicons/favicon-32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
```

## Component patterns (React + Tailwind)

```tsx
// Brand button
<button className="px-6 py-3 bg-meet text-dark rounded-full font-medium hover:bg-meet/90 transition-colors">
  Start with the story
</button>

// Section eyebrow
<p className="text-xs uppercase tracking-[0.3em] text-meet">Section 01</p>

// Hero headline
<h1 className="font-display font-black text-7xl tracking-tight leading-[0.92]">
  Built to hire <span className="text-gradient">with you.</span>
</h1>

// Gradient text utility
.text-gradient {
  background: linear-gradient(90deg, #2E61E1, #7D3CED, #BF27D2, #EB77FF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

// Module-colored card
<div className="rounded-2xl border border-white/10 bg-depth p-7">
  <div className="absolute inset-x-0 top-0 h-1 bg-blueprint" />
  …
</div>
```

## Spacing tokens (rem-based)

```css
:root {
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-8: 3rem;     /* 48px */
  --space-10: 4rem;    /* 64px */
  --space-12: 6rem;    /* 96px */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --radius-full: 9999px;
}
```

## Don'ts for code

- Don't hardcode hex values — always reference tokens
- Don't use signal colors for non-module surfaces
- Don't override font-display with system font for performance (use `font-display: swap`)
- Don't strip the gradient from "We match. You hire." — it's brand-signature
- Don't translate module names in i18n strings — they are proper nouns
- Don't add em-dashes (—) in any user-facing copy