# Simon Riisnæs Emmen

> Simon Riisnæs Emmen — Style Reference

## Prompt Content

```
# Simon Riisnæs Emmen — Style Reference
> Word-shaped confetti on white paper

**Theme:** light

A studio portfolio that treats the page as a poster: a white canvas, two oversized word-shaped color blocks (coral and chartreuse), and a list of projects pinned beneath hairline rules. The visual logic is anti-UI — there are no buttons, no cards, no component grids. Type does the heavy lifting at 67px and 173px, set tight (-0.015em) in a single humanist sans-serif. Every structural line is a 1px black border; every accent surface is a 720px-radius pill that functions as a typographic container rather than a button. The mood is editorial, restrained, and slightly playful — the bold color appears only when a word needs to become an object.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Press Black | `#000000` | `--color-press-black` | All text, hairlines, list dividers, and the 1px structural borders that organize the page |
| Paper White | `#ffffff` | `--color-paper-white` | Page canvas and the surface beneath the accent pills |
| Coral Slip | `#fd8878` | `--color-coral-slip` | Primary accent pill surface — wraps the first word-block. Warm pink against black ink keeps it readable at 9:1 contrast |
| Chartreuse Strike | `#e8fe04` | `--color-chartreuse-strike` | Secondary accent pill surface — wraps the second word-block. The highest-contrast fill on the page at 18.6:1 with black text |

## Tokens — Typography

### Tex Gyre Heros — The single workhorse typeface — used for body copy, the 67px list headings, the 173px word-block type, and footer micro-copy. Tight tracking at -0.015em across all sizes; 0.90 line-height on the 173px display creates word-shaped letterforms that nearly touch the pill edges · `--font-tex-gyre-heros`
- **Substitute:** Inter, Söhne, or Neue Haas Grotesk — any humanist grotesque with a clean aperture
- **Weights:** 300, 400
- **Sizes:** 29px / 32px / 67px / 173px
- **Line height:** 0.90 (display) / 1.20 (body)
- **Letter spacing:** -0.015em at all sizes (≈-0.45px at 29px, ≈-2.6px at 173px)
- **Role:** The single workhorse typeface — used for body copy, the 67px list headings, the 173px word-block type, and footer micro-copy. Tight tracking at -0.015em across all sizes; 0.90 line-height on the 173px display creates word-shaped letterforms that nearly touch the pill edges

### Editorial New — Reserved for the top navigation row ('Simon.com', 'Studio for computational design', 'About', 'Words'). A serif/editing companion that signals the studio's editorial identity without competing with the display sans · `--font-editorial-new`
- **Substitute:** GT Sectra, Tiempos Text, or Source Serif Pro
- **Weights:** 400
- **Sizes:** 29px
- **Line height:** 1.10–1.44
- **Role:** Reserved for the top navigation row ('Simon.com', 'Studio for computational design', 'About', 'Words'). A serif/editing companion that signals the studio's editorial identity without competing with the display sans

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 29px | 1.2 | -0.45px | `--text-body` |
| body-sm | 32px | 1.2 | -0.48px | `--text-body-sm` |
| heading | 67px | 1.2 | -1.01px | `--text-heading` |
| display | 173px | 0.9 | -2.6px | `--text-display` |

## Tokens — Spacing & Shapes

**Base unit:** 6px

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 8 | 8px | `--spacing-8` |
| 9 | 9px | `--spacing-9` |
| 13 | 13px | `--spacing-13` |
| 32 | 32px | `--spacing-32` |
| 63 | 63px | `--spacing-63` |
| 95 | 95px | `--spacing-95` |

### Border Radius

| Element | Value |
|---------|-------|
| tags | 0px |
| cards | 0px |
| buttons | 0px |
| word-blocks | 720px |

### Layout

- **Section gap:** 95px
- **Card padding:** 32px
- **Element gap:** 6px

## Components

### Word-Block Pill (Coral)
**Role:** Primary display surface that contains a single word

Full-width or near-full-width rounded block, 720px border-radius (effectively a capsule), filled with #fd8878 Coral Slip. Internal padding ~95px top/bottom, ~63px left. Text: Tex Gyre Heros weight 300, 173px, line-height 0.9, color #000000, letter-spacing -2.6px. Word sits centered both axes.

