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 trackingh2: 22.4px / −0.45px trackingh5/h6: 14–16px / subtle negative trackingbody/p: 12px — deliberately small, keeping content secondary to compositionbutton: 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
