# Flowen Me · Design system migration spec

> Source: https://flowen.me  ·  Curated by OpenDesign  ·  en

> This site is a prime example of brutalist web design, using extreme typographic scale and high contrast to create a memorable and impactful developer portfolio.

## 1. Identity DNA

The design system for Flowen Me operates like a **brutalist neon-lit industrial dashboard**, prioritizing raw, high-contrast readability over decorative form. It is a high-contrast, typographically intense portfolio where the type itself is the primary interface, set in stark white against a deep, muted ground.

**One-liner:** A high-contrast, typographically intense portfolio for a creative developer.
**Keywords:** Bold · Industrial · Experimental · Direct · Developer · Portfolio
**Analogy:** A brutalist neon-lit industrial dashboard.

## 2. Color

The palette is strictly monochromatic, built on the principle of extreme contrast between a dark, muted background and bright, white typography for maximum legibility and visual impact. This is not a range of colors but a singular, high-impact condition.

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

**Color principle:** Extreme contrast between a dark, muted background and bright, white typography for maximum legibility and visual impact.

The principle is one of absolute tonal opposition, creating a stark, industrial field where content commands attention without chromatic distraction.

## 3. Typography

The typographic voice is direct and monumental, with all primary text set in uppercase to establish a commanding presence. The hierarchy is defined by a massive, tightly packed geometric sans-serif for hero elements, contrasted with a decorative display serif for alternate headlines, treating every textual element as a display artifact.

- **Display:** geometric-sans
- **Body:** display-serif
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 100px | 1.2 | 700 | 0px | Hero and section titles |
| body | 108px | 1.2 | 700 | 0px | Alternate display headlines |

**Type rules:**
- All primary text is set to uppercase.
- Headlines use a massive, tightly packed geometric sans.
- Alternate headlines use a decorative display serif.

## 4. Spacing

Spacing is governed by generous vertical padding between major sections, creating a deliberate rhythm that separates large typographic blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical padding between major sections to separate large typographic blocks.

## 5. Surfaces

Depth is communicated through typographic scale and spatial separation alone. The system rejects visible borders, shadows, or layered surfaces, relying on the raw arrangement of content to define the interface's structure.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible borders, relying entirely on typographic scale and spatial separation.

## 6. Layout

The layout skeleton is fundamentally asymmetrical, rejecting centered compositions for a left-aligned typographic flow. Content dictates the page's movement, with massive text blocks and integrated imagery creating a dynamic, non-grid-based structure.

- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetrical, typography-driven layout where text dictates the flow.

## 7. Motion & Interaction

Motion philosophy is one of subtle, persistent presence rather than theatrical effect. Simple CSS transitions are applied globally, with durations calibrated to acknowledge interaction without distracting from the static, typographic focus.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`

- **Hover:** Cursor changes to pointer on interactive text elements.
- **Click:** Standard link navigation.
- **Transition:** All elements have a transition applied.
- **Keyboard:** Standard browser tab navigation.

## 8. Voice & Don'ts

The editorial voice is direct, confident, and slightly irreverent, mirroring the visual boldness in its language. It employs short, punchy, uppercase headlines stacked vertically, with calls-to-action presented as simple text links.

- **Tone:** Direct, confident, and slightly irreverent.
- **Headline style:** Short, punchy, uppercase words stacked vertically.
- **CTA style:** Direct text links with arrows or underlines.
- **Avoid:** Politeness / Complex sentences / Soft edges / Gradient backgrounds

### Don'ts
- ❌ Don't use a centered layout — screenshot shows left-aligned, asymmetrical text blocks.
- ❌ Don't use subtle colors or gradients — screenshot shows a stark, high-contrast palette.
- ❌ Don't use small or standard text sizes — screenshot shows massive, display-level typography.
- ❌ Don't use rounded corners — screenshot shows sharp, rectangular edges.
- ❌ Don't use complex icons or buttons — screenshot shows simple, text-based navigation.
- ❌ Don't use a light theme — screenshot shows a dark background with bright text.

It deliberately avoids politeness, complex sentences, soft edges, and gradient backgrounds, committing instead to a stark and uncompromising directness.

## System Prompt (paste into AI tool)

```
This is a high-contrast, experimental portfolio for a creative developer. The design DNA is defined by massive, uppercase typography set against a very dark background (#161B1B), using bright white ink (#FFFFFF) for maximum impact. The typography categories include a bold geometric-sans for primary headlines and a decorative display-serif for secondary elements. The layout is asymmetrical and driven entirely by typographic scale rather than traditional grids or cards. Critical donts: Do not use rounded corners or soft shadows, as the aesthetic is sharp and brutalist. Do not center content; maintain the strong left-aligned typographic rhythm. Avoid standard body text sizes; everything is treated as a display element.
```
