# DESIGN.md — Textured Expressive
**Style:** Textured Expressive  
**Use case:** Creative portfolios, agency sites, personal brands, studios  
**By:** Zero to UI (02UI) — designmd.info

---

## Overview

This system is for products and people with a strong point of view. The signature is texture — a subtle noise overlay on the hero background that makes the screen feel physical, like something you could almost touch. The base palette is warm, high-contrast, and unapologetic: deep orange against near-black. As the user scrolls, the interface opens into white space before returning to dark, creating a rhythm between high-impact and calm. Typography is heavy, oversized, and takes up room on purpose. Hover states are interactive moments, not just visual states. The whole thing feels handmade, but with craft.

> **02UI Rationale:** Perfect is generic now. AI can produce perfect. What it cannot produce is intentional imperfection — texture that has been chosen, not generated.

---

## Colors

| Role | Token | Hex | Usage |
|---|---|---|---|
| Brand orange | `--color-brand` | `#E84D1C` | Hero background, accents, hover states |
| Brand orange warm | `--color-brand-warm` | `#F05A25` | Gradient top of hero |
| Black | `--color-black` | `#0D0D0D` | Mid and lower sections, footers |
| Off-white | `--color-white` | `#F5F0EB` | Clean content sections, cards |
| Pure white | `--color-white-pure` | `#FFFFFF` | Typography on dark backgrounds |
| Muted | `--color-muted` | `#999999` | Secondary text on white sections |
| Dark text | `--color-text-dark` | `#111111` | Body text on off-white |
| Overlay dark | `--color-overlay` | `rgba(13,13,13,0.45)` | Over hero image/video for text contrast |

### Noise texture
The hero background is not flat orange. It is `--color-brand` with a noise texture overlay:
- Noise opacity: `0.12–0.18`
- Noise type: fine grain (SVG or CSS `filter: url(#noise)`)
- Vertical gradient on top: hero shifts from `--color-brand-warm` (top) to `--color-brand` (bottom)

> **02UI Rationale:** The noise is not a trend. It is the difference between a colour and a surface. One feels flat. The other has weight.

---

## Typography

Two typefaces in deliberate contrast.

**Display / Hero**
- Font: `Bebas Neue`, `Anton`, or condensed grotesque
- Weight: 700–900
- Size: 96px–180px (fills horizontal space — responsive to viewport)
- Line height: 0.88–0.95
- Letter spacing: -0.01em
- Colour: `--color-text-dark` (black on orange — not white, this is the unexpected choice that makes it work)
- Case: ALL CAPS

**Headline (content sections)**
- Font: same display face
- Weight: 700
- Size: 48px–80px
- Colour: `--color-white-pure` (on dark) or `--color-text-dark` (on light)

**Body**
- Font: `Inter`, `Neue Haas Grotesk`, or clean grotesque
- Weight: 400
- Size: 15px–17px
- Line height: 1.65
- Colour: `--color-muted` on white sections, `rgba(245,240,235,0.7)` on dark

**Stats / Callout numbers**
- Font: display face
- Size: 56px–96px
- Weight: 700
- Used for: years of experience, number of clients, projects completed — single number per callout

**Footer / Oversized branding**
- Display font at maximum size — full-width, textured background
- Usage: Footer logo treatment, chapter closers

> **02UI Rationale:** Black type on an orange background. Every instinct says use white. The correct instinct wins, and it is not the obvious one.

---

## Elevation

This system uses **layered depth through video, texture, and overlay**, not traditional shadows or borders.

| Level | Method | Usage |
|---|---|---|
| 0 — Surface | Textured flat background | Hero, footer |
| 1 — Content | Clean flat background (white or black) | Content sections, text-heavy areas |
| 2 — Media | Image or video at full bleed, overlay on top | Portfolio pieces, case study heroes |
| 3 — Cursor-follow | Element that moves with cursor | Video preview on hover — follows cursor position |

Shadows are used only where elements must float:
- Modals: `0 24px 64px rgba(0,0,0,0.6)`
- Cursor-follow elements: `0 8px 32px rgba(0,0,0,0.4)`

> **02UI Rationale:** When a video follows your cursor, you stop being a viewer. You start interacting. That is the moment a portfolio becomes an experience.

---

## Components

### Navigation

- Position: fixed top
- Background: transparent always — never fills in, no blur
- Logo: top-left, small wordmark or monogram
- CTA: top-right, text only with arrow — no button shape
- Hamburger: minimal, top-right, opens full-screen overlay menu
- Colour adapts to section: white on orange/dark sections, dark on white sections

### Full-screen menu overlay
- Background: `--color-brand` with noise texture
- Navigation links: display font, massive — 64px+
- Closes on click or escape
- Animation: slide in from top, 400ms ease

### Buttons

| Variant | Background | Text | Border |
|---|---|---|---|
| Primary (on orange) | `--color-black` | `--color-white-pure` | none |
| Primary (on dark) | `--color-brand` | `--color-text-dark` | none |
| Outline | transparent | current section text | `1px solid` current section text |
| Arrow text | transparent | current section text | none — just text + `→` |

- Border radius: `4px` (slightly rounded, not pill — the sharpness is intentional)
- Padding: `14px 24px`
- Hover: orange texture fill appears on outline buttons — same noise treatment as hero

### Portfolio / Work cards

- Full bleed image or video
- On hover: cursor-follow video preview appears, image slightly scales `1.02`
- Overlay text on hover: white, display font, bottom-aligned
- No card border, no border radius — edge to edge
- Grid: 2 columns on desktop, 1 on mobile

### Large quote / Statement block
- Full viewport height section
- Single sentence or short paragraph
- Display font, 56px–96px
- Requires scrolling to read the full quote — this is intentional, not a mistake
- Background: `--color-black` or `--color-white` alternating

### Stats row
- 3–4 stats side by side
- Number: display font, large (64px+)
- Label: body font, 13px, muted
- Separator: `1px solid rgba(255,255,255,0.15)` between items

---

## Do's and Don'ts

**Do:**
- Use the noise texture only on the brand orange surfaces. On white and black sections, surfaces stay clean.
- Let the oversized quote require the user to scroll to finish reading it. The effort creates investment.
- Keep the cursor-follow video effect subtle — it should surprise on first encounter, not assault.
- Apply the vertical gradient on the hero so the top reads as slightly warmer orange — this stops the hero from looking flat even with the noise.
- Use black text on the orange hero — it is the counterintuitive choice that makes the design feel considered.

**Don't:**
- Apply noise texture to every section. It becomes meaningless the more it is repeated.
- Use the display font for body copy. The contrast between massive display type and small body text is intentional — it creates hierarchy.
- Add heavy drop shadows to cards or images. The work should speak for itself — shadows say "I don't trust the work to hold attention on its own."
- Use this system for a product UI or dashboard. It is for brands and people, not for software.
- Over-populate the grid. White space is expensive here. That is the point. Fewer items, more presence.

---

*Free to use, adapt, and share. More files at designmd.info — by Zero to UI.*