# Diogoakio Com Br · Design system migration spec

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

> This site is a strong example of using extreme restraint and high contrast to create a premium, focused portfolio experience.

## 1. Identity DNA

The system establishes itself as a digital gallery with curated, high-contrast exhibitions, where the architecture is defined not by ornament but by the precise placement of type and image. Every component serves the portfolio's core narrative, treating the interface as a clean, dark-walled space for showcasing work with cinematic clarity.

**One-liner:** A refined portfolio site for an independent designer & art director, focusing on bold typography and a dark, immersive gallery experience.
**Keywords:** design · art direction · digital experiences · independent · portfolio
**Analogy:** A digital gallery with curated, high-contrast exhibitions.

## 2. Color

The palette operates on a principle of stark, monochrome contrast, anchoring the entire composition on a near-black background. This creates a high-contrast stage where white text and photography command primary attention, with a single muted accent providing minimal, strategic emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#151515` | main background |
| `--bg-soft` | `#1C2763` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#999999` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.15)` | divider |

**Color principle:** High contrast and restraint, using a dark backdrop to let photography and typography stand out.

This strict restraint ensures the visual focus remains on content, treating color as a functional tool for hierarchy rather than a decorative element.

## 3. Typography

Typography is the primary structural element, using a humanist sans-serif in a consistent 400 weight to maintain a clean, unadorned voice. Display type employs negative letter-spacing for declarative impact, while body text uses positive letter-spacing for readability, establishing a clear typographic hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 34px | 1.1 | 400 | -0.32px | Primary hero statement |
| body | 16px | 1.4 | 400 | 0.32px | Body text and navigation |

**Type rules:**
- All text uses a 400 weight.
- Display uses negative letter-spacing, body uses positive letter-spacing.
- Typography is the primary structural element.

## 4. Spacing

A consistent 30px gap defines major section separations, creating a rhythmic cadence across the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 30 / 48 px
- **Rhythm:** A consistent 30px gap defines major section separations.

## 5. Surfaces

Surfaces are flat and borderless, with depth and separation achieved entirely through spacing and background contrast. There are no shadows or decorative borders; the interface relies on the clean edges of content blocks against the dark backdrop.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal to non-existent; separation is achieved through spacing and background contrast.

## 6. Layout

The layout is built on a full-bleed dark canvas, anchored by a massive, top-aligned typographic hero statement that frames the entire page. Below this, a grid-based portfolio gallery organizes projects into large photographic cards or clean text blocks.

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

**Skeleton:** A full-bleed dark canvas with a prominent top-aligned hero statement and a grid-based portfolio gallery.

## 7. Motion & Interaction

Motion philosophy is one of subtle, utilitarian smoothness, applied uniformly through a global transition on all elements. Interactions focus on understated reveals and state changes, ensuring the user's focus shifts seamlessly between portfolio views without visual disruption.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - All elements have a standard 'all' transition applied for smooth state changes.

- **Hover:** Visual feedback likely involves subtle color shifts or reveals on interactive elements.
- **Click:** Transitions to reveal more content, such as the project overlay.
- **Transition:** A global 'all' transition is applied to elements, ensuring smooth movement.
- **Keyboard:** Not explicitly shown, but standard navigation is expected.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and professional, using declarative headlines and understated functional calls-to-action. It avoids excessive decoration, loud colors, and complex jargon, adhering to a strict minimalism in both language and visual expression.

- **Tone:** Confident, direct, and professional.
- **Headline style:** Declarative and straightforward, using the designer's name as the primary hook.
- **CTA style:** Understated and functional, such as 'Ver matéria'.
- **Avoid:** Excessive decoration / Loud colors / Complex jargon

### Don'ts
- ❌ Don't use a white background — the screenshot shows a dominant dark theme.
- ❌ Don't use bold font weights — the screenshot shows a consistent 400 weight.
- ❌ Don't add drop shadows — the screenshot shows flat, surface-level depth.
- ❌ Don't use a wide variety of colors — the screenshot shows a strictly monochrome palette.
- ❌ Don't use rounded corners on elements — the screenshot shows sharp, square edges.
- ❌ Don't use complex decorative borders — the screenshot relies on spacing for separation.

The system deliberately excludes decorative flourishes like rounded corners, drop shadows, and multi-color palettes, committing instead to a rigorously minimal and high-contrast framework.

## System Prompt (paste into AI tool)

```
Design DNA for Diogo Akio's portfolio site. This is a refined, high-contrast portfolio for an independent designer and art director. The design is anchored by a dark theme (bg #151515) and white typography (ink #FFFFFF), with a muted accent color (#1C2763) and gray text (#999999). Typography is a humanist sans-serif (HelveticaNeueLTPro-Roman) used in a 400 weight. The layout is a full-bleed dark canvas with a prominent typographic hero and a grid-based gallery. Critical donts: Never use a white background, never use bold font weights, and never use rounded corners or drop shadows. The site prioritizes editorial clarity and a cinematic gallery feel.
```