Build a
DESIGN.md.

# DESIGN.md

> A machine-readable design identity for Hadogen.
> Built on the [getdesign.md](https://getdesign.md/) spec — drop this file into your repo so coding agents can build matching UI.

## 1 · Brand at a glance

| | |
|---|---|
| **Brand name** | Hadogen |
| **One-line description** | A creator's arcade for AI image, video, and audio. |
| **Audience** | Creators, marketing teams, indie filmmakers shipping commercial work. |
| **Tone** | precise, playful, generous |
| **Anti-tone** | corporate, ironic, cold |
| **Reference brands** | Linear, Figma, Notion |

---

## 2 · Visual identity

### Background

- **Default surface**: `#06060f` — page canvas, full-bleed.

### Foreground

- **Primary text**: `#f4f5fb`.
- **Secondary text**: `#f4f5fb` at 70% opacity.
- **Tertiary / disabled text**: `#f4f5fb` at 45% opacity.

### Highlight color

Pick **one** highlight color. Use it sparingly — for buttons, focus rings, brand glow, status indicators. Avoid using more than one accent hue.

- **Highlight**: `#37e6ff` — primary CTAs, active-state underlines, focus rings only.

### Borders & dividers

- **Default rule**: `#f4f5fb` at 16% opacity, 1px hairline.
- **Strong rule (section breaks)**: `#f4f5fb` at 32% opacity.
- No double borders. No drop shadows. No backdrop-blur.

---

## 3 · Typography

| Role | Family | Weight | Size scale | Notes |
|---|---|---|---|---|
| Display headline | Bungee | 700 | 44 / 64 / 80 px | Hero only — once per page max. |
| Section headline | Bungee | 600 | 28 / 36 / 52 px | One per section. |
| Body | DM Sans | 400 / 500 | 14 / 16 / 18 px | Line-height 1.6. |
| Label / overline | Space Mono | 400 | 10 / 11 px | All-caps, tracking 0.24em. |
| Code / data | Space Mono | 400 | 12 / 14 px | Tabular numerals on. |

**Type rules:**
- Headlines reserve color for one accent word per heading.
- Body copy is always primary text color — never the highlight.
- All-caps is reserved for labels under 12px.

---

## 4 · Spatial system

- **Base unit**: 4px. All spacing snaps to multiples of 4.
- **Section padding**: 64 / 96 / 128 px (mobile / tablet / desktop).
- **Container max-width**: 1480 px.
- **Grid**: 12-column desktop, 4-column mobile, 24px gutter.
- **Radius**: 2px — sharp corners.

---

## 5 · Components

### Buttons

- **Primary**: solid highlight, 12 / 18 px padding, 13px label, 0.06em tracking.
- **Ghost**: 1px border at 22% foreground, no fill. Hover swaps border to highlight.

### Chips / tags

- Flat. 1px border at 32% highlight. Background = secondary surface. Mono label, 10px, uppercase, tracking 0.18em.

### Cards

- 1px hairline border at 20% highlight. No shadow. Hover: border to 60% highlight.

### Inputs

- 1px border, transparent background, 14px label. Focus: border to highlight.

---

## 6 · Imagery & motion

- **Imagery direction**: Atmospheric portraits with deep blue cast, high contrast, 4/5 aspect.
- **Aspect ratios**: 4/5 (portraits), 16/9 (wide), 3/4 (thumbs), 1/1 (avatars).
- **Motion**: reserved for state transitions (hover, focus, route change). No infinite loops. Respect `prefers-reduced-motion`.

---

## 7 · Voice

Short sentences. Concrete verbs. Tabular numerals on. Em-dashes for parentheticals.

---

## 8 · Don'ts

- No more than one highlight color per surface.
- No mixing display fonts. One display family, one body family.
- No backdrop-blur, no neumorphism, no soft drop-shadows.

---

*Generated via Hadogen Agentic Studio · [getdesign.md](https://getdesign.md/) format.*