Dapper Agency — Design System

1. Visual Theme & Atmosphere

Dapper Agency operates at the intersection of Swiss clarity and playful energy. The base is a warm light grey (#f3f3f3) — not cold white, not cream, but a neutral that lets a vivid mint-green primary (#74f5a1) and unexpected electric purple secondary (#c35fff) pop with maximum contrast. The typeface pairing — Helvetica Now Display for display work and Helvetica Now Text for body — signals craft and precision. This is a design agency that takes typography seriously while using colour to show personality. The depth system uses a single generous shadow for elevation.

2. Color Palette & Roles

The dual accent system (mint + purple) provides flexibility for feature differentiation without introducing brand inconsistency.

3. Typography Rules

Display typeface: Helvetica Now Display — used for headlines. Text typeface: Helvetica Now Text — used for UI labels and body.

• All weights are 700 — bold is the default register, not an emphasis state.
• Letter-spacing is negative throughout, even at smaller sizes (-0.4px at 13px).
• No text transforms — the boldness provides hierarchy without uppercase tricks.
• Font size uses em units (--size-font: var(--unit-width) with --unit-width: 16px) — the type scale is anchored to the root em.

4. Component Styling

• Border radii: Small (0.5em), medium (1em), large (1.5em) — a rounded system, in contrast to the sharp-edged typography.
• Elevation shadow: rgba(0,0,0,0.3) 0px 32px 68px 0px — a single large, soft drop shadow for floated UI panels.
• Buttons: Transparent background with white text — ghost style on dark backgrounds.
• Textarea: Dark background (#212121), light text (#f3f3f3) — reversed for form inputs.
• Gap system: xs=1em, default=1.5em, L=3em, XL=4.5em, eyebrow=2.5em — em-based, coherent.

5. Layout Principles

• Container max: 1920px, ideal: 1440px, min: 992px — a wide-screen-first design.
• Section padding: 12em (full), 9em (three-quarters), 6em (half) — generous spatial rhythm.
• Header padding: 12em — the nav breathes.
• Container padding: 3em on each side.
• The --pixel token is 3em — used for specific graphic/decorative sizing.
• Nav bar height: 7.5em — tall, prominent navigation.

6. Depth & Elevation

• One shadow tier: 0px 32px 68px 0px rgba(0,0,0,0.3) — large blur, significant elevation for floating panels.
• No multi-tier shadow system. Surface depth is communicated through the light/dark colour alternation.
• The --grow: 0.25em token suggests micro hover-expand animations.

7. Do’s and Don’ts

Do:

• Use mint green (#74f5a1) as the primary CTA colour — it’s the brand’s most distinctive trait.
• Pair rounded corners (1–1.5em) with bold typography for a playful-but-precise feel.
• Use em-based spacing to keep proportions fluid across zoom levels.
• Apply the single large shadow only to elevated floating panels.

Don’t:

• Introduce thin (100–300) type weights — 700 is the only weight in this system.
• Use pure white (#ffffff) as the page background — the warm grey (#f3f3f3) is deliberate.
• Mix the mint and purple accents on the same component.
• Add multiple shadow tiers — one large shadow is the design intent.

8. Responsive Behavior

• Container width collapses from 1920px max through the ideal 1440px.
• Section padding tokens are halved/three-quartered for smaller contexts.
• Em-based spacing scales naturally with font-size adjustments.
• The nav bar height (7.5em) may need explicit overrides at mobile scale.

9. Agent Prompt Guide

Build a design agency site using Dapper’s aesthetic. Background is warm grey #f3f3f3, dark sections use #212121. Primary accent: mint #74f5a1. Secondary accent: purple #c35fff. Typeface: Helvetica Now Display (bold 700) for headlines, Helvetica Now Text for labels. All text at weight 700, negative letter-spacing. Border-radius: 0.5–1.5em (rounded system). Section padding 12em. One elevation shadow: rgba(0,0,0,0.3) 0 32px 68px. No gradients, no light shadows.

Generated by Sparkbites — extracted from live CSS analysis