Ana Cuna

以大胆字体和灵动细节呈现作品集A portfolio paced by bold type and playful detail.

浅色主题个人作品集creative portfolio homepage极简编辑风黑白字体排版边框线原网页 anacuna.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
Ana Cuna 首屏

Ana Cuna 首页以白色画布和纵向项目索引呈现丰富的创意作品。醒目的大写标题、纤细横线与小巧的客户标签形成清晰的编辑节奏,浅粉色则点缀品牌按钮。

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

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.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

强调色
表层色
中性色
页面底色 · Gallery White主文字 · Ink描边 · Ink强调 · Blush Signal
文字背景对比度WCAG
#000000 Ink#ffffff Gallery White21:1AAA
#ffc8c8 Blush Signal#ffffff Gallery White1.46:1不达标

字体

字号阶梯:Custom(比例约 2.469,正文 15.5px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

ABCMonumentGrotesk-Regular

网络字体 · 字重 400 · 占比 100%
免费替代:Space Grotesk

Shared family for display titles, navigation, project labels, and body copy.

角色示例字号字重行高字距
特大标题
Oversized uppercase project titles in the portfolio index.
Ana Cuna
94.5px40010
一级标题
Uppercase primary page or section heading.
Ana Cuna
31px40010
正文
Supporting project descriptions and general copy.
The quick brown fox 敏捷的狐狸
15.5px4001.110
辅助文字
Compact client and platform labels beside project titles.
The quick brown fox 敏捷的狐狸
10.5px40010
按钮
Large uppercase text in pill-shaped calls to action.
Ana Cuna
31px40010
导航
Uppercase header navigation and language controls.
The quick brown fox 敏捷的狐狸
15.5px4001.110

间距与布局

基准单位 2px · 密度:适中

38px版块间距
—元素间距
—卡片内边距
—内容最大宽度
2px
4px
6px
8px
10px
12px
14px
21px
38px
74px

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.

圆角与层次

按钮 · 9999px
导航 · 50%

没有测到阴影:页面是扁平的,层次靠底色和描边区分。

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.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。

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.

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.

页面版块

共 1 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • 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.

✕ 不该做

  • 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.

给 AI 的提示词

想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。

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.

相似风格

Ana Cuna 设计系统 — 配色、字体与 DESIGN.md | Design DNA