# Anacuna · Design system migration spec

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

> This site is an excellent example of extreme typographic minimalism, where text size and weight alone create a powerful visual identity without the need for complex imagery or color.

## 1. Identity DNA

Anacuna operates on the principle of typographic mass as architecture, where oversized letterforms become the load-bearing structure of the entire layout. The site treats the screen not as a page to be decorated, but as a column to be typeset with monumental confidence.

**One-liner:** A high-contrast, typography-led portfolio showcasing illustration work through oversized text and pill-shaped navigation.
**Keywords:** Illustration Portfolio · Typography-driven · Minimalist · Bold · Editorial
**Analogy:** A minimalist magazine layout that uses massive typography as the primary design element.

## 2. Color

The palette is a study in radical reduction: a binary of black and white, with the sole exception of a muted pink reserved for the logo. This restraint forces the typography itself to carry every ounce of visual communication.

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

**Color principle:** Strict monochrome palette using only black and white, with a single pink accent for the logo.

Color here is not a tool for differentiation but a marker of identity, applied with surgical precision.

## 3. Typography

All text is rendered in uppercase, using a grotesque sans-serif at a uniform, massive scale. This choice creates dense, monolithic text blocks that function more as graphic shapes than as conventional body copy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 94px | 1.0 | 400 | 0px | Project titles and main navigation |
| body | 15px | 1.1 | 400 | 0px | Pill labels, footer text, and metadata |

**Type rules:**
- All text is uppercase
- Main display text is set to a single uniform massive size
- Tight line-height for display text to create dense text blocks

## 4. Spacing

Spacing follows a strict 4px grid, creating a rhythmic pulse that separates the monumental hero text from tighter informational blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Based on a strict 4px grid, with generous vertical padding for hero sections and tight margins for text blocks.

## 5. Surfaces

There is no depth; the surface is a flat plane defined solely by 1px black borders. Shadows and gradients are deliberately excluded to maintain the purity of the graphic field.

- **Radius:** sm 4px · md 8px · lg 27px · pill 999px
- **Borders:** 1px solid black

## 6. Layout

The skeleton is a single column of full-width sections, each separated by a thin horizontal rule. Massive uppercase text acts as both content and primary navigational signpost, spanning the entire viewport width.

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

**Skeleton:** Full-width sections separated by horizontal rules, with massive text acting as the primary structural element.

## 7. Motion & Interaction

Motion is a measured, structural event rather than a decorative layer. Transforms at 0.3s and 0.7s durations govern element reveals and page navigation, using smooth cubic-bezier easing for fluid, physical movement.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 1, 0.5, 1)`
- **Patterns:**
  - Hover transforms with 0.3s duration
  - Page transition transforms with 0.7s duration

- **Hover:** Subtle cursor pointer changes on interactive elements.
- **Click:** Immediate visual feedback via transition.
- **Transition:** Transforms used for page navigation and element reveals.
- **Keyboard:** Standard tab navigation for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional and assured, speaking through the weight of its typography rather than through verbose explanation. It is a voice of minimalist authority, confident in the power of its primary visual element.

- **Tone:** Minimalist, professional, and confident.
- **Headline style:** Massive, all-caps, tight-tracking grotesque sans-serif.
- **CTA style:** Outlined pill buttons with uppercase text.
- **Avoid:** Decorative fonts / Drop shadows / Gradients / Complex color palettes / Rounded corners (except for pill shapes) / Italicized text

### Don'ts
- ❌ Don't use serif fonts — the screenshot shows exclusively uppercase grotesque sans-serif typography.
- ❌ Don't use drop shadows — the screenshot shows flat design with only 1px borders.
- ❌ Don't use gradients — the screenshot shows solid black and white backgrounds.
- ❌ Don't use lowercase text in the main layout — the screenshot shows all text is uppercase.
- ❌ Don't use complex layouts with columns — the screenshot shows single-column full-width rows.
- ❌ Don't use small text for headlines — the screenshot shows project titles spanning the entire viewport width.

The system deliberately forgoes serif fonts, drop shadows, gradients, and lowercase text, committing fully to a high-contrast, typographic-led identity.

## System Prompt (paste into AI tool)

```
This is a minimalist illustration portfolio by Ana Cuna, characterized by a strict monochrome palette (black #000000 on white #FFFFFF) and a single soft pink (#FFC8C8) logo accent. The design relies entirely on massive, uppercase grotesque-sans-serif typography to create structure and hierarchy. Key components include pill-shaped outlined navigation buttons and horizontal rules separating full-width project titles. Avoid any serif fonts, drop shadows, gradients, or lowercase text, as the site maintains a high-contrast, typography-driven aesthetic throughout.
```