# GattyWorks Design System

Copy this file into your design tool (v0, Claude, Figma AI, etc.) to generate
on-brand GattyWorks UI.

## Colors

```css
:root {
  --gw-bg: #FFFFFF;
  --gw-ink: #0A0A0A;
  --gw-accent: #00ADB5;
  --gw-accent-deep: #008C92;
  --gw-soft: #FAFAFA;
  --gw-ash: #F4F4F4;
  --gw-ink-soft: rgba(10, 10, 10, 0.72);
  --gw-ink-muted: rgba(10, 10, 10, 0.50);
  --gw-line: rgba(10, 10, 10, 0.08);
  --gw-line-strong: rgba(10, 10, 10, 0.16);
  --gw-brand: #0A0A0A;
  --gw-holo-grad: linear-gradient(115deg, hsla(190, 90%, 60%, 0.55) 0%, hsla(280, 80%, 70%, 0.45) 35%, hsla(35, 90%, 70%, 0.55) 70%, hsla(190, 90%, 60%, 0.55) 100%);
}
```

- Background: `#FFFFFF`. Text: `#0A0A0A`. Accent: `#00ADB5` (teal).
- Light-only. No dark mode.
- One teal accent moment per section max. More dilutes it.
- Cards: `#FAFAFA` with `1px solid rgba(10,10,10,0.08)` border, 24px radius.
- Holographic gradient is for HoloCard shine overlays only — never a flat fill.

## Typography

```css
/* Display — headlines, nav labels, section titles */
font-family: 'Google Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.03em;
line-height: 0.96;

/* Body */
font-family: 'Google Sans', sans-serif;  /* or 'Inter Tight', sans-serif */
font-weight: 400;  /* 500, 600 for emphasis */
letter-spacing: normal;
line-height: 1.55;

/* Mono — kickers, prices, terminal, labels */
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.22em;
```

- Headlines: Google Sans 700, uppercase, tight tracking. Sizes: 40px–84px (clamped).
- Body: Google Sans 400, 16px–19px. Or Inter Tight 400–600 for longer reads.
- Kickers: JetBrains Mono, 11px, uppercase, 0.22em ls. Teal colored.
- Section kicker format: `01 · LABEL` with middle-dot separator.

## Spacing

```css
/* 4pt scale. Most used values: */
--s-8: 8px;
--s-16: 16px;
--s-24: 24px;
--s-32: 32px;
```

- Every gap is a multiple of 4px: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
- Primary rhythm: 8 / 16 / 24 / 32.
- Section vertical padding: 56px desktop, 36px mobile.
- Max content width: 1440px, centered with `mx-auto`.

## Layout

```css
.gw-section { /* vertical section padding */ }
.gw-wrap { max-width: 1440px; margin: 0 auto; }
.gw-pill { border-radius: 9999px; }
```

- Section layout: full-bleed background, `.gw-wrap` inside for content.
- Floating header: 48px tall pill (`border-radius: 9999px`), sticky top.
- Cards: 24px border radius, `.gw-soft` background, hairline border.
- SVG noise grain overlay on every section (`.gw-grain`).

## Buttons

```css
/* Primary CTA */
.gw-btn-primary {
  background: #00ADB5;
  color: #FFFFFF;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  border-radius: 9999px;
  box-shadow: 0 0 24px rgba(0, 173, 181, 0.35); /* teal glow */
}

/* Ghost / outline */
.gw-btn-ghost {
  background: transparent;
  border: 1px solid rgba(10, 10, 10, 0.16);
  color: #0A0A0A;
  border-radius: 9999px;
}

/* Oversized CTA (hero) */
.gw-btn-cta {
  background: #0A0A0A;
  color: #FFFFFF;
  font-size: 18px;
  padding: 18px 48px;
  border-radius: 9999px;
}
```

## Logo

The GW monogram uses path data extracted from Google Sans 700 glyphs.
Available as SVG/PNG in 4 shapes:

| Shape | Styles | Path |
|---|---|---|
| Icon (256×256) | light, dark | `/brand/gw-icon-{style}.svg` |
| Square (512×512) | light, dark, teal | `/brand/gw-square-{style}.svg` |
| LinkedIn (1584×396) | light, dark, teal | `/brand/gw-linkedin-{style}.svg` |
| Banner (1920×1080) | light, dark, teal, mesh, halftone, grid, cutmat-light, cutmat-dark, cutmat-teal | `/brand/gw-banner-{style}.svg` |

## Voice

- Confident, no-fluff, lightly punchy.
- Vocabulary: build, ship, deploy, engineer, quote.
- No em-dashes (—) or en-dashes (–). Use periods or " - ".
- No emojis. Middle-dots (·) are fine in kickers only.
- AI agents are team members in copy, never framed as tools.
- The guarantee: "every brief gets a written reply within 24 hours."
- Rejected vocabulary: retainers, engagements, let's hop on a call, transform your business, synergy, world-class.