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

# Rou Hun Fan · Design System

> Oversized type, dark canvas, unapologetic portfolio

**Theme:** dark · **Industry:** portfolio · **Source:** https://flowen.me/ · **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._

Rou Hun Fan’s portfolio pairs a near-black canvas with oversized white typography and expressive project imagery. The result feels like a personal editorial poster: compact, energetic, and intentionally unconventional.

## North star

Treat oversized uppercase typography as the layout itself, set against a quiet charcoal canvas and interrupted by vivid project imagery.

## Overview

The page is built around a near-black charcoal canvas (#161b1b) that occupies nearly the entire visual field, creating strong contrast for white (#ffffff) type. Oversized, uppercase lettering is the main visual structure rather than a supporting layer: a heavy, monospaced display face sets the name and service list, while a narrow decorative face adds a contrasting editorial voice to selected phrases and supporting copy. The composition is deliberately irregular, with the name spread across the top and service labels aligned as a bold left-hand stack. Project imagery interrupts and overlaps the typography, giving the page a collage-like, poster feel. Red (#ff0000) appears as an accent in project lettering, not as the dominant interface colour; vivid cyan and other bright hues belong to embedded project artwork and should not be mistaken for the site palette. Generous dark negative space keeps the dense type and images legible without conventional cards or ornamental UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Canvas | `#161b1b` | `--color-charcoal-canvas` | brand | Page-wide background; its near-black tone frames all typography and project media. |
| Poster White | `#ffffff` | `--color-poster-white` | neutral | Primary name, service headings, navigation, and high-contrast supporting text. |
| Project Red | `#ff0000` | `--color-project-red` | accent | Expressive lettering within project visuals; keep it secondary to the charcoal-and-white interface. |

### Semantic aliases

`--color-canvas` → `#161b1b` (Charcoal Canvas) · `--color-text` → `#ffffff` (Poster White) · `--color-accent` → `#ff0000` (Project Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#161b1b` | 17.4:1 | AAA |
| `#ff0000` | `#161b1b` | 4.35:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| AzeretMono Black | `--font-mono` | webfont | 700, 400 | Heavy uppercase name, navigation, service labels, and code-like details | Space Mono |
| Ephidona | `--font-body` | webfont | 400 | Decorative display and supporting editorial phrases | Bodoni Moda |

- **AzeretMono Black:** Use a bold monospaced treatment, uppercase, and strong block-like forms; maintain the measured weight contrast.
- **Ephidona:** Use the distinctive narrow, high-contrast display character for selected phrases; keep uppercase styling and contrast with the mono face.

### Type scale — Minor Second (ratio ≈ 1.08, base 100px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 108px | 400 | 1.2 | 0 | uppercase | Ephidona | Decorative, oversized project and editorial headings. |
| body | 100px | 400 | 1.2 | 0 | uppercase | Ephidona | Large uppercase supporting copy and statements. |
| nav | 100px | 700 | 1.2 | 0 | uppercase | AzeretMono Black | Bold uppercase identity and navigation labels. |
| code | 100px | 700 | 1.2 | 0 | uppercase | AzeretMono Black | Bold uppercase numeric or code-like details. |

OpenType features in use: `"aalt"`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 9, 90, 135 px.
- Section rhythm 90px · element gap — · card padding — · max content width 1067px.

The measured content uses a 1067px maximum width and a comfortable density, with a 90px section rhythm. The page is left-aligned and visually assembled rather than divided into conventional cards: the name spans the upper row, service labels form a large left column, and project imagery occupies adjacent space. At the first viewport, media overlaps the service typography and the lower portrait begins beside supporting copy. Preserve generous dark gaps while allowing selected elements to collide or cross-align for a poster-like composition.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface is visually flat: no measured shadows, gradients, or card treatments define the page. Use the charcoal canvas as the continuous surface, and rely on contrast, image placement, and typographic overlap for depth. Keep borders and framing subordinate; any strong edge belongs to the project artwork itself.

## Imagery

Use project screenshots and personal photography as prominent, rectangular inserts rather than decorative background textures. The visible portrait is a candid, environmental photograph; project artwork is vivid and varies in palette. Let media sit close to or overlap large type. Keep embedded artwork colors confined to their image regions rather than promoting them to interface tokens.

## Components

### Name masthead

Set the creator’s name in bold, uppercase white monospaced lettering, distributed across the top of the composition.

### Service stack

Present UI, design, motion, and frontend as a large left-aligned uppercase typographic list.

### Project artwork

Place vivid rectangular project imagery beside or across the service lettering; treat its colors as artwork, not interface tokens.

### Experience statement

Pair a personal photo with narrow decorative uppercase copy about years of experience and business growth.

### Availability line

Show availability as a high-contrast uppercase status near the lower part of the hero composition.

### Contact links

Use simple uppercase text links and an arrow cue; keep them flat and visually integrated with the typography.

### Measured component styles

- **Link**: transparent background · text #ffffff · radius 0px · padding 0px · 700 100px AzeretMono Black · uppercase
- **Navigation item** (“ROU”): transparent background · text #ffffff · radius 0px · padding 0px · 700 100px AzeretMono Black · uppercase

## Do

- Use #161b1b as the continuous page canvas.
- Set primary statements in uppercase white type.
- Use the monospaced face for bold, structural labels.
- Contrast it with decorative display lettering for selected phrases.
- Let project imagery interrupt the text composition.
- Keep interface colors restrained and high contrast.

## Don't

- Do not turn project-image colors into site-wide palette colors.
- Do not add conventional rounded cards or shadows.
- Do not center every element into a uniform grid.
- Do not use small, quiet typography for the main identity.
- Do not add gradients unsupported by the measured design.
- Do not make red the dominant page background or CTA color.

## Agent prompt

Build a new portfolio page in Rou Hun Fan’s expressive editorial style. Use Charcoal Canvas (#161b1b) as the continuous background and Poster White (#ffffff) for the dominant uppercase typography. Establish hierarchy with a heavy monospaced face for identity, navigation, and service labels, contrasted by a narrow decorative display face for selected editorial phrases. Compose the content like a poster rather than a standard card grid: left-align oversized service text, distribute the name across the upper area, and let rectangular project images overlap or interrupt the type. Use Project Red (#ff0000) sparingly, especially where it belongs to project artwork. Keep surfaces flat, avoid ornamental UI, and preserve dark negative space around dense visual clusters. Make contact and availability readable but visually part of the composition.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | A single dark, left-aligned composition combining a name masthead, oversized service stack, project media, portrait, and contact details. | prominent identity, service overview, availability status, contact links | uppercase display type, overlapping project imagery, dark canvas, editorial collage |

## Source CSS custom properties (selected)

```css
--fonts-fontBase: "AzeretMono Black", monospace, Arial, -apple-system, BlinkMacSystemFont;
--fonts-fontAlt: "Ephidona", monospace, Arial, -apple-system, BlinkMacSystemFont;
--color-yellow: #f0f26a;
--color-magenta: #e82f5c;
--color-pink: #ffa8a8;
--color-offWhite: #fff5d6;
--color-dark: #161b1b;
--color-grey: #b3aba4;
--duration-fast: 0.125;
--duration-normal: 0.25;
--duration-slow: 0.5;
--duration-slower: 1.5;
--duration-slowest: 2.25;
--font-base: "AzeretMono Black", monospace, Arial, -apple-system, BlinkMacSystemFont;
--font-alt: "Ephidona", monospace, Arial, -apple-system, BlinkMacSystemFont;
--ease-in: cubic-bezier(.895, .03, .685, .22);
--ease-out: cubic-bezier(.165, .84, .44, 1);
--ease-in-out: cubic-bezier(.64, .04, .35, 1);
--ease-bounce: cubic-bezier(.175, .885, .32, 1.275);
```

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