# Atlason · Design system migration spec

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

> A masterclass in using typography and whitespace to create a premium, gallery-like feel.

## 1. Identity DNA

The Atlason system operates like an upscale design gallery, where the architecture of the space exists to serve the objects within it. Its identity is built on a foundation of restraint, using scale and negative space as its primary tools to frame the studio's portfolio.

**One-liner:** A high-end design studio portfolio showcasing furniture and product work.
**Keywords:** design studio · furniture · portfolio · minimalist
**Analogy:** An upscale design gallery that lets the work speak for itself.

## 2. Color

The color system is deliberately reductive, built on a strict monochrome foundation. This absence of decorative color creates a high-contrast stage, forcing the eye to focus on the quality of form and photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#B0B0B0` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Strict monochrome foundation relying on high-contrast photography for color.

The principle is to let high-contrast photography provide all the necessary chromatic information.

## 3. Typography

Typography is handled with monumental scale and precise alignment. A bold, modern grotesque sans-serif serves as the voice, used at massive sizes for headings to create immediate visual hierarchy and impact.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 230px | 0.77 | 400 | -2px | Main title 'Atlason' |
| heading | 106px | 1.0 | 500 | -1px | Section headers 'Works', 'More' |
| body | 16px | 1.2 | 400 | 0px | Captions and contact details |

**Type rules:**
- Use tight letter-spacing for large display headings
- Maintain strict left-alignment for all text blocks
- Avoid drop shadows or decorative treatments on text

## 4. Spacing

Spatial rhythm is asymmetrical, using large gaps to separate distinct sections while grouping related content tightly.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetrical with large gaps between major sections and tighter grouping within content blocks.

## 5. Surfaces

Surfaces are defined by absence rather than addition. The system relies entirely on whitespace for separation, forgoing visible borders, shadows, or any decorative treatment.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None visible on the main interface elements; relies on whitespace for separation.

## 6. Layout

The layout skeleton is an asymmetric multi-column grid on desktop, designed to create dynamic visual balance with large photographic elements. This structure gracefully collapses to a single, stacked column on mobile devices.

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

**Skeleton:** Asymmetric multi-column grid on desktop; single column stacking on mobile.

## 7. Motion & Interaction

Motion is understated and refined, serving only to acknowledge interaction and smooth transitions. Elements fade and shift with a consistent 300ms duration, using subtle opacity and scale transforms to feel responsive without being theatrical.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity fades for images and elements on scroll
  - Subtle scale and translate transforms on hover

- **Hover:** Subtle opacity reduction or slight scale increase on interactive elements.
- **Click:** Immediate navigation or transition.
- **Transition:** All properties transition over 300ms with a smooth ease-out curve.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is confident and professional, using bold, declarative headlines in massive type. Navigation is communicated through minimal text links, often paired with a simple arrow icon.

- **Tone:** Confident, understated, and professional.
- **Headline style:** Bold, declarative statements in massive typography.
- **CTA style:** Minimalist text links, often accompanied by a simple arrow icon.
- **Avoid:** Excessive adjectives or marketing fluff / Bright, clashing color palettes / Decorative UI elements like shadows or rounded corners / Dense blocks of body text

### Don'ts
- ❌ don't use bright accent colors — screenshot shows a strict black and white palette
- ❌ don't add drop shadows to images — screenshot shows clean, flat presentation
- ❌ don't use centered text alignment — screenshot shows strong left-aligned typography
- ❌ don't use rounded corners on containers — screenshot shows sharp, rectangular edges
- ❌ don't use serif fonts for headlines — screenshot shows a bold, modern grotesque sans-serif
- ❌ don't clutter the UI with icons — screenshot relies on text and imagery for navigation

The system deliberately avoids dense body text, decorative UI elements, and any form of marketing fluff.

## System Prompt (paste into AI tool)

```
This design represents a premium, minimalist design studio portfolio. It utilizes a strict monochromatic palette of pure black (#000000) and white (#FFFFFF) to create high contrast and focus. The typography is a bold, modern grotesque sans-serif used at massive scales for impact. The layout is an asymmetric grid that prioritizes large, high-quality photography. Critical constraints: avoid all bright accent colors, do not use rounded corners or drop shadows, and maintain strict left-alignment for all text. The interaction model is subtle, relying on smooth 300ms transitions for hover states.
```