---
name: Swiss Typefaces
description: "This site is a prime example of how typography can be the hero of a design, using scale, weight, and space to create a premium, expressive experience."
version: alpha

colors:
  background: "#f5f5f5"
  primary: "#000000"
  secondary: "#707070"
  tertiary: "#37f5b7"
  neutral: "#d1d1d1"
  bg-soft: "#ffffff"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 115px
    lineHeight: 0.9
    fontWeight: 300
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 18px
    lineHeight: 1.55
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 3px
  md: 16px
  lg: 20px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium type foundry showcasing bold, expressive typefaces with a clean, gallery-like presentation.

*A high-end boutique for typeface craftsmanship, blending Swiss precision with expressive, modern aesthetics.*

## Colors

A predominantly achromatic palette of black, white, and light gray, allowing the typefaces themselves and vibrant accent colors to command visual attention.

- **Background (`#f5f5f5`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#707070`)** — uses `ink-soft` token
- **Accent (`#37f5b7`)** — uses `accent` token
- **Muted (`#d1d1d1`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans
- **Mono:** monospace

- Typography is the primary visual element; scale is dramatic and expressive.
- Use a clean, geometric sans-serif for UI and navigation to maintain clarity.
- Weight is primarily light (300) for large display text, creating a refined look.

## Layout

A full-width, hero-driven layout with content centered in generous containers. Typography often spans the full width of its container.

*Rhythm:* Generous, asymmetric spacing around large typographic elements, creating a gallery-like feel with focused content areas.

## Elevation & Depth

- none
- Borders: Clean, 1px solid borders for structural separation, with some elements using a left-border accent.

## Shapes

- `sm`: 3px
- `md`: 16px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** Minimal, pill-shaped or slightly rounded buttons with high contrast (e.g., solid green or black).
- **card:** Clean, image-driven cards for showcasing typefaces, often with minimal borders and clear typography.
- **chip:** Simple, rounded tags or labels for categorization.
- **input:** Clean, minimalist input fields with subtle borders.
- **hero:** Full-viewport, immersive sections dominated by large, expressive typography or abstract imagery.

## Do's and Don'ts

**Don't:**
- Don't use decorative or script fonts for UI — the screenshot shows a clean, geometric sans-serif for navigation.
- Don't apply heavy drop shadows — the screenshot shows a flat design with almost no shadows.
- Don't use a busy, colorful background for the entire page — the screenshot uses a light gray or white base.
- Don't make buttons square or sharp-edged — the screenshot shows pills and rounded rectangles.
- Don't center-align all body text — the screenshot uses a mix of center-aligned headlines and left-aligned body copy.
- Don't use small, cramped spacing — the screenshot shows generous whitespace around elements.

---

## System Prompt (paste into AI agent)

```
This is a premium type foundry website. It uses a clean, gallery-like layout with generous whitespace to showcase expressive, oversized typography. Key colors are a light gray (#f5f5f5) background, black (#000000) text, and a vibrant mint-green accent (#37f5b7) for CTAs. Fonts are primarily clean grotesque and humanist sans-serifs (like Suisse Intl and Euclid families). Critical donts: 1) Do not use decorative fonts for UI. 2) Do not apply heavy shadows or gradients. 3) Do not clutter the layout; let the typography breathe.
```