CURATED · OPEN · FREE

Bond

A bold, high-energy creative agency website that uses oversized typography and a vibrant coral accent to create a striking, expressive portfolio.

01

Identity DNA

A bold, high-energy creative studio that uses expressive typography and vibrant color to command attention.

02

Color

High contrast with a vibrant coral accent and photographic backgrounds.

03

Typography

grotesque-sans

• display123px · 700
• heading70px · 700
• body18px · 700
• small12px · 400

Use bold weight (700) for most text elements. · Use tight line heights for display text. · Use uppercase for navigation and labels.

04

Spacing

Generous padding around large typography and tight spacing for UI elements.

05

Surfaces

1px solid #000000

0 0 10px 0 rgba(0, 0, 0, 0.12) · 0 0 20px 0 rgba(0, 0, 0, 0.1)

06

Layout

Full-width image heroes followed by large typography sections.

07

Motion & Interaction

Smooth transitions for hover states and menu interactions. · Parallax or scroll-triggered animations for typography.

Color inversion or background color change on buttons. · Subtle scale or opacity change.

08

Components

• button Pill-shaped buttons with coral background and white text, or white background with black text and black border.
• card Minimal cards with large typography and photographic elements.
• chip Pill-shaped tags or labels.
• input Minimal form inputs with black borders.
• hero Full-screen photographic hero with overlaid text or minimal header.

09

Voice & Don'ts

• Tone Confident, direct, and slightly playful.
• Headlines Oversized, bold, and often lowercase or sentence case.
• CTAs Action-oriented with an arrow icon.

• Don't use subtle or understated typography — screenshot shows oversized, bold headlines.
• Don't use muted or pastel color palettes — screenshot shows a vibrant coral accent (#FF5D60) and high-contrast black and white.
• Don't use complex grids without large typography — screenshot shows generous whitespace and oversized text.
• Don't use serif fonts for headlines — screenshot shows a bold grotesque sans-serif.
• Don't use small, dense paragraphs — screenshot shows short, punchy copy with large line heights.
• Don't use rounded corners for most elements — screenshot shows sharp edges or pill-shaped buttons.
• Avoid: Subtle or understated typography.
• Avoid: Muted or pastel color palettes.
• Avoid: Complex grids or layouts without large typography.
• Avoid: Stock photography without a clear, expressive subject.
• Avoid: Serif fonts for headlines.
• Avoid: Small, dense paragraphs of text.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko