# Displaay · Design system migration spec

> Source: https://displaay.net  ·  Curated by OpenDesign  ·  en

> A masterclass in how a type foundry can showcase its craft through its own UI, using custom fonts and a refined, gallery-style presentation.

## 1. Identity DNA

Displaay operates as a creative studio where the typeface is the primary exhibit. Its design system is built to showcase typographic art through expressive, gallery-style layouts, with every UI element serving as a frame for the foundry's work.

**One-liner:** An independent type foundry presenting distinctive retail and custom typefaces with playful, art-directed visuals.
**Keywords:** type foundry · retail fonts · custom type · independent
**Analogy:** A creative studio showcasing typographic art through expressive layouts.

## 2. Color

The color system is fundamentally monochrome, establishing a neutral, high-contrast foundation of white, gray, and black. This stark canvas allows the vibrant color of photography and illustrations to define the site's dynamic personality.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#C9C9C8` | card background |
| `--ink` | `#020202` | body text |
| `--ink-soft` | `#76756F` | secondary text |
| `--muted` | `#76756F` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Monochrome foundation with bold, high-contrast photography and illustrations defining the color story.

The guiding principle is restraint, ensuring that color is introduced through content, not decoration.

## 3. Typography

Typography is the core language, utilizing clean humanist sans-serif typefaces for all display and UI text. The system prioritizes a refined, regular weight for body copy and uses tight tracking on headings to maintain a sharp, editorial character.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 44px | 1.0 | 400 | -1.1px | Large section headings like 'New Releases' |
| headline | 28px | 1.1 | 400 | -0.28px | Secondary headings and titles |
| body | 15px | 1.3 | 400 | 0.3px | Main body copy and descriptions |

**Type rules:**
- Headings use a clean humanist sans-serif with tight tracking.
- Body text maintains generous line-height for readability.
- Font weight is predominantly regular (400) for a refined, editorial feel.

## 4. Spacing

Rhythm is established through generous inter-section whitespace contrasted with tight internal padding for UI components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 15 / 20 / 25 / 32 / 48 / 96 px
- **Rhythm:** Generous whitespace between sections, with tight internal padding for UI elements.

## 5. Surfaces

Surfaces are flat and graphic, defined by sharp 1px solid black borders rather than shadows or gradients. This approach creates a clean, structured depth that aligns with the foundry's precise, illustrative aesthetic.

- **Radius:** sm 8px · md 10px · lg 20px · pill 999px
- **Shadows:**
  - none
- **Borders:** 1px solid black for buttons and chips, creating a sharp, graphic outline style.

## 6. Layout

The layout skeleton is a spacious, left-aligned composition that prioritizes large-scale typography and full-width imagery. Feature cards are organized in a grid below a prominent hero section, creating a clear visual hierarchy.

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

**Skeleton:** Left-aligned typography with right-aligned action buttons in the hero; grid-based feature cards below.

## 7. Motion & Interaction

Motion is minimal and functional, applied with a consistent, smooth transition to interactive state changes. The philosophy is one of subtle, reliable feedback—such as background or border color shifts—rather than decorative animation.

- **Durations:** micro 150ms · small 300ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth background and color transitions on interactive elements.

- **Hover:** Subtle background or border color shifts with smooth transitions.
- **Click:** Immediate state change, often triggering a page or section navigation.
- **Transition:** Standardized 0.3s duration with standard easing for most property changes.
- **Keyboard:** Accessible navigation through focusable elements with visible focus states.

## 8. Voice & Don'ts

The editorial voice is direct, professional, and slightly playful, communicated through bold, lowercase or sentence-case headlines and action-oriented labels. It avoids complex prose and decorative language, focusing on the clear presentation of type and craft.

- **Tone:** Professional, direct, and slightly playful.
- **Headline style:** Bold, lowercase or sentence-case statements that emphasize the foundry's mission.
- **CTA style:** Action-oriented labels like 'Trials', 'Tester', and 'Shop'.
- **Avoid:** Avoid overly complex sentences or flowery language. / Avoid decorative fonts for UI elements; keep them functional. / Avoid cluttered layouts; maintain ample white space.

### Don'ts
- ❌ Don't use drop shadows or soft gradients — screenshot shows sharp 1px solid borders and flat surfaces.
- ❌ Don't center-align all text — screenshot shows a strong left-aligned typographic hierarchy.
- ❌ Don't use heavy font weights for everything — screenshot shows a predominant use of regular (400) weight.
- ❌ Don't hide the navigation behind complex menus — screenshot shows direct, visible pill-shaped links.
- ❌ Don't use muted, pastel colors as the primary palette — screenshot shows a high-contrast black/white/gray base with vibrant image fills.
- ❌ Don't use standard system fonts — screenshot uses custom typefaces for all branding and headings.

The system deliberately avoids cluttered layouts, soft shadows, and generic system fonts, maintaining a focused and distinctive gallery experience.

## System Prompt (paste into AI tool)

```
This is an independent type foundry site (Displaay) with a clean, editorial aesthetic grounded in a monochrome palette (#FFFFFF, #C9C9C8, #020202, #76756F). The typography relies on custom humanist-sans fonts with a large display scale and regular weights. The layout is spacious and left-aligned, using sharp 1px black borders for UI components like buttons and chips. Key donts: avoid soft shadows or rounded rectangles without borders, avoid centering all text, and never use generic sans-serif fonts for display headings. The design is refined, playful, and gallery-like, focusing on the visual impact of the type specimens and photography.
```