🦄 Unicorn.Land ▸ docs/plans/2026-03-01-design-system-update-design.md
updated 2026-03-01

Unicorn.Land Design System Update

Status: Complete Date: 2026-03-01 Scope: Unicorn.Land as parent brand system Source: 10 Claude design prompts from @Whizz_ai thread

Context

The design system was initially built on 2026-02-24 with foundations (tokens, colors, typography, spacing, shadows, radii) and brand identity (logo, wordmark, badges, social templates). The original filled-in prompts file (UNICORN_LAND_DESIGN_PROMPTS.md) was lost. This plan re-runs the relevant prompts against the existing design system to fill gaps.

What Exists

What’s Missing

Prompts To Run (7 of 10)

Prompt 1: The Design System Architect

Role: Principal Designer at Apple, responsible for HIG Goal: Fill gaps in existing design system — component specs, layout grid, patterns, documentation

Already done: Color system, typography scale, spacing, radii, shadows, dark mode, product themes Still needed: - Layout grid (12-column responsive, breakpoints, gutters, margins) - 30+ component specifications with variants and states - Page templates (landing, dashboard, settings, profile) - Design tokens JSON update with new components - Do’s and Don’ts (10 examples) - Design principles documentation (3 core principles)

Fill-in values: - Brand: Unicorn.Land - Personality: MINIMALIST × BOLD - Primary emotion: CALM (with wry confidence) - Target audience: Builders, makers, independent thinkers

Output: Updated CSS, JSON tokens, Tailwind theme, docs page with component section

Prompt 2: The Brand Identity Creator

Role: Creative Director at Pentagram Goal: Review and validate existing brand identity, fill any gaps

Already done: Full brand identity doc, all visual assets, voice & tone matrix, messaging hierarchy Still needed: - Review existing assets against current live site - Verify logo usage rules are complete - Validate color psychology rationale - Ensure sub-product guidelines are comprehensive

Fill-in values: - Company: Unicorn.Land - Industry: Independent software / tools atelier - Audience: Builders, independent thinkers, people who want to see hidden patterns - Mission: Making the invisible visible - Vision: A world where powerful tools aren’t gatekept - Values: Craft, Clarity, Independence, Warmth, Quiet Conviction - Positioning: Not a startup, not an agency — an atelier

Output: Updated brand identity doc if gaps found, otherwise validate as complete

Prompt 4: The Marketing Asset Factory

Role: Creative Director at top-tier marketing agency Goal: Generate brand-level content templates and copy

Adapted for parent brand (not a product campaign): - Portfolio site copy (hero, about, product descriptions) - Social media content templates (LinkedIn, X, Instagram) - Email templates (welcome, newsletter, product announcement) - “Made in Unicorn.Land” integration copy for sub-products - Brand voice examples across different contexts

Fill-in values: - Product/Service: Unicorn.Land (portfolio of tools) - Campaign objective: AWARENESS - Target audience: Builders, makers, independent thinkers (25-45, tech-adjacent, value craft) - Campaign theme: “Making the invisible visible” - Tone: MINIMAL (dry wit, quiet conviction)

Output: Content templates doc, portfolio site copy ready for implementation

Prompt 6: The Design Critique Partner

Role: Design Director at Apple Goal: Critique the live unicorn.land site against the design system

Input: The live unicorn.land homepage (rainbow gradient, clouds, Silkscreen wordmark, sparkles)

Critique areas: 1. Heuristic evaluation (Nielsen’s 10) 2. Visual hierarchy analysis 3. Typography audit (Silkscreen + Outfit usage) 4. Color analysis (rainbow gradient vs design system opal palette) 5. Usability concerns 6. Strategic alignment (does site reflect brand identity?) 7. Prioritized recommendations 8. Redesign direction (2 alternatives)

Output: Critique doc with actionable recommendations for evolving the homepage

Prompt 7: The Design Trend Synthesizer

Role: Design Researcher at frog design Goal: Refresh trend analysis for 2026

Already done: docs/plans/2026-02-24-design-trends-analysis.md Action: Review existing analysis, update if trends have shifted in the past week. Likely minimal changes needed.

Fill-in values: - Industry/Sector: Independent software tools / craft technology - Year: 2026

Output: Updated trends doc or validation that existing analysis is current

Prompt 8: The Accessibility Auditor

Role: Accessibility Specialist at Apple Goal: Audit design system tokens and live site for WCAG 2.2 AA compliance

Audit targets: 1. Design system color contrast ratios (all opal/stone combinations) 2. Typography minimum sizes and scaling 3. Live site accessibility (keyboard nav, screen reader, focus states) 4. Component specs accessibility requirements 5. Touch target sizes in design system 6. Motion/animation considerations (prefers-reduced-motion)

Output: Accessibility audit report, updated tokens if contrast issues found, remediation recommendations

Prompt 9: The Design-to-Code Translator

Role: Design Engineer at Vercel Goal: Build coded component library from the design system

Tech stack: Vanilla JS Web Components (like the existing footer.js) + CSS using --ul-* tokens

Components to code (priority order): 1. Button (primary, secondary, tertiary, destructive × sizes × states) 2. Card (content card, product card, stat card) 3. Input (text field, textarea, select) 4. Badge (status badge, “Made in Unicorn.Land” badge) 5. Navigation (header, footer — footer already exists) 6. Alert/Toast (success, error, warning, info) 7. Modal/Dialog 8. Toggle/Switch

For each component: - Web Component class (custom element) - CSS using design system tokens - Accessibility attributes (ARIA) - Dark mode support - Product theme support (inherits data-theme) - Usage documentation

Output: design-system/components/ directory with coded components, updated docs page

Prompts Skipped

# Prompt Reason
3 UI/UX Pattern Master App-specific — not relevant for parent brand system
5 Figma Auto-Layout Expert Not using Figma — code-first workflow
10 Presentation Designer Not a current priority for brand system

Execution Order

Run prompts in this order (dependencies flow downward):

  1. Prompt 7 (Trend Synthesizer) — quick review, validates direction
  2. Prompt 2 (Brand Identity) — review existing, validate completeness
  3. Prompt 1 (Design System Architect) — fill component/pattern gaps (LARGEST effort)
  4. Prompt 6 (Design Critique) — critique live site with updated system as reference
  5. Prompt 8 (Accessibility Auditor) — audit everything built so far
  6. Prompt 4 (Marketing Asset Factory) — generate content with validated brand
  7. Prompt 9 (Design-to-Code) — code the components defined in Prompt 1

Prompts 7 and 2 are quick validation passes. Prompt 1 is the heavy lift. Prompts 6 and 8 are review/audit. Prompt 4 generates content. Prompt 9 produces code.

Success Criteria