---
title: "Ana Cuna design system"
variant: extended
source: https://anacuna.com/
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/anacuna-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ana Cuna · Design System

> A portfolio paced by bold type and playful detail.

**Theme:** light · **Industry:** portfolio · **Source:** https://anacuna.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Ana Cuna’s homepage presents a broad creative portfolio as a long, typographic index on a white canvas. Oversized uppercase project titles, fine horizontal rules, and small pill-shaped client labels create a crisp editorial rhythm, with pale pink reserved for the identity button.

## North star

Let oversized uppercase project titles and fine black rules define the page, with pink used only as a restrained identity accent.

## Overview

The page is built around a near-monochrome palette: white dominates the canvas, black carries almost all typography and outlines, and a soft pale pink marks the ANA CUNA identity pill. The layout is intentionally sparse at the top, then shifts into a dense vertical project index separated by thin black rules. Large uppercase titles act as the primary visual content, while compact, rounded client or platform labels sit alongside them as secondary metadata. A single regular-weight grotesk family keeps navigation, headlines, and small labels visually related; scale and case, rather than weight changes, establish hierarchy. The header distributes the identity, shop link, language selector, and cart across the page width. Project imagery exists across the full page, but the first viewport foregrounds whitespace and typography. Keep spacing generous around the header and section start, then let repeated ruled rows build momentum.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and the unfilled background of outlined controls and project rows. |
| Ink | `#000000` | `--color-ink` | neutral | Primary text, oversized project titles, navigation, button outlines, and fine row separators. |
| Blush Signal | `#ffc8c8` | `--color-blush-signal` | accent | Pale pink fill for the ANA CUNA identity pill; keep it as a small brand accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink) · `--color-border` → `#000000` (Ink) · `--color-accent` → `#ffc8c8` (Blush Signal) · `--color-on-accent` → `#000000` (Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffc8c8` | `#ffffff` | 1.46:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCMonumentGrotesk-Regular | `--font-body` | webfont | 400 | Shared family for display titles, navigation, project labels, and body copy. | Space Grotesk |

- **ABCMonumentGrotesk-Regular:** Regular weight throughout; uppercase display and navigation, with hierarchy driven chiefly by scale and case.

### Type scale — Custom (ratio ≈ 2.469, base 15.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 94.5px | 400 | 1 | 0 | uppercase | ABCMonumentGrotesk-Regular | Oversized uppercase project titles in the portfolio index. |
| h1 | 31px | 400 | 1 | 0 | uppercase | ABCMonumentGrotesk-Regular | Uppercase primary page or section heading. |
| body | 15.5px | 400 | 1.11 | 0 | — | ABCMonumentGrotesk-Regular | Supporting project descriptions and general copy. |
| caption | 10.5px | 400 | 1 | 0 | — | ABCMonumentGrotesk-Regular | Compact client and platform labels beside project titles. |
| button | 31px | 400 | 1 | 0 | uppercase | ABCMonumentGrotesk-Regular | Large uppercase text in pill-shaped calls to action. |
| nav | 15.5px | 400 | 1.11 | 0 | uppercase | ABCMonumentGrotesk-Regular | Uppercase header navigation and language controls. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 21, 38, 74 px.
- Section rhythm 38px · element gap — · card padding — · max content width —.

A full-width header anchors a largely open white canvas, with the work index beginning well below the top navigation. The portfolio is a single vertical column rather than a card grid: each project occupies a ruled row, with its large title aligned left and a small label positioned alongside. Headings remain left aligned, and the repeated horizontal separators establish the section rhythm. The list becomes visually dense through repetition, while the broad empty opening preserves a gallery-like pause.

## Shape & elevation

- Radius: button `9999px` · nav `50%` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The visual system is flat, without measured shadows or gradients. Thin black outlines define the pill controls and horizontal rules divide project rows. Use the white canvas as the only broad surface; rounded pills are the main contrasting shape, with no floating-card layering.

## Imagery

The page includes many project images across its full length, but the supplied first viewport is defined by whitespace and typography rather than a prominent image. Treat imagery as project-specific content, not as a common color system: preserve each asset’s own palette and let the clean white canvas and black typography frame it. Avoid adding decorative illustration or image treatments unsupported by the reference.

## Components

### Identity pill

Uppercase ANA CUNA text in a pale pink (#ffc8c8) pill with a thin black outline and rounded ends.

### Shop control

Large uppercase SHOP label inside a white pill with a fine black border.

### Header utilities

Compact language selector and cart sit at the right edge; the active language appears as a black circular control with white text.

### Project index row

One oversized, left-aligned uppercase project title sits between thin black horizontal rules.

### Client label

Small outlined, rounded label placed beside a project title to identify a client or platform.

### Project link

Text-led project links use black typography and a fine outline treatment where shown.

### Measured component styles

- **Primary button** (“ANA CUNA”): background #ffc8c8 · text #000000 · border 1px solid #000000 · radius 27.4285px · padding 7.7px 13.7px 6px 13.7px · 400 30.8572px ABCMonumentGrotesk-Regular · uppercase
- **Secondary button** (“SHOP”): transparent background · text #000000 · border 1px solid #000000 · radius 27.4285px · padding 7.7px 13.7px 6px 13.7px · 400 30.8572px ABCMonumentGrotesk-Regular · uppercase
- **Link** (“INDIE GAMES FESTIVAL Google Play”): transparent background · text #000000 · border 1px solid #000000 · radius 0px · padding 0px · 400 30.8572px ABCMonumentGrotesk-Regular
- **Navigation item** (“ANA CUNA SHOP PLAY ABOUT ES EN 0”): transparent background · text #000000 · radius 0px · padding 0px · 400 30.8572px ABCMonumentGrotesk-Regular

## Do

- Use white as the dominant canvas.
- Set project titles in oversized uppercase type.
- Separate index rows with fine black rules.
- Keep client labels small and pill-shaped.
- Reserve pale pink for the identity accent.
- Maintain a broad empty pause above the project list.

## Don't

- Do not introduce unmeasured palette colors.
- Do not use gradients or drop shadows.
- Do not turn the portfolio into a card grid.
- Do not use bold weights to create hierarchy.
- Do not crowd the header with decorative elements.
- Do not let imagery overpower the typographic index.

## Agent prompt

Build a new page in Ana Cuna’s restrained editorial portfolio style. Use Gallery White (#ffffff) as the canvas and Ink (#000000) for type, outlines, and separators; reserve Blush Signal (#ffc8c8) for a small identity pill. Use a clean regular-weight grotesk, with uppercase display titles and navigation. Make the header span the page width, with identity at left, a pill-shaped shop control near the center, and language/cart utilities at right. Give the top of the page generous open space, then present content as a single-column index of large left-aligned titles, separated by fine horizontal rules. Place compact outlined client labels beside relevant titles. Keep the composition flat: no shadows, gradients, or decorative cards. Use project imagery only where it supports the content, allowing its own palette to remain secondary to the overall structure.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Single-column, full-width sequence of left-aligned project titles with thin horizontal separators. | linked project rows, client labels, long-scroll browsing | oversized uppercase titles, fine divider lines, outlined pill labels |

## Source CSS custom properties (selected)

```css
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/anacuna-com