# Akaru · Design system migration spec

> Source: https://akaru.fr  ·  Curated by OpenDesign  ·  en

> A masterclass in typography-led design, using custom typefaces and generous whitespace to convey high-end craftsmanship.

## 1. Identity DNA

The Akaru design system is conceived as a high-end architectural monograph: a precise, deliberate composition where every element is placed with structural intention. Its identity is defined by bold geometric forms and meticulous editorial restraint, creating a framework that feels both monumental and refined.

**One-liner:** A bold, minimalist design agency portfolio featuring a custom grotesque typeface and expansive whitespace.
**Keywords:** bold · geometric · editorial · precision
**Analogy:** A high-end architectural firm's monograph.

## 2. Color

Color is treated as an architectural finish—a muted palette of off-white, deep charcoal, and subtle tonal accents that serve as a backdrop for typographic presence. High-contrast typography is the primary agent of visual interest, with the color system providing depth and quiet sophistication.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F1EFEB` | main background |
| `--bg-quiet` | `#BFCCD8` | quiet area |
| `--ink` | `#0E0E0E` | body text |
| `--muted` | `#B692A1` | placeholder |
| `--accent` | `#E49366` | single accent |
| `--line` | `rgba(14, 14, 14, 1)` | divider |

**Color principle:** High contrast typography over muted architectural tones.

The guiding principle is that color should recede, allowing the structural weight of type and layout to command the space.

## 3. Typography

The typographic voice is built on a clear hierarchy: the custom geometric 'Alliance Platt' commands display moments with authority, while the humanist 'Alliance Neue' provides legible, warm support for body text. The system mandates tight letter-spacing for large display text, emphasizing the compact, sculptural quality of the letterforms.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 96px | 0.85 | 700 | -1px | Hero logo and primary headings |
| heading | 32px | 1.2 | 400 | 0 | Section titles |
| body | 16px | 1.5 | 400 | -0.5px | General text |

**Type rules:**
- Use 'Alliance Platt' (serif) for stylized accents if needed, though primarily sans is used.
- Use 'Alliance Neue' (humanist sans) for body and smaller UI text.
- Maintain tight letter-spacing on large display text.

## 4. Spacing

Spacing follows an asymmetrical rhythm, employing generous whitespace as a structural material rather than empty void.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 130 px
- **Rhythm:** Asymmetrical with generous whitespace.

## 5. Surfaces

Surfaces are defined by precision rather than decoration, using single-pixel inset shadows and borders to create subtle depth. The approach avoids heavy drop shadows, relying instead on crisp, architectural linework to delineate space.

- **Radius:** sm 4px · md 8px · lg 30px · pill 999px
- **Shadows:**
  - inset 0 0 0 1px #0E0E0E
  - inset 0 0 0 1px rgba(255, 255, 255, 0.2)
- **Borders:** 1px solid #0E0E0E

## 6. Layout

The foundational layout is an asymmetrical split-screen, where massive left-aligned typography occupies one half of the viewport. This creates a strong visual axis, pairing typographic weight with large photographic blocks in a dynamic, unbalanced composition.

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

**Skeleton:** Asymmetric split-screen layout with large left-aligned typography.

## 7. Motion & Interaction

Motion is governed by precision and naturalism, using cubic-bezier easing to create smooth, physically plausible transitions. The philosophy is one of subtle refinement—micro-interactions like color shifts and opacity changes occur with deliberate, unhurried timing.

- **Durations:** micro 300ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.165, 0.84, 0.44, 1)`
- **Patterns:**
  - Smooth color and opacity transitions on hover.
  - Cubic-bezier easing for natural feel.

- **Hover:** Smooth color transition over 0.3s.
- **Click:** Subtle opacity or color shift.
- **Transition:** All transitions follow a 0.3s to 0.5s cubic-bezier curve.
- **Keyboard:** Standard focus states with potential outline visibility.

## 8. Voice & Don'ts

The editorial voice is professional and confident, mirroring the meticulous craft of the visual design. Headlines are minimalist and large-scale, while interactions use high-contrast, pill-shaped elements that reject generic UI conventions.

- **Tone:** Professional, confident, and meticulous.
- **Headline style:** Minimalist, large-scale, and visually dominant.
- **CTA style:** Pill-shaped buttons with high contrast.
- **Avoid:** Overly decorative elements / Vibrant neon colors / Dense text blocks / Generic sans-serif fonts

### Don'ts
- ❌ Don't use thin font weights — screenshot shows heavy, bold typography for display.
- ❌ Don't clutter the layout with small elements — screenshot shows expansive, clean whitespace.
- ❌ Don't use standard system fonts — screenshot features a highly customized geometric display font.
- ❌ Don't use bright, saturated backgrounds — screenshot shows a muted, off-white (#F1EFEB) base.
- ❌ Don't use square buttons — screenshot shows pill-shaped (999px) buttons and elements.
- ❌ Don't center all content — screenshot shows a strong left-aligned, asymmetrical layout.

This system deliberately excludes thin typography, cluttered layouts, standard fonts, vibrant neon colors, square buttons, and centered content.

## System Prompt (paste into AI tool)

```
This is a high-end design agency website characterized by a minimalist, bold aesthetic. The layout is asymmetrical, using a massive custom geometric display typeface ('Alliance Platt') for the hero and 'Alliance Neue' for body text. The color palette is dominated by a warm off-white background (#F1EFEB) and deep charcoal ink (#0E0E0E), accented with muted architectural tones like dusty rose (#B692A1), pale blue (#BFCCD8), and a single pop of terracotta (#E49366). Critical donts: never use thin typography; always maintain generous whitespace; never use standard UI button shapes—use pill-shaped ones instead. The design is premium, editorial, and architectural in feel.
```