Swiss-grid
Home, programmes, collaborate, community, practical, contact
Primary — Outfit/Inter, overview-first
09
Design system
Style guide
Living document — visual and component guidelines for the Creative Business partner site. Swiss-grid leads; sections and insights below are updated by the team after feedback and design reviews.
Living documentv1.6.2Updated
01Visual layers
Which system when?
Do not mix systems on one page — pick one visual layer per route.
SAR editorial
Blog, cases, legacy routes (migration)
Montserrat, magenta #e5007d
Kinetic / lab
Scroll stories, /lab/
GSAP, MCO pixel #fa640a
02Colour
Swiss-grid tokens
brand-deep
#0f172a
Text, footer
brand-primary
#2563eb
Links, kickers, CTA
brand-accent
#f43f5e
Secondary accent
brand-surface
#f8fafc
Page background
03Typography
Outfit & Inter
Creative Business
Body copy in Inter — calm, readable, suited to longer partner copy and practical information.
01 · Section label
Typography Specimen Grid
Heading 1 (Display)
Outfit Bold
font-display text-5xl md:text-6xl font-bold tracking-tight leading-[1.05]Creative Business
Heading 2 (Section)
Outfit Bold
font-display text-3xl font-boldCollaborating on Innovation
Heading 3 (Sub)
Outfit Bold
font-display text-xl font-boldAssociate Degree Programme
Lead Paragraph
Inter Regular
text-lg text-brand-deep/70 leading-relaxedExplore the creative industry in Leeuwarden through practice-oriented projects and authentic collaborations with partners.
Body Copy
Inter Regular
text-sm sm:text-base text-brand-deep/70 leading-relaxedThis is the standard body copy. We use it for general information, details of programmes, and partner stories. Line height is set generously for maximum readability on screens.
Small / Secondary
Inter Regular
text-xs text-brand-deep/60Small details, copyright notices, and secondary data at the bottom of cards or form inputs.
04Layout
Grid & spacing
Container max-w-7xl, horizontal padding px-6. Numbered section labels; page header with index + kicker left, title right.
Responsive Grid Columns
Demonstration of the flexible 12-column grid that adapts to the viewport.
Mobile (1-2)Tablet (6)Desktop (12)
C1
C2
1. Container & Margins
All page content lives within a central container with a maximum width of `max-w-7xl` (1280px). The standard horizontal padding is `px-6` (24px) on all viewports.
2. Vertical Spacing
Major page sections are separated with generous vertical spacing such as `space-y-16` or `py-24`. This ensures ample whitespace fitting the minimalist Swiss aesthetic.
3. Breakpoints & Flex
Layouts scale from mobile-first to desktop using standard Tailwind breakpoints. Use `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` for a responsive 3-column layout.
Swiss Alignment: CSS Subgrid
Align headings, body paragraphs, and call-to-actions horizontally across separate card containers.
Without Subgrid (Uneven)Flex / Standard Grid
Programme A
Short description.
→ View
Programme B
A much longer description that spans multiple text lines to show how alignment shifts.
→ View
With CSS Subgrid (Aligned)grid-rows-[subgrid]
Programme A
Short description.
→ View
Programme B
A much longer description that spans multiple text lines to show how alignment shifts.
→ View
05Components
Patterns
BA
Programme card
Bachelor
BA / AD / MA lead the modular menu — calm, overview-first.
Buttons & Interactive States (Swiss Context)
| Style | Rest / Normal | Hover / Focus | Active / Pressed | Disabled | Loading |
|---|---|---|---|---|---|
| Primary CTA | |||||
| Secondary Link | |||||
| Badge / Tag | Creative | Creative | Creative | Creative | Creative |
06Form Elements
Forms & Input Elements
Please enter a valid email address.
Team avatar
Fixed 56px circle with shrink-0 and object-cover. Use placeholder SVGs until CMS photos are available.
Shared Layout Guidelines
Form Best Practices
- —Labels are always visible and positioned above the input field.
- —Placeholder text demonstrates the expected format (e.g. email@domain.com).
- —Error messages are shown inline below the input with a semantic color.
07Monoline
50 ZER icons
Fill-based SVGs via currentColor. Use one library — no ad-hoc icon sets on Swiss pages.
Iconography Sizing & Accessibility
We use standardized sizes for all monoline icons to preserve visual hierarchy and styling consistency:
w-5 h-5 (20px)Inline text/buttons
w-8 h-8 (32px)Small cards
w-12 h-12 (48px)Feature lists
w-16 h-16 (64px)Hero sections
Accessibility & Colors
- —Decorative: Always use `aria-hidden="true"` on the SVG element when the icon is purely decorative (adjacent text explains the meaning).
- —Interactive: If the icon functions standalone as a button or link, provide a descriptive `title` tag or `aria-label`.
- —Coloring: We map icon colors via `currentColor` so icons smoothly animate transitions on hover/focus button states.
08Fluid Art
Organic abstraction
Fluid art uses organic liquid backgrounds. Each level has its own color palette and meaning.
Brand / General
Accent: #2563EB
Deep: #0F172A
Bachelor
Accent: #2563EB
Deep: #0B1E4D
Associate Degree
Accent: #F43F5E
Deep: #3B0A22
Master
Accent: #7C3AED
Deep: #1E1B4B
09Motion & a11y
Calm and accessible
- Cursor trail off by default — no distracting menu card motion.
- prefers-reduced-motion disables menu animations.
- Semantic landmarks: header, main, nav, footer.
- WCAG 2.1 AA — contrast on brand-deep / brand-surface.
Best practices & feedback
Read our living insights, best practices, and design considerations.
Version history
Track the version history, changes, and updates of the style guide.
10Contribute
Keep the style guide current
Anyone on the team can propose updates. Changes go through git so the public page and docs stay in sync.
- Add an insight in src/lib/swiss/styleguide/insights.ts (newest at top).
- Update changelog + manifest (version / lastUpdated).
- Open a PR — after merge, build + deploy updates the live page.
- Full guide: agent-context/runbooks/design/styleguide/HOW-TO-UPDATE.md
src/lib/swiss/styleguide/