garriock.com website design: fonts, colors and UI patterns

Design character

Garriock & Co. is an ultra-minimal luxury studio/brand site: vast whitespace or quiet neutral fields, enormous light display (~72–78px weight 300), micro labels at 12px, and side padding locked around 60px. It feels couture and architectural — more brand film titles than website chrome. Photography or large typographic statements occupy the stage; UI is nearly absent.

What should survive adaptation:

• Extreme type contrast: 12px micro vs ~78px light display.
• Horizontal inset ~60px as a steady frame.
• Minimal color, minimal components.
• Editorial pacing; one idea per viewport.
• Weight 300 display for elegance, not bold impact fonts.

Foundations

Color

No structured roles. Visual monochrome:

Typography

Spacing and layout

• Persistent 60px left/right padding.
• Tiny 2px bottom paddings on some micro rows; larger 20–52px on editorial blocks.
• Full-viewport chapters rather than card grids.

Visual language

• No meaningful radius language (square, image-led).
• Hairline or no borders.
• Photography and giant type only.

Components and states

1. Barely-there identity/nav.
2. Full-bleed or large-type hero chapters.
3. Project/story sequences.
4. Micro captions.

Responsive behavior

All primary captures 2048×1194. The 60px frame and light display should scale fluidly; avoid introducing cards when narrowing.

Practical guidance

Preserve 12 vs 78 type polarity, 60px frame, weight 300 elegance, chapter pacing. Avoid SaaS nav megamenus, colored button stacks, dense marketing sections.

Scope note

Seven home captures at wide desktop. Structured colors/radii unsupported; system is type and padding first. Inner project templates not separately captured.