# Swiss Typefaces · Design system migration spec

> Source: https://www.swisstypefaces.com  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

The Swiss Typefaces website operates as a high-end boutique for typographic craftsmanship. It applies the precision of Swiss design principles to create a modern, expressive gallery where each typeface is presented as a singular work of art.

**One-liner:** A premium type foundry showcasing bold, expressive typefaces with a clean, gallery-like presentation.
**Keywords:** Typography · Foundry · Premium · Design · Swiss
**Analogy:** A high-end boutique for typeface craftsmanship, blending Swiss precision with expressive, modern aesthetics.

## 2. Color

The color system is intentionally restrained, built on a foundation of black, white, and light gray. This achromatic base ensures the typography and a singular, vibrant mint-green accent can command focus without competition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f5f5f5` | main background |
| `--bg-soft` | `#ffffff` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#707070` | secondary text |
| `--muted` | `#d1d1d1` | placeholder |
| `--accent` | `#37f5b7` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

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

The principle is clear: color serves the content, never overshadowing the letterforms themselves.

## 3. Typography

Typography is the primary visual language, using dramatic scale to create impact. A clean, geometric sans-serif anchors the interface, allowing the showcased foundry typefaces to express their full character.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 115px | 0.9 | 300 | -1px | Hero headlines and primary typeface showcases |
| body | 18px | 1.55 | 400 | 0px | Navigation links, body copy, and UI text |
| caption | 12px | 1.25 | 400 | 0px | Secondary metadata, labels, and small UI elements |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a generous, asymmetric rhythm, carving out ample negative space around large typographic elements to create a focused, gallery-like atmosphere.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous, asymmetric spacing around large typographic elements, creating a gallery-like feel with focused content areas.

## 5. Surfaces

Depth is communicated through subtraction rather than addition. The interface is flat, using clean 1px borders for structural separation and occasionally a left-border accent for emphasis.

- **Radius:** sm 3px · md 16px · lg 20px · pill 999px
- **Shadows:**
  - none
- **Borders:** Clean, 1px solid borders for structural separation, with some elements using a left-border accent.

## 6. Layout

The layout is a full-width, hero-driven skeleton that prioritizes immersion. Content is centered within generous containers, but key typographic statements are permitted to span the full width for maximum expression.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy is one of purposeful minimalism. Animations are restricted to subtle opacity changes and transform transitions, providing immediate interactive feedback without decorative flourish.

- **Durations:** micro 120ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Subtle opacity and visibility transitions for UI elements.
  - Transform transitions on hover for interactive feedback.

- **Hover:** Subtle color transitions or opacity changes on interactive elements.
- **Click:** Immediate visual feedback, often through color change or slight transform.
- **Transition:** Fast (0.12s) transitions for color and border-color, slower (0.2s-0.9s) for transform and opacity.
- **Keyboard:** Standard tab navigation, with clear focus states.

## 8. Voice & Don'ts

The editorial voice is confident and slightly artistic, focused on craft and design philosophy. Headlines are bold, oversized, and typographically expressive, often set in the foundry's own type.

- **Tone:** Confident, sophisticated, and slightly artistic. Focused on craft and design philosophy.
- **Headline style:** Bold, often oversized, and typographically expressive. Uses the foundry's own typefaces.
- **CTA style:** Direct and minimal, often using a single word or short phrase (e.g., 'Catalogue', 'Exclusive').
- **Avoid:** Avoid cluttered layouts that compete with the typography. / Avoid overly complex or decorative UI elements that distract from the type. / Avoid using multiple competing font families within a single view.

### Don'ts
- ❌ 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.

This system deliberately excludes decorative UI elements, complex animations, and competing font families to maintain an unwavering focus on typographic purity.

## System Prompt (paste into AI tool)

```
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.
```
