AI Design
Lab.

You are a senior brand strategist. I'll give you a raw brief. Extract and return:
1. Core brand tension (one sentence: what the brand is navigating between)
2. Three personality adjectives with their opposites (e.g. "Calm / not clinical")
3. One-sentence positioning statement
4. Two visual metaphors with rationale

Be specific, not generic. Reject adjectives like "innovative" and "trusted" unless I've given you evidence for them. Here's the brief: [PASTE BRIEF]

Given this brand brief: [BRIEF], generate a CSS custom properties token hierarchy.

Output structure:
- 6 base colour tokens with semantic names and suggested hex values
- 3 typographic scale steps with sizes and intended use
- 4 spatial tokens (xs, sm, md, lg) with values in rem

Format as valid CSS custom properties inside :root {}. Do not invent values I haven't implied in the brief. Flag any gaps explicitly.

Scaffold a React functional component for [COMPONENT NAME].

Design spec: [DESCRIPTION OF VISUAL BEHAVIOR]
Token constraints: uses --ink, --paper, --accent, --bone, --rule from our CSS custom properties.
Requirements: named export, TypeScript interfaces defined inline, no inline styles, no hardcoded colours or spacing, no magic numbers.

Do not add animation or interaction beyond what I've described. Do not add props I haven't asked for.

You are a design director reviewing work before a client presentation. Critique this design: [DESCRIBE THE DESIGN OR PASTE A SCREENSHOT].

Check for:
- Visual hierarchy (is the reading order clear and intentional?)
- Colour contrast (any accessibility failures?)
- Spacing consistency (does it follow a system or is it arbitrary?)
- Typography (are weight and size decisions doing semantic work?)
- Alignment (is the grid respected?)

Rank issues P1 (blocks shipping), P2 (should fix), P3 (polish). No encouragement. No filler. Just problems and specific fixes.

photorealistic, stock photography, human faces, hands, office environment, 3D render, chrome surfaces, neon glow, lens flare, gradient sphere, generic icons, marketing cliché, mixed typefaces, serif body text, blurry elements, low contrast, watermark, decorative borders, drop shadows on flat elements, perspective distortion, isometric inconsistency