### Word-Block Pill (Chartreuse)
**Role:** Secondary display surface that contains a single word

Identical geometry to the coral word-block but filled with #e8fe04 Chartreuse Strike. Same 173px type, same 0.9 line-height, same 720px radius. The two pills are designed to be stacked or alternated with no gap.

### Top Navigation Bar
**Role:** Minimal header with brand, descriptor, and two links

Three-part layout: 'Simon.com' flush left, 'Studio for computational design' centered, 'About  Words' flush right. Editorial New 29px, weight 400, color #000000. Separated from the hero by a 1px black hairline (#000000) running the full page width. No background fill — sits on Paper White.

### Project Index Row
**Role:** Compact three-column list item in the project table

Three equally-spaced columns: two-digit number (01–09), project name, year. Tex Gyre Heros weight 400, 32px, line-height 1.2, color #000000, letter-spacing -0.48px. Left and right columns are right-aligned to the page edges; center column (project name) is left-aligned. Rows are separated by hairline 1px black borders.

### Hairline Divider
**Role:** The only structural line element on the page

1px solid #000000, full page width. Used exactly twice: beneath the nav bar and above the project index. No other dividers exist — the page relies on whitespace and type scale for rhythm.

### Footer Micro-copy
**Role:** Closing text at the page bottom

Tex Gyre Heros weight 300, 29px, line-height 1.2, color #000000, letter-spacing -0.45px. Matches body text exactly but distinguished by lighter weight and conversational tone.

## Do's and Don'ts

### Do
- Use exactly two accent surface colors — #fd8878 Coral Slip and #e8fe04 Chartreuse Strike — and treat them as full-pill containers, never as small swatches or borders
- Set all type in Tex Gyre Heros at the four extracted sizes (29 / 32 / 67 / 173px) with -0.015em tracking; do not interpolate intermediate sizes
- Reserve the 720px border-radius exclusively for the word-block pills; all other elements must be sharp-cornered (0px radius)
- Separate structural sections with 1px #000000 full-width hairlines only — never use background-color bands or shadows to create division
- Let display text at 173px use a 0.90 line-height so word-shapes fill the pill vertically with minimal internal padding
- Use Editorial New only for the top navigation row at 29px; do not use it for body, headings, or display
- Let the page breathe with 95px+ vertical padding on hero sections and 253px below the project list — density lives in the type, not the spacing

### Don't
- Do not introduce shadows, gradients, or any elevation effect — the system is completely flat
- Do not add a third accent color or introduce a neutral gray; the palette is binary (black, white) plus two accent pills
- Do not round corners on anything other than the word-block pills — cards, buttons, tags, and inputs must be 0px radius
- Do not set type in italic, underline, or any decorative style; weight 300 vs 400 is the only typographic contrast
- Do not center-align the project index rows — numbers and years are flush to the page edges, names are left-aligned to the content margin
- Do not add hover states, transitions, or interactive color shifts — the system has no motion philosophy
- Do not break the hairline structure by adding background fills behind sections; Paper White must show through everywhere except the two accent pills

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Paper | `#ffffff` | Full-bleed page background |
| 1 | Coral Field | `#fd8878` | Primary word-block accent surface |
| 2 | Chartreuse Field | `#e8fe04` | Secondary word-block accent surface |

## Imagery

No photography, no illustration, no product imagery, no icons. The page is pure typography and color — the word-block pills function as the visual content themselves, treating language as image. Accent colors are used as full-surface fills, not as decorative dots or icon tints.

## Layout

Full-bleed single-column composition with no max-width container. The page reads top-to-bottom as: 1) hairline-bordered nav strip, 2) two stacked full-width word-block pills (coral, then chartreuse) separated by white paper showing through, 3) a large vertical white gap, 4) a full-width project index with three columns (number / name / year) extending below the fold. The left edge of the project list aligns to ~63px (the same left padding as the word-block pills), creating a single vertical content margin that ties the page together. No sidebar, no grid system, no card layout — the only structural element is the pair of 1px black hairlines.

## Agent Prompt Guide

## Quick Color Reference
- text: #000000
- background: #ffffff
- border: #000000
- accent 1 (coral pill): #fd8878
- accent 2 (chartreuse pill): #e8fe04
- primary action: no distinct CTA color

