Bryn Taylor

# Bryn Taylor — Style Reference
> Architectural blueprint on white marble.

**Theme:** light

**Site:** https://www.bryntaylor.co.uk

Bryn Taylor's design system is a monochrome, content-first experience, akin to a meticulous architect's portfolio. Its character emerges from sharp typographic forms against subtle, almost imperceptible greys. Interactivity is defined by a deep ink-black paired with crisp white, creating a high-contrast focal point for user actions. The visual system prioritizes clarity and directness, using minimal adornment and robust typography to convey expertise.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Midnight Ink | `#000000` | `--color-midnight-ink` | Primary text, headings, button backgrounds, outline borders for ghost components, active state indicators. It signifies action and primary information |
| Canvas White | `#eff0fc` | `--color-canvas-white` | Main page background, providing a clean, almost off-white canvas for content |
| Surface Frost | `#ffffff` | `--color-surface-frost` | Card backgrounds, input fills, and text on Midnight Ink backgrounds. It serves as a secondary background and prominent foreground text color |
| Muted Ash | `#575757` | `--color-muted-ash` | Secondary text, weaker borders, and subtle descriptive elements |

## Tokens — Typography

### Neue Montreal
- **Substitute:** Inter
- **Weights:** 400, 500
- **Sizes:** 12px, 14px, 15px, 16px, 17px, 18px, 20px, 24px, 28px, 30px, 56px, 80px
- **Line height:** 1.05, 1.1, 1.2, 1.35, 1.4, 1.5, 1.6, 1.63
- **Letter spacing:** 0.0010em (for small text), 0.0060em, 0.0080em, 0.0100em, 0.0140em, 0.0150em, 0.0200em, 0.0250em, 0.0300em (for large displays)
- **Role:** The sole typeface, Neue Montreal, carries the entire visual voice. Its clean, geometric forms provide a confident, no-nonsense readability for all content, from large commanding headlines to detailed body text. The tight line heights, especially for larger sizes, reinforce a compact and efficient presentation.

## Tokens — Type Scale

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 12px | 1.5 | 0.001em |
| body-sm | 14px | 1.6 | 0.001em |
| body | 16px | 1.6 | 0.006em |
| subheading | 24px | 1.35 | 0.015em |
| heading | 30px | 1.2 | 0.015em |
| heading-lg | 56px | 1.1 | 0.025em |
| display | 80px | 1.05 | 0.03em |

## Tokens — Spacing

- **Section gap:** 32px
- **Card padding:** 24px
- **Element gap:** 16px

## Tokens — Radius

- **Buttons:** 1.67772e+07px
- **Cards:** 12px
- **badge:** 12px
- **none:** 0px
- **small:** 8px

## Components

### Filled Primary Button
*Call to action button for primary actions.*

Background: Midnight Ink (#000000). Text: Surface Frost (#ffffff). Border radius: 1.67772e+07px (pill shape). Padding: 0px vertical, 18px horizontal. Uses Neue Montreal.

### Ghost Secondary Button
*Secondary action button, providing a subtle interactive element.*

Background: Ghost Tint (#0000000a), Text: Midnight Ink (#000000). Border radius: 1.67772e+07px (pill shape). Padding: 0px vertical, 18px horizontal. Uses Neue Montreal.

### Card, Accent Background
*Background for feature blocks or highlighted content sections.*

Background: Faint Grey (#00000014). Border radius: 12px. No shadow. No intrinsic padding.

### Card, White Background
*Standard content card, used within sections.*

Background: Surface Frost (#ffffff). Border radius: 12px. No shadow. No intrinsic padding.

### Input Field
*Text input areas for forms.*

Background: Surface Frost (#ffffff). Text: Midnight Ink (#000000). Border: 1px solid Faint Grey (#00000014). Border radius: 12px. Padding: 0px vertical, 23px horizontal. Uses Neue Montreal.

### Badge
*Small informational tags or labels.*

Background: Surface Frost (#ffffff). Text: Midnight Ink (#000000). Border radius: 12px. Padding: 5.6px vertical, 12px horizontal. Uses Neue Montreal.

### Menu Item Highlight
*Indicator for active navigation items.*

Inset shadow: rgba(0, 0, 0, 0.08) 0px -2px 0px 0px. This creates a subtle bottom border for active navigation links.

## Guidelines

### Do

- Prioritize Neue Montreal for all text content; do not introduce other typefaces.
- Utilize Midnight Ink (#000000) for all primary text, headings, and active elements to maintain strong contrast.
- Apply Canvas White (#eff0fc) as the default background for most content sections.
- Use pill-shaped radii (1.67772e+07px) for all primary and secondary buttons, and 12px for cards and badges.
- Maintain a comfortable density with element gaps of 16px and section gaps of 32px between major content blocks.
- Employ the subtle inset shadow `rgba(0, 0, 0, 0.08) 0px -2px 0px 0px` for active navigation items.
- Introduce Surface Frost (#ffffff) as background for interactive components like inputs and cards, providing a hierarchical distinction from Canvas White.

### Don't

- Avoid using highly saturated colors; the palette is almost entirely achromatic with subtle tints.
- Do not deviate from the specified 'Neue Montreal' typeface, weights, and letter-spacing values.
- Do not use heavy box shadows; elevation is primarily achieved through subtle background color changes or faint inset shadows.
- Avoid large hero imagery; the layout prioritizes text and clean UI elements.
- Do not introduce complex gradient fills; the system relies on solid colors and subtle color differences for depth.
- Do not use generic border radii; adhere to 1.67772e+07px for buttons and 12px for cards/badges.
- Do not use different fonts for headings and body text; the same family with varying sizes and weights is the established pattern.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #eff0fc
border: #0000001f
accent: no distinct accent color
primary action: #000000 (filled action)

Example Component Prompts:
1. Create a primary navigation button: Background Midnight Ink (#000000), text Surface Frost (#ffffff), pill radius (1.67772e+07px), 18px horizontal padding. Font Neue Montreal 16px, weight 500.
2. Design a feature card: Background Faint Grey (#00000014), 12px border radius, no shadow. Headline Neue Montreal 24px, weight 500, Midnight Ink (#000000). Body text Neue Montreal 16px, weight 400, Muted Ash (#575757). Padding 24px.
3. Create a testimonial section: Background Canvas White (#eff0fc). Testimonial block has background Surface Frost (#ffffff), 12px border radius. Quote text Neue Montreal 18px, weight 400, Midnight Ink (#000000). Author text Neue Montreal 14px, weight 500, Midnight Ink (#000000). Element gap 16px.
4. Design a ghost button: Background Ghost Tint (#0000000a), text Midnight Ink (#000000), pill radius (1.67772e+07px), 18px horizontal padding. Font Neue Montreal 16px, weight 500.