# sinyard.co.uk — Design System

## 1. Visual Theme & Atmosphere

Sinyard operates in a state of elegant restraint. A near-black header anchors a page that otherwise allows content to breathe against near-transparent backgrounds. The dominant mood is minimal and editorial — no color distractions, no decorative noise. The palette is intentionally stripped to a binary contrast: near-black surfaces against light content. Built in Framer, the site carries the quiet confidence of a creative studio or independent professional who trusts their work to speak without ornamentation.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Canvas | `rgba(0,0,0,0)` transparent | Body background — content floats on page |
| Header surface | `rgb(13,13,13)` | Anchoring navigation bar, near-black |
| Frosted panel | `rgba(237,237,237,0.2)` | Subtle overlay card — soft luminance 0.93 |
| Dark section | `rgb(13,13,13)` | Alternative dark surface block |
| Foreground text | `rgb(0,0,0)` | Primary body text |
| Light accent | `rgb(237,237,237)` | Button text and borders — off-white |

No vivid accent colors. The design deliberately avoids blue, teal, or any brand hue.

## 3. Typography Rules

The sole typeface is **SuisseIntl-Regular** — a refined, neutral Swiss grotesque. Every heading level uses weight 400 (regular), with tight negative letter-spacing that increases proportionally with size. Headlines feel compact and serious without being dense.

- `h1`: 36px / 43px line-height / −1.08px tracking
- `h2`: 22.4px / −0.45px tracking
- `h5/h6`: 14–16px / subtle negative tracking
- `body/p`: 12px — deliberately small, keeping content secondary to composition
- `button`: Switches to **Helvetica Neue** — a pragmatic choice for UI elements

No serif. No monospace. No decorative display type. The entire site operates within one clean typeface family.

## 4. Component Stylings

Buttons carry no background — transparent with `rgb(237,237,237)` text and border. This ghost-button pattern keeps CTAs visible against the dark header without competing visually. Border radius data is absent: expect sharp or minimally-rounded corners. Interactive states are minimal — focus rings appear but hover is not defined, suggesting animation-based feedback over color shifts.

## 5. Layout Principles

Main sections use a generous `160px` gap — a wide-column editorial rhythm that creates breathing room between content blocks. The header uses `64px` gap between elements with `16px` side padding. Framer's absolute positioning system underlies the layout, which means sections likely use full-width stacking with precise positioning rather than grid-based composition.

## 6. Depth & Elevation

Depth is minimal — no shadows are defined. The frosted panel `rgba(237,237,237,0.2)` at luminance 0.93 provides the only layering effect. The dark header surface creates the single visual plane separation. This is a flat design with one moment of translucency.

## 7. Do's and Don'ts

**Do:** Use tight negative letter-spacing on all headings. Keep backgrounds transparent or near-black. Maintain the ghost-button pattern with off-white border and text. Let whitespace do the heavy lifting.

**Don't:** Add color accents — this palette has none. Don't use weight variations; everything is 400. Don't introduce shadows or depth effects. Don't increase body font size beyond 12px; the small text is deliberate.

## 8. Responsive Behavior

Framer breakpoints span from 389px (mobile) to 2500px (ultrawide). The site adapts across five tiers: 390, 810, 1200, 1440, and 1920. At narrow widths, the 160px section gap likely collapses, and the header 64px item spacing reduces.

## 9. Agent Prompt Guide

> "Design in the style of sinyard.co.uk: near-black header on a transparent canvas, single SuisseIntl typeface at regular weight with tight negative tracking, ghost buttons with off-white borders, 160px vertical rhythm between sections, no shadows, no color accents, flat and editorial."

*Generated by Sparkbites — extracted from live CSS analysis*