# DESIGN.md — Strike9

## 1. Brand essence
- Loud discipline: high-impact, never sloppy.
- Night-market grit: built for concrete, queues, clubs, and cold sidewalks.
- Sharp confidence: graphic, direct, and cut with intent.

Tagline: Built loud. Cut for the street.

## 2. Colour tokens

### Light mode
```css
:root {
  --bg: #FDFDFD;
  --surface: #FDFDFD;
  --surface-2: #F3F2F2;
  --text: #141213;
  --text-2: #341124;
  --muted: #6E686B;
  --border: #E2DFE0;
  --primary: #4D0D2E;
  --primary-ink: #FDFDFD;
  --accent: #660A3A;
  --accent-2: #280F1C;
}
```

Usage notes:
- `--bg`: main page background; keep clean to let product and graphics hit harder.
- `--surface`: default card, nav, drawer, and modal fill.
- `--surface-2`: raised panels, table rows, form fills, and soft section breaks.
- `--text`: primary copy and high-priority interface text.
- `--text-2`: subheads, metadata, and editorial text with a brand tint.
- `--muted`: helper copy, timestamps, placeholders, and low-emphasis UI.
- `--border`: dividers, input borders, card outlines, and quiet separators.
- `--primary`: main action colour for CTAs, badges, and key highlights.
- `--primary-ink`: text and icons placed on primary fills.
- `--accent`: drop alerts, campaign moments, sale flags, and energetic highlights.
- `--accent-2`: deep graphic blocks, hover depth, and tonal layering.

### Dark mode
```css
[data-theme='dark'] {
  --bg: #141213;
  --surface: #280F1C;
  --surface-2: #341124;
  --text: #FDFDFD;
  --text-2: #E2DFE0;
  --muted: #A69FA2;
  --border: #4D0D2E;
  --primary: #660A3A;
  --primary-ink: #FDFDFD;
  --accent: #4D0D2E;
  --accent-2: #341124;
}
```

Usage notes:
- `--bg`: night-mode foundation for lookbooks, drops, and product grids.
- `--surface`: main card and panel colour; keeps the palette rich, not flat black.
- `--surface-2`: deeper stacked panels, accordions, and expanded states.
- `--text`: primary readable type on dark backgrounds.
- `--text-2`: secondary copy and body-supporting information.
- `--muted`: quiet UI copy without losing legibility.
- `--border`: visible separators and control outlines on dark surfaces.
- `--primary`: dominant CTA fill for dark pages.
- `--primary-ink`: CTA text on primary fills.
- `--accent`: secondary highlight, active states, labels, and graphic hits.
- `--accent-2`: subtle dark tonal blocks and background depth.

## 3. Typography
Google Fonts pairing:
- Headings: Archivo Black, weight 400.
- Body: Space Grotesk, weights 400, 500, 600, 700.

Type scale:

| Level | Size / line-height | Family | Weight | Use |
|---|---:|---|---:|---|
| Display | 56 / 1.05 | Archivo Black | 400 | Drop pages, campaign heroes, oversized product statements. |
| H1 | 40 / 1.1 | Archivo Black | 400 | Page titles and collection names. |
| H2 | 30 / 1.15 | Archivo Black | 400 | Section headers and editorial blocks. |
| H3 | 22 / 1.25 | Archivo Black | 400 | Card titles, feature titles, FAQ groups. |
| Lead | 19 / 1.55 | Space Grotesk | 500 | Hero subheads and intro copy. |
| Body | 16 / 1.6 | Space Grotesk | 400 | Product descriptions, articles, support copy. |
| Small | 14 / 1.5 | Space Grotesk | 400 | Helper text, compact UI, card metadata. |
| Caption | 12.5 / 1.4 | Space Grotesk | 500 | Labels, footnotes, legal, shipping notes. |
| Eyebrow | 12 uppercase tracked | Space Grotesk | 700 | Drop tags, category labels, nav markers. Use 0.12em tracking. |
| Button | 15 / 1 | Space Grotesk | 700 | CTAs and commerce controls. |
| Code | 13.5 / 1.45 | ui-monospace | 500 | Order numbers, discount codes, technical snippets. |

