# Grilli Type · Design system migration spec

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

> The site serves as a masterclass in restraint, using a minimalist framework to let the typography products themselves be the primary visual focus.

## 1. Identity DNA

This design system functions as a curated gallery for high-end typography, where the architecture itself recedes to let the letterforms take center stage. Every decision—from the strict grid to the monochrome palette—serves to create a quiet, confident container for the type foundry's work. It is a minimalist, grid-driven portfolio where restraint is the primary design principle.

**One-liner:** A minimalist, grid-driven portfolio for a Swiss type foundry.
**Keywords:** foundry · typography · typeface · design · minimal
**Analogy:** A curated gallery for high-end typography

## 2. Color

The color system is one of absolute discipline: a strict monochrome palette of white, black, and neutral gray forms the entire UI. Vibrant color is treated as reserved content, appearing only within the project imagery that populates the grid.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F9F9F9` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#8C8C8C` | secondary text |
| `--muted` | `#8C8C8C` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Strict high-contrast monochrome with sparse, intentional use of vibrant color in project imagery.

This approach ensures the typographic products remain the sole focal point, with the interface providing a neutral, professional backdrop.

## 3. Typography

Typeface names are presented in large, tight-spaced transitional or geometric styles, establishing their own voice and category. Supporting text adopts a neutral grotesque sans-serif, with font weights held predominantly at regular (400) to maintain a consistent, understated tone.

- **Display:** transitional-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.0 | 400 | -0.7px | Typeface names in grid |
| body | 16px | 1.375 | 400 | normal | Body text and navigation |

**Type rules:**
- Typeface names are set in large, tight-spaced transitional or geometric styles
- Body text is set in a neutral grotesque sans-serif
- Font weights are predominantly regular (400)

## 4. Spacing

The system establishes a consistent, deliberate rhythm through its spacing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 15 / 16 / 20 / 25 / 48 px
- **Rhythm:** Consistent 20px to 25px gaps between grid items

## 5. Surfaces

Depth is communicated not through shadows but through precise, minimal borders. A single 1px solid line in black or muted gray provides all necessary separation and structure, reinforcing the flat, grid-based aesthetic.

- **Radius:** sm 4px · md 5px · lg 5px · pill 999px
- **Borders:** 1px solid #000000 or #8C8C8C for horizontal rules

## 6. Layout

The layout skeleton is built on a large multi-column grid with strict left-alignment for all labels and navigation. This creates a clear, editorial separation between descriptive text and the visual content it references, reminiscent of classic Swiss design.

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

**Skeleton:** Left-aligned labels with a large multi-column grid for content

## 7. Motion & Interaction

Motion is treated as a utilitarian feedback mechanism, not a decorative feature. The system employs very fast, 0.1s ease-out transitions for hover states, designed to feel responsive and precise without drawing attention to the animation itself.

- **Durations:** micro 100ms · small 300ms · medium 300ms
- **Easing:** `ease-out`
- **Patterns:**
  - Fast 0.1s ease-out transitions on hover states

- **Hover:** Cursor changes to pointer on clickable elements
- **Click:** Standard pointer interaction
- **Transition:** All properties transition in 0.1s ease-out
- **Keyboard:** Standard accessibility focus

## 8. Voice & Don'ts

The editorial voice is quiet, confident, and highly professional, mirroring the system's visual restraint. Headlines are large typographic names, while calls to action are understated text links or ghost buttons.

- **Tone:** Quiet, confident, and highly professional
- **Headline style:** Large typographic names acting as primary headings
- **CTA style:** Understated text links or ghost buttons
- **Avoid:** Marketing jargon / Decorative elements / Cluttered layouts

### Don'ts
- ❌ don't use drop shadows — screenshot shows flat, grid-based layout
- ❌ don't use border-radius on large elements — screenshot shows sharp corners (except small 5px radius)
- ❌ don't use heavy font weights — screenshot shows predominantly regular weight typography
- ❌ don't use centered layouts — screenshot shows strict left-alignment for labels and navigation
- ❌ don't use decorative backgrounds — screenshot shows solid white or light gray (#F9F9F9) backgrounds
- ❌ don't use multi-colored navigation — screenshot shows black and muted gray text only

The system deliberately avoids decorative elements, marketing jargon, and cluttered layouts, using its minimalist framework to let the typography products be the primary visual focus.

## System Prompt (paste into AI tool)

```
A Swiss type foundry portfolio characterized by minimalist, grid-driven design and strict monochrome palettes. Key colors include a pure white (#FFFFFF) background, solid black (#000000) ink, and a muted gray (#8C8C8C) for secondary text. Typography is a mix of grotesque sans-serif for UI and transitional or geometric serifs for typeface showcases, with a 48px display scale. Critical design rules: maintain sharp corners (max 5px), use 1px solid borders for separation, and rely on strict left-alignment. Do not use decorative shadows, varied font weights, or vibrant UI colors (save those for project imagery only).
```
