---
name: Simonrogers Info
description: "Worth including for its experimental approach to typographic layout and rotation, challenging conventional web design patterns"
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#3366FF"
  line: "rgba(51,102,255,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 36px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.36px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Experimental typographic portfolio with dynamic text layout

*A typographic portfolio that experiments with layout and text arrangement*

## Colors

Monochromatic blue on white with experimental text arrangement

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#3366FF`)** — uses `ink` token
- **Borders (`rgba(51,102,255,1)`)** — uses `line` token

## Typography

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

## Layout

Experimental centered layout with text rotated at various angles

*Rhythm:* Dynamic spacing created by rotating and overlapping text elements

## Elevation & Depth

- Borders: No visible borders

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** No visible buttons
- **card:** No visible cards
- **chip:** No visible chips
- **input:** No visible inputs
- **hero:** Rotated text typography hero

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```