takeagander.com — Design System
1. Visual Theme & Atmosphere
Take a Gander is a creative agency with a typographic signature so strong it becomes the brand. The hero uses the “Denim INK Regular” typeface at fluid sizes reaching clamp(170px, 18vw, 270px) — letterforms so large they become graphic elements. The background is a warm, inviting cream (#fff4ed) that feels handmade and tactile. Interactions are defined by accessibility-first dashed focus rings in the brand’s peach-orange color — a rare signal of a studio that cares equally about craft and inclusivity.
2. Color Palette & Roles
| Role | Value | Usage |
|---|---|---|
| Cream canvas | rgb(255,244,237) (--cr-cream: #fff4ed) |
Main page background — warm cream |
| Near-black text | rgb(23,23,23) (--cr-black: #171717) |
Primary body text |
| Orange accent | rgb(255,194,155) (--cr-orange: #ffc29b) |
Focus rings, accessibility indicator |
| Yellow secondary | rgb(255,195,79) (--cr-yellow: #ffc34f) |
Secondary accent |
| Blue highlight | rgb(135,163,236) (--cr-blue: #87a3ec) |
Tertiary accent |
| Dark mobile nav | rgb(23,23,23) |
Full-screen mobile menu |
| Subtle overlay | hsla(0,0%,49%,0.2) |
--cr-subtle — dividers and ghost UI |
Three accent colors (orange, yellow, blue) exist in the token system but orange dominates as the interactive indicator.
3. Typography Rules
The entire identity is built on Denim INK — Regular and SemiBold weights:
--t-h-1: Denim INK Regular,clamp(170px, 18vw, 270px)— full-bleed typographic statement--t-h-2: Denim INK Regular,clamp(50px, 8vw, 120px)— responsive section headers--t-h-3: Denim INK Regular,clamp(30px, 3vw, 50px)body/p: Denim INK Regular, 18px / 38px (p displays at 38px — large editorial body)button: Denim INK SemiBold, 18px, uppercase, +0.54px trackinginput: Denim INK Regular, 24px — generous input sizing
The font feature "ss03" is not explicitly set but Denim is a variable typeface with strong optical qualities. No monospace anywhere.
4. Component Stylings
A single border radius: 8px 0px 0px 8px — asymmetric, applied to one specific element (likely a scroll progress indicator or chip). The --border-black is 1.5px solid #000 and testimonials use 1.69px dashed var(--cr-black). Dashed borders as design elements signal editorial craft. Focus rings use the brand orange in dashed style — accessibility as aesthetic.
5. Layout Principles
Next.js with three breakpoints: 600, 1024, and 2300px. A wide max-width --s-contain-max: 2000px. Section spacing: --s-section: 200px — generously breathable. Edge margins: --s-edge-x: 18px / --s-edge-y: 65px. Gap scale from 10px (xs) to 114px (xxl).
6. Depth & Elevation
No shadows. The dark mobile nav overlay creates the only layering effect. The --cr-subtle series (4-step gray at 20–80% opacity) handles all ghost/muted UI moments.
7. Do’s and Don’ts
Do: Let the display type at massive sizes dominate. Use dashed borders and orange focus rings as crafted accessibility moments. Maintain cream as the only background. Use clamp() for all typographic scales.
Don’t: Use the blue or yellow accents prominently — they exist for variety but orange is primary. Don’t add heavy shadows or card elevation. Don’t constrain heading sizes — the display type should feel almost uncomfortable in its scale.
8. Responsive Behavior
Three breakpoints at 600, 1024, and 2300px — a sparse, confident layout system. The clamp()-based typography means fluid scaling between breakpoints with no abrupt jumps.
9. Agent Prompt Guide
“Design in the style of takeagander.com: warm cream
#fff4edcanvas, Denim INK typeface at extreme display sizes using clamp(), 200px section vertical rhythm, dashed borders as design elements, peach-orange focus rings, no shadows, accessible and editorial.”
Generated by Sparkbites — extracted from live CSS analysis
