Source: https://mayphus.org/content-first-design/
Title: Content-first design
Metadata: {"date":"2026-10-09","kind":"article","language":"en","locale":"en","route":"/content-first-design/","slug":"content-first-design","tags":["design","website"],"type":"article"}

# Content-first design

The content comes first. This site uses a quiet interface so that writing, evidence and useful links remain easy to read. Familiarity with ChatGPT is one influence: a page opened from a conversation should feel comfortable alongside it. Matching every detail is not the goal.

This is an independent website, not an OpenAI product or an official ChatGPT design specification. The values below are choices for this site; they do not describe OpenAI's internal design system or imply affiliation.

## Implemented here

The [homepage](https://mayphus.org/) uses typography and spacing to organize its reading guide. Articles keep a column no wider than 760 pixels, with larger body text than compact interface labels. The small header and footer leave most of the page to the content. Links remain underlined in prose, keyboard focus is visible, and the theme follows the device's light or dark preference.

The [site map](https://mayphus.org/sitemap/) shows the same approach for a longer list. Its Books and Legacy links sections use native expandable controls, with a subtle hover surface and rounded corners. [How I work with AI](https://mayphus.org/ai-workflow/) is a reading example.

### Colour specimens

Each square shows the colour beside its written hexadecimal value. Both palettes are shown together for comparison; the surrounding page follows the device preference. Colour is supplementary: each value has a role and a text label.

| Role | Light | Dark |
| --- | --- | --- |
| Page background | `#ffffff` | `#212121` |
| Main text | `#171717` | `#ececec` |
| Secondary text | `#666666` | `#b4b4b4` |
| Subtle separator | `#e5e5e5` | `#424242` |
| Soft surface | `#f5f5f5` | `#2f2f2f` |

Separators organize table rows without surrounding each paragraph in a box. Soft surfaces distinguish code and a hovered expandable control. A subtle separator is not a substitute for a visible keyboard focus indicator.

### Type and hierarchy

The font stack is `-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`. It uses fonts available on the reader's device rather than downloading a decorative typeface.

The interface baseline is 16 pixels with a 1.5 line height. Header and footer labels use 14 pixels. Article prose stays larger: about 19 pixels on wider screens and 17 pixels on narrow screens, with more generous line spacing. The page title, section headings and paragraphs on this page are live examples of that hierarchy.

### Spacing specimens

The bars show actual CSS lengths. Their labels preserve the same information in plain text. This small set of intervals provides useful reference points; it is not a rule that every margin must be a multiple of one number.

| Interval | Example in this interface |
| --- | --- |
| `8px` | Compact control padding and the gap beside a colour swatch |
| `16px` | A small gap between wrapped footer items |
| `24px` | A larger horizontal gap between footer items |
| `32px` | Separation between site-map groups |

Rounded controls and code blocks use an 8-pixel radius. The article layout stays open, with space between sections instead of decorative panels. Narrow screens retain readable margins, and wide tables can scroll inside their own region.

## Recommendations for adapting the approach

Start with the content and its reading order. Use a clear title, descriptive headings and links that say where they lead. Choose a comfortable text width before adding decoration.

Keep a small palette and spacing vocabulary, but allow exceptions when the content needs them. A chart, a long table and a short note do not need identical layouts. Preserve meaningful status colours where they help, and pair them with words or symbols.

Check the result on a narrow screen, in both themes and with a keyboard. Keep essential information in real text, including labels for visual examples. Stop refining when the page is readable, calm and coherent; resemblance to another product is a useful influence, not the measure of success.