## Example Component Prompts

1. **Word-block pill (coral)**: Full-width block, #fd8878 background, 720px border-radius. Text: 'Words' set in Tex Gyre Heros weight 300, 173px, line-height 0.9, color #000000, letter-spacing -2.6px. Internal padding 95px top/bottom, 63px left. Word centered both axes.

2. **Word-block pill (chartreuse)**: Full-width block, #e8fe04 background, 720px border-radius. Text: 'Designed' set in Tex Gyre Heros weight 300, 173px, line-height 0.9, color #000000, letter-spacing -2.6px. Internal padding 95px top/bottom, 63px left. Stacked directly below the coral pill with no gap.

3. **Top navigation bar**: Three-part layout on #ffffff background. Left: 'Simon.com' in Editorial New 29px weight 400, color #000000. Center: 'Studio for computational design' same style. Right: 'About  Words' same style. 1px solid #000000 hairline border-bottom across the full width.

4. **Project index row**: Three columns. Left: '01' in Tex Gyre Heros 32px weight 400, #000000, right-aligned to page edge. Center: 'Make with Nation' same style, left-aligned. Right: '2025' same style, right-aligned. 1px solid #000000 border-bottom. Row height follows 1.2 line-height.

5. **Page section divider**: Full-width 1px solid #000000 line on #ffffff background. No padding above or below — adjacent content sits flush.

## Similar Brands

- **Pentagram partner sites (e.g. Harry Pearce, Michael Bierut)** — Same poster-as-page logic with oversized display type on a white field and a hairline-ruled project list beneath
- **Werkplaats Typografie** — Editorial school identity — white canvas, bold type-only compositions, and a numbered project archive treated as primary navigation
- **Stefan Sagmeister's site** — Word-as-image treatment where a single oversized word becomes the entire visual block, often on a flat color field
- **Manual studio (manual.to)** — Ultra-minimal portfolio with flat color blocks, tight humanist sans-serif, and a ruled index of work
- **It's Nice That** — Compact editorial list layout with number / title / year columns under a hairline header

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-press-black: #000000;
  --color-paper-white: #ffffff;
  --color-coral-slip: #fd8878;
  --color-chartreuse-strike: #e8fe04;

  /* Typography — Font Families */
  --font-tex-gyre-heros: 'Tex Gyre Heros', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-editorial-new: 'Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 29px;
  --leading-body: 1.2;
  --tracking-body: -0.45px;
  --text-body-sm: 32px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.48px;
  --text-heading: 67px;
  --leading-heading: 1.2;
  --tracking-heading: -1.01px;
  --text-display: 173px;
  --leading-display: 0.9;
  --tracking-display: -2.6px;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-unit: 6px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-13: 13px;
  --spacing-32: 32px;
  --spacing-63: 63px;
  --spacing-95: 95px;

  /* Layout */
  --section-gap: 95px;
  --card-padding: 32px;
  --element-gap: 6px;

  /* Border Radius */
  --radius-full: 720px;

  /* Named Radii */
  --radius-tags: 0px;
  --radius-cards: 0px;
  --radius-buttons: 0px;
  --radius-word-blocks: 720px;

  /* Surfaces */
  --surface-paper: #ffffff;
  --surface-coral-field: #fd8878;
  --surface-chartreuse-field: #e8fe04;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-press-black: #000000;
  --color-paper-white: #ffffff;
  --color-coral-slip: #fd8878;
  --color-chartreuse-strike: #e8fe04;

  /* Typography */
  --font-tex-gyre-heros: 'Tex Gyre Heros', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-editorial-new: 'Editorial New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 29px;
  --leading-body: 1.2;
  --tracking-body: -0.45px;
  --text-body-sm: 32px;
  --leading-body-sm: 1.2;
  --tracking-body-sm: -0.48px;
  --text-heading: 67px;
  --leading-heading: 1.2;
  --tracking-heading: -1.01px;
  --text-display: 173px;
  --leading-display: 0.9;
  --tracking-display: -2.6px;

  /* Spacing */
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-13: 13px;
  --spacing-32: 32px;
  --spacing-63: 63px;
  --spacing-95: 95px;

  /* Border Radius */
  --radius-full: 720px;
}
```
```