# Def Studio · Design system migration spec

> Source: https://def.studio  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of 'type-as-interface' design, where the typography scale itself defines the entire visual hierarchy and spatial structure.

## 1. Identity DNA

Def Studio's identity is a case study in reduction, stripping the digital portfolio to its essential elements: scale and contrast. Like a gallery where the architecture recedes to let the work speak, this system uses extreme typographic size and a strict monochrome palette to create a spatial framework that is both navigation and visual statement.

**One-liner:** A design studio portfolio featuring large-scale typography over dark, atmospheric product photography.
**Keywords:** Design Studio · Portfolio · Visual Identity · Web Development
**Analogy:** A minimalist digital portfolio showcasing creative work through bold typography and high-contrast visuals.

## 2. Color

The color system is a study in absolute constraint, built upon a strict high-contrast monochrome palette. A pure black background (#000000) provides the deep, atmospheric canvas, while primary text in light gray (#EFEFEF) and secondary text in muted gray (#747474) create a clear, legible hierarchy without chromatic distraction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#EFEFEF` | body text |
| `--muted` | `#747474` | placeholder |
| `--line` | `rgba(239,239,239,0.1)` | divider |

**Color principle:** Strict high-contrast monochrome palette relying on pure black backgrounds and white/light-gray text for maximum legibility.

The principle is maximum legibility and focus through subtraction, where every color choice serves the content rather than decorating it.

## 3. Typography

Typographic voice is defined by light weight and extreme scale, creating an elegant tension between delicacy and dominance. Hierarchy is established not through weight variation, but through dramatic shifts in size, making the type itself the primary spatial and navigational element.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 0.95 | 300 | -1px | Main navigation and hero titles |
| heading | 25px | 1.4 | 300 | 0 | Section titles and navigation links |
| body | 16px | 1.6 | 400 | 0 | Body text and descriptions |

**Type rules:**
- Light weight (300) used for display and navigation text to maintain elegance.
- Text hierarchy is established primarily through extreme size differences rather than weight variations.
- Navigation items utilize the same typography as section headings but at a smaller scale.

## 4. Spacing

Rhythm is governed by generous, asymmetric padding values, creating open and deliberate spatial relationships rather than a rigid grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 16 / 20 / 24 / 30 / 48 / 60 / 100 px
- **Rhythm:** Generous, asymmetric spacing driven by specific padding values like 100px 30px 60px 30px.

## 5. Surfaces

Depth is implied through atmospheric photography used as a background texture, not through layering shadows or bevels. Surfaces are flat and borderless, with minimal text borders on navigation elements serving as the sole ornamental delineation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal borders used, primarily text borders for navigation elements.

## 6. Layout

The layout skeleton is a full-width, dark field dominated by large, left-aligned typographic overlays. This asymmetric structure treats the entire viewport as a canvas, positioning massive text as both visual focal point and interactive pathway.

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

**Skeleton:** Full-width dark background with large, left-aligned typography overlays.

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and restraint, using smooth 0.5-second transitions on opacity and position to create elegant reveals. Changes in element visibility are communicated through fades, maintaining the system's calm, confident pace.

- **Durations:** micro 220ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(1, 0.5, 0.8, 1)`
- **Patterns:**
  - 0.5s transitions applied broadly to top and opacity properties.
  - Opacity fades used for element visibility changes.

- **Hover:** Pointer cursor indicates interactive elements, likely accompanied by subtle opacity or color shifts.
- **Click:** Direct navigation to portfolio sections or external links.
- **Transition:** 0.5s duration used extensively for smooth state changes.
- **Keyboard:** Standard tab-based navigation inferred for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, minimalist, and professional, expressed through lowercase, massive-scale headlines and simple text-based calls to action. It communicates through its structural clarity, avoiding the need for embellishment or promotional language.

- **Tone:** Confident, minimalist, and professional.
- **Headline style:** Lowercase, massive scale, light weight, sans-serif.
- **CTA style:** Simple text-based links integrated into navigation or inline text.
- **Avoid:** Excessive decorative elements / High-chroma accent colors / Dense text blocks

### Don'ts
- ❌ don't use rounded corners — screenshot shows sharp edges on all cards and elements
- ❌ don't add drop shadows — screenshot shows completely flat, borderless surfaces
- ❌ don't use multi-column text layouts — screenshot shows left-aligned, wide typography
- ❌ don't apply heavy font weights — screenshot shows predominantly light (300) and regular (400) weights
- ❌ don't use decorative patterns — screenshot shows solid colors and photographic backgrounds
- ❌ don't use centered text alignment — screenshot shows strong left alignment for navigation and headings

The system deliberately avoids decorative patterns, high-chroma accents, centered text, and rounded forms, ensuring the focus remains entirely on the work and its typographic presentation.

## System Prompt (paste into AI tool)

```
Def.studio is a design studio portfolio characterized by extreme typographic scale and a strict monochrome palette. The visual identity relies on light-weight sans-serif typography at massive sizes (96px) to create a bold, minimalist aesthetic against a solid black background (#000000). Key colors include pure black for the background and light gray (#EFEFEF) for primary text, with a secondary muted gray (#747474) for less prominent elements. The layout is asymmetric and full-bleed, using photography as a background texture rather than framing it. Critical constraints include avoiding rounded corners or shadows, maintaining strictly left-aligned text, and never using high-chroma accent colors, ensuring the focus remains entirely on the work and the typography.
```