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