# Leonatsume · Design system migration spec

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

> An excellent reference for how to balance massive 3D character artwork with ultra-clean, minimalist UI design.

## 1. Identity DNA

This system is engineered as a high-end creative studio portfolio, where the design framework recedes to let the artwork speak. It operates on the principle of a pristine gallery wall—a neutral, unobtrusive backdrop that provides maximum visual contrast for the complex, colorful 3D characters and illustrations it hosts.

**One-liner:** A premium 3D character design portfolio showcasing emotional digital experiences.
**Keywords:** 3D Character Artist · Digital Design · Emotional Design · Illustration · Animation
**Analogy:** A high-end creative studio portfolio that lets the artwork take center stage.

## 2. Color

The color system is built on a neutral canvas of off-white and light gray, providing a clean, expansive field. A single, high-chroma red accent is reserved for critical branding moments, creating a focal point without competing with the artwork's palette.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FAFAFA` | main background |
| `--bg-soft` | `#EEEEEA` | card background |
| `--ink` | `#1C1D20` | body text |
| `--ink-soft` | `#8B8B8B` | secondary text |
| `--muted` | `#0000EE` | placeholder |
| `--accent` | `#F41111` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Neutral canvas with high-chroma accents to let colorful 3D artwork pop.

The principle is deliberate restraint, using color not for decoration but as a strategic tool to guide focus.

## 3. Typography

Typographic voice is set in a clean geometric sans-serif family, maintaining a consistent weight of 400 to preserve elegance and legibility. The hierarchy is established through massive scale rather than weight variation, with impactful headlines and clear descriptive text.

- **Display:** geometric-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 65px | 1.0 | 400 | -1px | Hero name and section titles |
| body | 18px | 1.5 | 400 | 0px | Descriptive text and project details |

**Type rules:**
- All typography is set to a weight of 400.
- Font stack relies heavily on Arial and Helvetica for fallback consistency.

## 4. Spacing

Generous whitespace is the primary rhythmic device, creating clear separation between large 3D elements and structured content rows.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace to separate large 3D elements and list rows.

## 5. Surfaces

Surfaces are defined by depth through minimal means. Subtle, near-transparent shadows and barely-there borders provide just enough definition to separate elements from the flat, neutral background.

- **Radius:** sm 3px · md 15px · lg 20px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0) 0.78px 1.84px 8px 1px
- **Borders:** 1px solid rgba(0,0,0,0.1)

## 6. Layout

The skeletal structure follows a standard hero-to-list flow, beginning with a full-viewport introduction. Projects are then presented in a horizontal list layout, balancing large typography with thumbnail imagery in a clear, single-column sequence.

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

**Skeleton:** A standard hero section followed by a horizontal list layout for projects.

## 7. Motion & Interaction

Motion philosophy is one of functional minimalism. Transitions are brief, serving only to confirm interactive state changes like hover visibility and background color shifts, ensuring content clarity remains the priority.

- **Durations:** micro 100ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Visibility toggles and basic CSS transitions for simple hover states.

- **Hover:** Simple pointer cursor interactions on links and buttons.
- **Click:** Standard link navigation.
- **Transition:** 0.1s to 0.4s transitions for visibility and background colors.
- **Keyboard:** Standard sequential navigation.

## 8. Voice & Don'ts

The editorial voice is confident and artistically expressive, communicated through short, impactful headlines. The design deliberately avoids visual noise, complex grids, and aggressive ornamentation.

- **Tone:** Confident, professional, and artistically expressive.
- **Headline style:** Short, impactful, and set in massive geometric sans-serif typography.
- **CTA style:** Clean, pill-shaped, and understated.
- **Avoid:** Complex multi-column grids / Dense text blocks / Aggressive drop shadows

### Don'ts
- ❌ Don't use dark mode — screenshot shows a bright white/off-white background.
- ❌ Don't use serif fonts — screenshot shows clean geometric and grotesque sans-serifs.
- ❌ Don't clutter the layout — screenshot shows generous whitespace and a single-column list.
- ❌ Don't use heavy borders or shadows — screenshot shows a flat design with subtle or no borders.
- ❌ Don't use heavy font weights — screenshot shows almost exclusively 400-weight typography.
- ❌ Don't use busy backgrounds — screenshot shows flat neutral colors behind the 3D artwork.

It deliberately refrains from dark mode, serif typography, heavy borders, and font weights beyond medium, adhering to a philosophy of pure, uncluttered presentation.

## System Prompt (paste into AI tool)

```
Design a premium, clean 3D artist portfolio that focuses on emotional character design and digital illustration. Use a minimal, neutral background palette with off-white and light gray, contrasted against a single vibrant red accent for key branding elements like the logo. Maintain a strictly clean geometric-sans typography approach, keeping weights light to medium to preserve elegance. The layout should be spacious and highly structured, allowing large 3D renders and massive typography to dominate the visual hierarchy. Key hex values include #FAFAFA for the background, #1C1D20 for text, and #F41111 for the accent. Avoid dark modes, serif fonts, and any visual clutter. Never use font weights heavier than 500, and keep component borders invisible or extremely subtle.
```
