wearecollins.com — Design System

1. Visual Theme & Atmosphere

Brand identity studio with an editorial, gallery-like aesthetic. Rigorous whitespace discipline and a near-monochrome palette keep focus entirely on client work. Every pixel earns its place.

Mood: editorial, gallery, minimal, prestigious

The visual language is deliberately anti-trend — using a default serif as a bold design statement. A structured token system underpins every color decision.

2. Color Palette & Roles

Design tokens found: 17 color custom properties

Named Tokens (excerpt)

• --color-black: #000
• --color-white: #fff
• --color-off-white: #f8f8f7
• --color-off-black: #140700
• --color-mid-white: #d0d0c8
• --color-mid-black: #5e5855
• --color-grey-10: #1d1d1d
• --color-grey-30: #4c4c4c
• --color-grey-60: #7a7a7a
• --color-grey-80: #ccc
• --color-grey-97: #f7f7f7
• --color-brian-orange: #ff7600

Palette philosophy: Strict near-monochrome. Any accent would compete with the work on display.

3. Typography Rules

• h1: Portrait Text / 72px / wt 400 / tracking -1.44px / lh 72px
• h2: Graphik / 16px / wt 400 / tracking -0.16px / lh 20.8px
• body: Times / 16px / wt 500
• p: Graphik / 12px / wt 400 / tracking -0.64px / lh 12px
• a: Times / 16px / wt 500
• button: Arial / 13.3333px / wt 400
• input: Graphik / 16px / wt 400 / tracking -0.16px / lh 16px
• dialog: Times / 16px / wt 500
• label: Graphik / 16px / wt 400 / tracking -0.16px / lh 20.8px

Custom typefaces: Portrait Text, Graphik

Typography philosophy: The serif is the statement — it refuses the expected grotesque of the tech industry. It reads as confidence, not carelessness.

Headline tracking: -1.44px — tight tracking signals confidence and editorial intent. Headline scale: h1 at 72px, h2 at 16px — large-scale type creates immediate visual impact.

4. Component Stylings

Border radius: No border-radius — sharp edges throughout.

Shadows: Shadows are absent — depth through color and spacing alone.

• Component data limited — apply global radius and color rules consistently.

5. Layout Principles

Layout philosophy: Grid-based editorial layout. Alignment is strict; irregular spacing within that grid creates dynamism.

Spacing cadence: Fluid spacing tokens via clamp() — scales smoothly between breakpoints without abrupt jumps.

6. Depth & Elevation

Flat design — no box shadows. Depth communicates through:

• Background color contrast between sections
• Border lines as separators
• Typography weight shifts
• Proximity and whitespace

This is an intentional choice: shadows would add visual noise to a carefully restrained palette.

7. Do’s and Don’ts

Do:

• Let client work breathe — generous whitespace is non-negotiable
• Use only the defined typefaces (Portrait Text, Graphik) — system fonts will break the brand voice
• Keep all edges sharp — border-radius destroys the visual discipline
• Keep elevation flat — adding shadows would contradict the design language

Don’t:

• Apply dark mode as an afterthought — it requires its own color decisions
• Use accent colors for decoration — there are none, and that is deliberate
• Mix more than two typeface families — typographic chaos undermines brand clarity
• Add gradient backgrounds unless they exist in the design system
• Use stock UI component defaults (e.g., Bootstrap/MUI) without full restyling

8. Responsive Behavior

Headline scale:

• Desktop: 72px
• Suggest mobile: 40px–47px

Body text: 16px — standard; consider 15px on mobile for comfort

Safe areas: Respects iOS/Android notch insets via env(safe-area-inset-*) — already mobile-native ready.

Layout breakpoints: Transition from multi-column editorial grid to single-column stack; maintain generous margins at all sizes.

Navigation: Apply standard mobile nav pattern: fixed header, collapsible menu.

9. Agent Prompt Guide

When asked to create UI in the style of wearecollins.com, instruct the agent:

Design in the style of wearecollins.com: editorial, gallery, minimal, prestigious.
Use clean backgrounds with high contrast text.
Primary typeface: Portrait Text, body: Times.
Sharp corners on all elements — no border-radius.
No shadows — flat design.
Strictly monochrome — no accent colors.
Generous whitespace. Content is the hero.
Avoid: generic card components, gradient backgrounds, icon-heavy layouts, rounded pill buttons.

Key design signals to reference:

• Custom font: Portrait Text — load via CDN if reproducing
• Shadow-free — use border or background contrast for separation
• Zero border-radius — rectangular everything
• Color temperature: Neutral with controlled accent

Generated by Sparkbites — extracted from live CSS analysis