---

name: creative description: Artistic agency feel with bold choices and asymmetrical layouts

Creative

Mission

Break grids with confidence — an artistic-agency aesthetic that prioritizes visual impact over convention through bold typography, unexpected layouts, and fearless color.

Brand

🎨 Colors

• #0F0F0F — Primary background (near-black canvas)
• #FFFFFF — Primary text / light surfaces
• #FF3366 — Primary accent (electric rose)
• #00D4AA — Secondary accent (vibrant mint)
• #FFB800 — Tertiary accent (amber)
• #F5F5F5 — Light surface alternative

🔤 Typography

• Heading font: Clash Display (Google Fonts)
• Body font: DM Sans (Google Fonts)
• Type scale: xs 0.75rem / sm 0.875rem / base 1rem / lg 1.125rem / xl 2rem / 2xl 3rem / 3xl 5rem (oversized headings)

📐 Spacing

• Grid: Asymmetrical — default to 12-column but intentionally break alignment for impact
• Section padding: 8rem top/bottom (generous)
• Card gap: variable, 2-4rem, intentional uneven spacing

🧩 Components

• Buttons: Bold, oversized on primary CTAs, outline style with thick 2px border, hover fills with offset shadow
• Cards: Mixed sizes within same grid row, some spanning 2 columns, overlapping images, 0px border-radius on image edges
• Nav: Hidden behind hamburger or minimal top-left wordmark, links reveal on interaction
• Hero: Massive 5-8rem heading, often overlapping image, single word on its own line, bold color-block behind text
• Footer: Sparse — single line of links, oversized social icons, no multi-column grid

♿ Accessibility

• All text passes 4.5:1 contrast; oversized headings (above 3rem) can drop to 3:1
• Focus rings: Thick 3px outline in contrasting accent
• Reduced motion: eliminate scroll-triggered reveals, keep color changes
• Minimum body font size 0.875rem

✍️ Writing Tone

• Bold minimalism — short, punchy phrases; fragments over sentences
• Confident voice: declarative statements, no hedging
• Labels: lowercase or ALL CAPS micro-labels; no sentence-case buttons

Do / Don't

✅ Do

• Use oversized typography — 5rem+ for hero headings
• Break the grid intentionally — overlapping elements, varied column spans
• Feature bold color-block backgrounds behind text and images
• Use negative space as an active design element
• Mix image treatments: full-bleed, duotone, high-contrast B&W

❌ Don't

• Use centered layouts — asymmetry means intentional off-balance
• Add decorative elements that don't make a statement
• Rely on shadows for depth — use color contrast and overlap instead
• Play it safe with font sizes — if it's not oversized, it's undersized
• Fill every space — negative space is the canvas

Quality Gates

• At least one intentionally broken-grid layout element
• Oversized heading present on hero (3rem minimum)
• All text passes contrast check (3:1 for 3rem+, 4.5:1 for smaller)
• Focus states visible on all interactive elements
• Page respects prefers-reduced-motion
• No section feels "filled" — negative space is intentional throughout