## 4. Spacing and layout
Spacing scale is 8-based with one tight exception:
- 4px: micro gaps, icon nudges, focus offset.
- 8px: compact internal spacing.
- 12px: button gaps, form rhythm.
- 16px: default component padding.
- 24px: card padding and section internals.
- 32px: grid gaps and stacked content.
- 48px: small section spacing.
- 64px: standard page-section spacing.
- 96px: hero and campaign spacing.

Layout:
- Max container width: 1120px.
- Page gutter: 16px mobile, 24px tablet, 32px desktop.
- Product grids: 2 columns mobile where possible, 3 tablet, 4 desktop.
- Keep compositions tight, blocky, and asymmetric when campaigns need energy.

Radius scale:
- 6px: inputs, tags, compact controls.
- 10px: buttons and small cards.
- 14px: base brand radius.
- 20px: large cards, banners, modals.
- full: pills, avatars, circular icon buttons.

Elevation:
- Level 1: `0 1px 2px rgba(20, 18, 19, 0.08)` for subtle cards.
- Level 2: `0 8px 20px rgba(20, 18, 19, 0.12)` for dropdowns.
- Level 3: `0 16px 36px rgba(20, 18, 19, 0.18)` for modals and sticky commerce.
- Level 4: `0 24px 64px rgba(20, 18, 19, 0.28)` for campaign overlays.

## 5. Buttons
General:
- Use Space Grotesk 700, 15px / 1, slight letter spacing of 0.01em.
- Radius: 10px default.
- Include icon spacing of 8px.
- Transitions: background, border, color, transform, and box-shadow.

Variants:
- Primary: background `--primary`, text `--primary-ink`, border `--primary`. Use for Buy now, Join the drop, and Checkout.
- Secondary: background `--accent-2`, text `#FDFDFD`, border `--accent-2`. Use for strong secondary commerce actions.
- Outline: transparent background, text `--primary`, border `--primary`. Use for size guides, wishlists, and secondary nav.
- Ghost: transparent background, text `--text`, no border. Use inside navs, tables, and cards.

Sizes:
- Small: 36px height, 12px horizontal padding, 14px type.
- Medium: 44px height, 16px horizontal padding, 15px type.
- Large: 52px height, 22px horizontal padding, 15px type.

States:
- Hover: lift by -1px, deepen fill to `--accent` for primary or add `--surface-2` for ghost.
- Active: return to 0px lift and use a tighter shadow.
- Disabled: 45% opacity, no transform, cursor not-allowed, keep label readable.
- Loading: preserve button width and show a small monochrome spinner.

## 6. Cards
Base card:
- Fill `--surface`, border `1px solid --border`, radius 14px, padding 24px.
- Use Level 1 elevation on light mode; use border-first styling in dark mode.

Feature card:
- Add a bold H3, short body copy, and one graphic mark or icon.
- Use `--surface-2` for quieter features and `--accent-2` for louder campaign moments.
- Keep copy under 18 words where possible.

Pricing card:
- Structure: plan name, price, short promise, feature list, CTA.
- Default card uses `--surface` and `--text`.
- Featured dark variant uses `--accent-2` fill, `#FDFDFD` text, `--accent` badge, and primary CTA.
- Place the featured card slightly higher or wider, not with unrelated colours.

Testimonial / quote card:
- Use large quote text in Space Grotesk 500 or H3 styling.
- Add source name, role, and optional city.
- Use `--surface-2` with a left border in `--accent`.

Promo banner:
- Use `--primary` or `--accent` fill with `--primary-ink` text.
- Keep one message, one CTA, and one proof point.
- Good examples: New drop live, Heavyweight fleece, Free shipping threshold.

## 7. Forms
Labels:
- Space Grotesk 600, 14px, `--text`.
- Place labels above fields with 8px gap.

Inputs, selects, textareas:
- Height: 44px for inputs/selects; textarea minimum 120px.
- Padding: 12px 14px.
- Radius: 6px.
- Background: `--surface` or `--surface-2` for dense areas.
- Border: `1px solid --border`.
- Text: `--text`; placeholder: `--muted`.

