CURATED · OPEN · FREE

Collins

A premium design agency site that balances bold editorial typography with restrained, sophisticated minimalism.

brandingstudio

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://wearecollins.com

📦 Browse pack contents →

Identity DNA

refinedauthoritativeeditorialpremium

High-end design agency studio

Color

#140700Ink

#d0d0c8Ink soft

#f8f8f7BG

#ffffffBG soft

#efefefBG quiet

#514c49Muted

rgba(208, 208, 200, 0.5)Line

Near-monochrome with subtle warm grays and high-contrast black ink for maximum editorial impact.

Typography

transitional-serif · humanist-sans

display72px · 400
heading36px · 400
body16px · 400
caption14px · 400

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

generous whitespace with tight letter-spacing creates a breathing, editorial rhythm

Surfaces

sm · 4px

md · 16px

lg · 96px

pill · 999px

subtle 1px borders using muted warm grays

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered hero with generous vertical padding, followed by asymmetric content sections

Motion & Interaction

250msmicro

400mssmall

800msmedium

cubic-bezier(0.19, 1, 0.22, 1)easing

clip-path reveal · transform slide · opacity fade

Subtle color transitions with 0.7s easing · Immediate feedback with no bounce

Components

button Minimal pill-shaped buttons with dark ink fill and white text
card Large image-forward cards with rounded corners (16px) showcasing case studies
chip Laurel-framed award badges arranged in a horizontal flex layout
input Minimal inline text fields with subtle borders
hero Full-viewport centered headline with substantial vertical breathing room

Voice & Don'ts

Tone Authoritative yet inviting
Headlines Short, punchy imperative statements with periods
CTAs Simple single-word actions (Explore)

Don't use bright accent colors — the site relies on near-monochrome palette with no dominant accent
Don't use heavy drop shadows — the surface design is flat and clean
Don't use tight line-spacing on headlines — generous vertical rhythm is maintained throughout
Don't use sans-serif for display text — hero headlines use serif typeface exclusively
Don't clutter layouts with multiple elements — maximum whitespace with single focal points per section
Don't use decorative borders — the only visible borders are 1px subtle dividers
Avoid: Technical jargon
Avoid: Overly casual language
Avoid: Generic marketing speak

Inside the pack — real screenshots

Collins — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a premium design agency website for Collins, featuring an editorial, restrained aesthetic. The palette is near-monochrome: off-white background (#f8f8f7), near-black ink (#140700), and subtle warm grays (#d0d0c8, #514c49). No dominant accent color exists. Typography alternates between a transitional serif for display headlines (tight negative letter-spacing) and a humanist sans-serif for body text. Generous whitespace creates a breathing, editorial rhythm. Critical constraints: never add colorful accents, never use tight spacing on large text, never clutter layouts, never use sans-serif for hero display type, always maintain the restrained premium tone, and always prioritize image-forward case study presentations over text-heavy sections.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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