styling

name	styling
description	Trigger when creating/modifying SCSS files, styling components, or discussing design tokens
allowed-tools	Read, Grep, Glob

Styling Skill

Design System Overview

This project uses SCSS Modules with a centralized design token system.

Typefaces

Loaded via next/font in layout.tsx:

• Display: Cormorant Garamond - headings, hero text
• Body: DM Sans - body copy, UI elements

Colour Tokens

Defined in src/styles/variables.scss:

Token	Purpose
--color-bg	Page background
--color-surface	Card/section backgrounds
--color-text	Primary text
--color-text-muted	Secondary/subtle text
--color-brand	Primary brand colour
--color-brand-hover	Brand hover state
--color-accent	Accent/highlight colour
--color-accent-light	Light accent variant
--color-border	Borders and dividers
--color-header	Header background
--color-header-text	Header text
--color-success	Success states
--color-error	Error states

Typography Scale

Token	Usage
--font-size-xs	Small labels
--font-size-sm	Secondary text
--font-size-base	Body copy
--font-size-lg	Lead paragraphs
--font-size-xl	H4 headings
--font-size-2xl	H3 headings
--font-size-3xl	H2 headings
--font-size-4xl	H1 headings
--font-size-5xl	Hero headings

Font Weights

Token	Weight
--font-weight-light	300
--font-weight-regular	400
--font-weight-medium	500
--font-weight-semibold	600
--font-weight-bold	700

Spacing Scale

Token	Usage
--spacing-xs	Tight spacing
--spacing-sm	Small gaps
--spacing-md	Default spacing
--spacing-lg	Comfortable spacing
--spacing-xl	Large gaps
--spacing-2xl	Section padding
--spacing-section	Between sections

Breakpoints

Token	Value
--breakpoint-mobile	480px
--breakpoint-tablet	768px
--breakpoint-desktop	1024px
--breakpoint-large	1200px

SCSS Pattern

.container {
  padding: var(--spacing-md);
  background: var(--color-surface);

  @media (min-width: 768px) {
    padding: var(--spacing-lg);
  }

  @media (min-width: 1024px) {
    padding: var(--spacing-xl);
  }
}

.title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  color: var(--color-text);
}

Component Patterns

Buttons

• Primary: Brand colour background, white text
• Secondary: Transparent with brand border
• Ghost: Text only with hover state

Cards

• Surface background
• Padding using spacing tokens
• Border radius and shadow from tokens

Navigation

• Fixed header
• Mobile hamburger at tablet breakpoint
• Smooth scroll behaviour

Accessibility

• Contrast: WCAG AA minimum (4.5:1 for text)
• Focus states: Visible focus ring on all interactive elements
• Reduced motion: Respect prefers-reduced-motion
• Font sizing: Relative units (rem) for scalability
• Touch targets: Minimum 44x44px on mobile

Gotchas

• Never hardcode colour, spacing, or font values
• Always read src/styles/variables.scss before styling
• Project is in active redesign - do not mix old and new styles
• Every component needs a matching .module.scss file