Focus:
- Border changes to `--accent`.
- Focus ring: `0 0 0 3px rgba(102, 10, 58, 0.22)`.
- Never remove focus styling for keyboard users.

Error:
- Use `--accent` for error border and message.
- Error message: 14px, Space Grotesk 500, placed 6px below field.
- Keep copy direct: Choose a size before checkout.

## 8. Voice and copy
Writing rules:
- Say it like a drop announcement: short, sharp, high-energy.
- Keep confidence earned: describe fit, fabric, and function without fake hype.
- Use street cues with restraint: night, concrete, queue, block, drop, rotation.

Example headlines:
- Gear Up. Strike After Dark.
- Heavy Fits For Loud Nights.

Example product copy:
- Boxy heavyweight tee with a clean drape and deep berry-black print.
- Built for the queue, the train, and the last stop home.

FAQ:
- When is the next drop? Drops land without filler. Join the list and catch the first signal.
- How does Strike9 fit? Most pieces run boxy with street-ready room. Check each product page for exact measurements.
- Do you restock sold-out pieces? Sometimes. Core colours may return; limited graphics usually stay gone.
- How should I wash it? Cold wash, inside out. Hang dry to keep the print sharp.

## 9. Motion
Easing:
- Standard: `cubic-bezier(0.2, 0, 0, 1)` for most UI movement.
- Punch: `cubic-bezier(0.16, 1, 0.3, 1)` for drawers, banners, and drop reveals.
- Exit: `cubic-bezier(0.7, 0, 0.84, 0)` for dismissals.

Durations:
- 80ms: pressed states and micro feedback.
- 140ms: hover transitions.
- 200ms: menus, accordions, filters.
- 320ms: modals, drawers, image reveals.
- 480ms: campaign hero entrances only.

Motion rules:
- Movement should feel quick and heavy, not floaty.
- Use small vertical shifts: 1–4px for controls, 8–16px for panels.
- Respect reduced-motion preferences with opacity-only transitions.

## 10. Accessibility
- Body text should meet WCAG AA contrast: 4.5:1 minimum.
- Large display text should meet at least 3:1, but aim higher for commerce clarity.
- Do not place muted text over saturated fills unless contrast is verified.
- Interactive targets should be at least 44px tall or wide.
- Focus-visible rule: show a 3px ring using `--accent` or `rgba(102, 10, 58, 0.28)` with 2px offset.
- Never communicate errors, sale status, or selection with colour alone; add text or icons.

## 11. Logo usage
Minimum size:
- Digital: 96px wide for the full logo.
- Small placements: use a simplified mark only if available; never crush the wordmark below legibility.
- Print: 28mm wide minimum.

Clear space:
- Maintain clear space equal to the height of the 9 around all sides of the logo.
- Keep the logo away from busy product photography unless placed on a solid panel.

Do / do not:
- Do use the logo in `#141213`, `#FDFDFD`, `#4D0D2E`, or `#660A3A` depending on contrast.
- Do place the logo on clean light, dark, or tonal berry backgrounds from the palette.
- Do keep proportions locked and edges sharp.
- Do not add new hues, gradients from outside the palette, glows, bevels, or chrome effects.
- Do not stretch, rotate, outline, texture, or place the logo over low-contrast imagery.
- Do not pair the logo with soft lifestyle styling that weakens the loud streetwear stance.

## 12. Final Do / Don’t table
| Do | Don’t |
|---|---|
| Use berry-black saturation for CTAs and campaign moments. | Introduce greens, blues, yellows, or unrelated hype colours. |
| Keep copy short, direct, and drop-ready. | Write soft lifestyle paragraphs with no point of view. |
| Let product photography and type carry the energy. | Overload layouts with effects, stickers, and random graphics. |
| Use strong contrast on every button and form state. | Hide key commerce actions in muted styling. |
| Build layouts with tight grids, bold scale, and clean negative space. | Make everything chaotic just because the vibe is loud. |