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

# Cori Corinne — Portfolio · Design System

> Quiet canvas, oversized type, personal imagery.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.coricorinne.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._

A pared-back portfolio homepage led by a large typographic name and paired personal photographs. Compact navigation and social links keep the focus on the work and its author.

## North star

Let one oversized editorial name and unframed personal photography carry the page, keeping navigation and interface details quiet.

## Overview

The page uses a quiet, warm off-white canvas (#f6f5f0) with black (#000000) as the strongest typographic contrast. The measured white surface (#ffffff) supports the page canvas, while muted charcoal (#292a2c) appears in navigation text; the screenshot’s brown and gray tones belong to the photographs, not the core interface palette. A small sans-serif navigation sits across the top, followed by an exceptionally large, high-contrast serif rendering of the creator’s name. This display treatment is distinct from the measured Neue Haas Grotesk Text body and navigation font, so do not force the measured sans-serif onto the oversized title. Two large photographs sit side by side beneath the title and dominate the lower viewport. The composition is edge-led and spacious, with little interface chrome, no visible card framing, and social links aligned along the bottom.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Primary contrast for the oversized name, brand mark, and social link text. |
| Warm Paper | `#f6f5f0` | `--color-warm-paper` | brand | Warm off-white canvas behind the navigation and large display title. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Measured white surface supporting the page canvas; not a prominent contrasting section band in the screenshot. |
| Soft Charcoal | `#292a2c` | `--color-soft-charcoal` | neutral | Muted navigation text, providing a softer alternative to the black title and logo. |

### Semantic aliases

`--color-canvas` → `#f6f5f0` (Warm Paper) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Editorial Ink) · `--color-text-muted` → `#292a2c` (Soft Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f6f5f0` | 19.24:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#292a2c` | `#f6f5f0` | 13.16:1 | AAA |
| `#292a2c` | `#ffffff` | 14.37:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| neue-haas-grotesk-text | `--font-body` | webfont | 400 | Measured body and navigation type; used for the compact brand mark and interface text. | Inter |

- **neue-haas-grotesk-text:** Measured regular weight, normal tracking, and no text transform; keep interface copy clean and unembellished.

### Type scale — Major Third (ratio ≈ 1.25, base 30px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 30px | 400 | 1 | 0 | — | neue-haas-grotesk-text | Supporting text and social links, set in a clean sans-serif style. |
| nav | 30px | 400 | 1 | 0 | — | neue-haas-grotesk-text | Top navigation and compact C+C brand mark. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 30, 70, 125 px.
- Section rhythm 125px · element gap — · card padding — · max content width —.

A slim navigation row spans the top, with the C+C mark at the left and page links aligned to the right. The large name runs nearly edge to edge below it, acting as the hero heading rather than sitting in a constrained text column. A pair of adjacent, full-width photographic panels follows immediately. The measured page is spacious, with a large section gap scale and no measured max-width or component padding; preserve the open composition without inventing fixed dimensions.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s linear` on interactive elements.

The interface reads as flat and unboxed: measured data reports no shadows, gradients, or border system. Avoid cards, outlines, and raised controls. Let the canvas-to-image transition and the typography provide structure, with photographs placed directly into the page composition.

## Imagery

Use large photographic portraits rather than illustration or product mockups. The visible pair contrasts a softly focused, close portrait with a sharper rear-facing portrait in a reflective setting. Keep images prominent, side by side, and minimally treated; their warm browns and grays are photographic content, not UI palette colors.

## Components

### Brand mark

A small black C+C wordmark anchors the top-left of the navigation.

### Primary navigation

A right-aligned row of About, Work, Teaching, Artifacts, and Contact links with muted charcoal text.

### Display name

An oversized, high-contrast serif name dominates the warm canvas; reproduce its editorial contrast rather than styling it like body text.

### Portrait gallery

Two large personal photographs sit adjacent beneath the name, with little or no visible framing.

### Social links

Instagram, LinkedIn, and Behance appear as simple black text links along the lower edge.

### Copyright

A compact ©2021 label sits at the bottom-right, aligned with the social links.

### Measured component styles

- **Link** (“Instagram”): transparent background · text #000000 · radius 0px · padding 0px · 400 30.0001px Open Sans
- **Navigation item** (“C+C About Work Teaching Artifacts Contac”): transparent background · text #292a2c · radius 0px · padding 0px · 400 18px Open Sans

## Do

- Use the warm off-white canvas as the main backdrop.
- Make the creator’s name the dominant typographic element.
- Keep the C+C mark at the far left of the top navigation.
- Align the primary page links across the top-right.
- Use large, adjacent personal photographs as the main visual content.
- Keep social links and copyright understated.

## Don't

- Do not introduce bright accent colors unsupported by the measured palette.
- Do not put photographs inside elevated cards.
- Do not add decorative borders or shadows.
- Do not crowd the canvas with extra interface elements.
- Do not treat photographic browns and grays as brand UI colors.
- Do not force the measured sans-serif body font onto the display title.

## Agent prompt

Build a portfolio page in the style of Cori Corinne: an open, editorial composition with a Warm Paper canvas (#f6f5f0), Editorial Ink text (#000000), and restrained Soft Charcoal navigation (#292a2c). Place a compact C+C mark on the upper left and a quiet row of page links on the upper right. Give the creator’s name oversized, high-contrast serif display treatment; this title is visually distinct from the measured Neue Haas Grotesk Text interface font. Follow it with large, adjacent personal photographs, without card frames or decorative overlays. Keep social links and copyright small and unobtrusive. Use generous whitespace and flat surfaces; do not add shadows, borders, gradients, or invented accent colors. Preserve the photographs’ own color as image content rather than expanding the interface palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Top-aligned navigation, oversized name title, paired full-width portraits, and a bottom row of social links and copyright. | direct section navigation, social profile links | warm neutral canvas, oversized serif title, paired photography, minimal chrome |

## 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/coricorinne-com