# Simonrogers Info · Design system migration spec

> Source: https://www.simonrogers.info  ·  Curated by OpenDesign  ·  en

> Worth including for its experimental approach to typographic layout and rotation, challenging conventional web design patterns

## 1. Identity DNA

This system treats the page not as a grid to be filled, but as a field for typographic composition. The analogy is that of a letterpress studio where the metal type itself becomes the image, arranged and rotated to find its own structure. It is a personal portfolio that experiments with the fundamental conventions of web layout.

**One-liner:** Experimental typographic portfolio with dynamic text layout
**Keywords:** Typography · Editorial · Experimental · Personal
**Analogy:** A typographic portfolio that experiments with layout and text arrangement

## 2. Color

A strict monochromatic discipline defines the visual field: a single, vibrant blue operates against a white ground. This constraint forces all expressive energy into form and arrangement rather than chromatic variety.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#3366FF` | body text |
| `--line` | `rgba(51,102,255,1)` | divider |

**Color principle:** Monochromatic blue on white with experimental text arrangement

The principle is subtraction; by removing color as a variable, the design isolates and intensifies the relationship between typography and space.

## 3. Typography

The typographic voice is unequivocally serif, employing transitional faces like Wazlon and Caslon Ionic. This choice grounds the experimental layouts in a sense of editorial history and material weight.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 36px | 1.3 | 400 | 0.36px | Main headlines and body text |

## 4. Spacing

Spacing is not measured in consistent increments but generated by the collision and overlap of rotated text blocks, creating a dynamic, non-linear rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Dynamic spacing created by rotating and overlapping text elements

## 5. Surfaces

Depth is suggested solely through the layering of rotated and overlapping elements, not through shadows or borders. The surface is a flat, white plane where typographic elements are positioned to create spatial tension.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible borders

## 6. Layout

The skeleton is a centered composition that rejects a standard grid, instead positioning text at various angles across the viewport. Overlap is a deliberate structural tool, not an accident.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Experimental centered layout with text rotated at various angles

## 7. Motion & Interaction

Motion is typographic, with text elements capable of rotation animation. Interactivity is signaled with a pointer cursor, and transitions on properties like color are extended to a slow, deliberate one-second duration.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - text rotation animation
  - cursor pointer interactions

- **Hover:** Color transition with 1s duration
- **Click:** Pointer cursor on interactive elements
- **Transition:** All properties with 1s transition on color
- **Keyboard:** Standard navigation

## 8. Voice & Don'ts

The editorial voice is experimental and artistic, with headlines presented as rotated, overlapping serif compositions. There are no visible call-to-action buttons; the work itself is the navigation.

- **Tone:** Experimental and artistic
- **Headline style:** Rotated, overlapping serif typography
- **CTA style:** No visible CTAs
- **Avoid:** Standard grid layouts / Conventional typography / Multiple colors

### Don'ts
- ❌ don't use standard grid layout — screenshot shows rotated, overlapping text instead
- ❌ don't use multiple colors — screenshot shows monochromatic blue palette instead
- ❌ don't use sans-serif typography — screenshot shows transitional-serif fonts instead
- ❌ don't create clear visual hierarchy — screenshot shows experimental text arrangement instead
- ❌ don't add decorative elements — screenshot shows minimal, text-only design instead
- ❌ don't use conventional spacing — screenshot shows dynamic, overlapping layout instead

The system deliberately avoids conventional structure, multiple colors, and clear visual hierarchy to prioritize its core experimental thesis.

## System Prompt (paste into AI tool)

```
This is an experimental typographic portfolio website for Simon Rogers. The design uses a monochromatic blue (#3366FF) on white (#FFFFFF) color scheme with transitional-serif typography (Wazlon, Caslon Ionic). The layout features rotated text at various angles, creating an experimental, artistic feel. Key characteristics include: centered composition, overlapping text elements, 1s color transitions on hover, and pointer cursors on interactive elements. Critical donts: Don't use standard grid layouts, don't use multiple colors, don't use sans-serif fonts, don't create clear visual hierarchy, don't add decorative elements, and don't use conventional spacing. The site embodies an experimental, editorial approach to portfolio presentation.
```