# worawork.vercel.app — Design System

## 1. Visual Theme & Atmosphere

Brutalist portfolio using Times New Roman as a deliberate provocation. Anti-design in aesthetic — the rawness is the brand. Absence of system chrome, gradients, or decoration is the statement.

**Mood:** brutalist, anti-design, editorial, raw

The visual language is deliberately anti-trend — using a default serif as a bold design statement. Colors are applied directly without a formal token layer — values are contextual rather than systematic.

---

## 2. Color Palette & Roles

**Palette philosophy:** Achromatic by design. Color would undercut the rawness.

---

## 3. Typography Rules

- **body**: Times / 16px / wt 400
- **button**: Arial / 40px / wt 400 / lh 40px

**Custom typefaces:** None — system font stack only

**Typography philosophy:** The serif is the statement — it refuses the expected grotesque of the tech industry. It reads as confidence, not carelessness.

---

## 4. Component Stylings

**Border radius:** No border-radius — sharp edges throughout.

**Shadows:** Shadows are absent — depth through color and spacing alone.

- Component data limited — apply global radius and color rules consistently.

---

## 5. Layout Principles

**Layout philosophy:** No grid, no columns — linear stacking is the structure. Whitespace is generous and uneven by design.

Spacing cadence: Direct pixel values — consistent multiples of 4px or 8px observed in component padding.

---

## 6. Depth & Elevation

**Flat design** — no box shadows. Depth communicates through:
- Background color contrast between sections
- Border lines as separators
- Typography weight shifts
- Proximity and whitespace

This is an intentional choice: shadows would add visual noise to a carefully restrained palette.

---

## 7. Do's and Don'ts

**Do:**
- Embrace the raw, unpolished feel — resist the urge to "improve" it with modern UI conventions
- Keep the system font stack — it is the aesthetic, not a placeholder
- Keep all edges sharp — border-radius destroys the visual discipline
- Keep elevation flat — adding shadows would contradict the design language

**Don't:**
- Apply dark mode as an afterthought — it requires its own color decisions
- Use accent colors for decoration — there are none, and that is deliberate
- Mix more than two typeface families — typographic chaos undermines brand clarity
- Add gradient backgrounds unless they exist in the design system
- Use stock UI component defaults (e.g., Bootstrap/MUI) without full restyling

---

## 8. Responsive Behavior

**Headline scale:**
- Desktop: ~48px
- Suggest mobile: ~28px–32px

**Body text:** 16px — standard; consider 15px on mobile for comfort

**Layout breakpoints:** Single-column — no grid breakpoints needed; the simplicity is self-responsive.

**Navigation:** Apply standard mobile nav pattern: fixed header, collapsible menu.

---

## 9. Agent Prompt Guide

When asked to create UI in the style of **worawork.vercel.app**, instruct the agent:

```
Design in the style of worawork.vercel.app: brutalist, anti-design, editorial, raw.
Use white background, black text, Times New Roman or serif font. No decorative elements.
Primary typeface: system-ui, body: Times.
Sharp corners on all elements — no border-radius.
No shadows — flat design.
Strictly monochrome — no accent colors.
Generous whitespace. Content is the hero.
Avoid: generic card components, gradient backgrounds, icon-heavy layouts, rounded pill buttons.
```

**Key design signals to reference:**
- System font stack — no web font loading needed
- Shadow-free — use border or background contrast for separation
- Zero border-radius — rectangular everything
- Color temperature: Achromatic

---

*Generated by Sparkbites — extracted from live CSS analysis*