# Utilitarian — style guide for coding agents

> Generated from the Aesthetary record for **Utilitarian**.
> Research: **Partly sourced** · Build guidance: recorded in 4 of 8 research dimensions.
> 6 sources attached.

## How to use this

Paste this file into your agent as context before asking it to design or build something in this visual language. It states what is established, what is our interpretation, and what nobody has established. Treat all three differently.

**The most important section is "Not researched yet".** Its purpose is to stop you and your agent inventing rules that sound right and are not recorded anywhere.

## What this language is

**Defining:** Browser default font, default link colours, no imagery, very fast

**Recognise it by:** The browser's own defaults left largely in place — the browser's default font, untouched link colours, default heading sizes — with no imagery, no webfont, and a page that arrives effectively instantly. The diagnostic condition is the absence of a position: nothing here is emphatic, and the plainness has no rhetoric attached to it. Web Brutalism produces a similar surface deliberately and wants you to notice; this one has not thought about it. Modern SaaS shares the neutrality but spends heavily on looking credible.

**Family:** Minimal & Ordered
**Era:** contemporary
**Native medium:** screen

## What it is arguing

The page exists to deliver information at the lowest possible cost to everyone involved. Nothing was styled because styling was not the job, and the absence of decisions is the absence of decisions rather than a position.

**It refuses:** Refuses ornament, imagery, webfonts and any weight added for the sake of appearance.

## What it is not

Commonly confused with these. Getting the difference right matters more than getting the surface right:

- Web Brutalism
- Modern SaaS
- Web 1.0

## Established rules

Grouped by what kind of claim each is. A requirement of the language and our own interpretation are not interchangeable.

**How to read each rule.** Every rule states two separate things, and neither stands in for the other:

- **Kind of claim** (the heading): From our catalogue entry · Our reading · Our reading · disputed · Documented · Source attached.
- **Evidence** (how it is established): Graded by our research brief · No source attached (`DOCUMENTED`) · From our catalogue entry (`SUPPORTED`) · Our reading (`CURATORIAL`) · Not researched yet (`UNKNOWN`) · No grade recorded (no grade in the record). Where a claim has its own canonical label, the Evidence line gives that label instead of the grade.
- **Product area**: which of the twelve areas the rule belongs to (Layout, Typography, Color, Imagery, Surface, Interface, Motion, Motif, Technique, Form, Hierarchy, Density), mapped from its raw area label in bold. "Context" means the rule is about the Aesthetic (its name, origin, lineage) rather than a part of the design. "Not mapped" means the raw area has no single area yet.
- The code in brackets is the `grade` field at `implementationConstraints.tokenRules.value.rules[].provenance.grade` in https://aesthetary.com/data/utilitarian.json. "From our catalogue entry" means: Stated in Aesthetary’s existing catalogue entry. An outside source is named only where one is linked to the claim.

### From our catalogue entry

_Carried over from Aesthetary's original catalogue entry. The reasoning behind it was never recorded._

- **layout** — Composition: document flow; no imposed layout.
  - Kind of claim: From our catalogue entry · Evidence: From our catalogue entry · Product area: Layout
- **color** — Colour: default link colours; no palette.
  - Kind of claim: From our catalogue entry · Evidence: From our catalogue entry · Product area: Color

### Our reading

- **hierarchy** — Rank by document order and heading level, nothing else. The first thing is the most important thing because it is first.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Hierarchy
- **typography** — Typography: the browser's default font; no webfont and no declared stack.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Typography
- **typography** — Typography: the browser's default font; role all
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Typography

### Our reading · disputed

- **intent** — The absence of a position is the property. Defaults are left in place because styling was not undertaken, and any emphatic removal moves the artefact to Web Brutalism.
  - Kind of claim: Our reading · disputed · Evidence: Our reading · disputed · Product area: Context (not a design area)

## Found in research

What research established from sources Aesthetary opened and checked. Each line names its area, how it is known, and where it is scoped. "Seen in the work" means the source documents particular works or products rather than the Aesthetic as a whole.

- **Interface** — Form controls keep the platform's native appearance: they are typically rendered with the host operating system's native controls, which CSS cannot replicate or style.
  - Evidence: Documented · Source attached · Claim: `kcc:interface-1` · Covers any page that leaves appearance at its default.
- **Interface** — Links are the browser default: blue (#0000EE) unvisited, purple (#551A8B) visited, underlined.
  - Evidence: Documented · Source attached · Claim: `kcc:interface-2` · Covers WHATWG suggested UA stylesheet; browsers may differ.
- **Interface** — Specialist writing identifies the look by light backgrounds, black text and blue links.
  - Evidence: Documented · Source attached · Claim: `kcc:interface-3`
- **Motif** — The default stylesheet renders list bullets (disc); the opened sources show no ornament in the default rendering.
  - Evidence: Documented · Source attached · Claim: `kcc:motif-1`
- **Motif** — Exemplar sites show very little excess and possibly even less style.
  - Evidence: Documented · Source attached · Claim: `kcc:motif-2` · Covers Craigslist.
- **Technique** — HTML rendered by the browser's own default style sheet, with no or negligible author styling.
  - Evidence: Documented · Source attached · Claim: `kcc:technique-1`
- **Technique** — In the canonical case the plainness is a by-product of early HTML/CSS limits, not a design decision.
  - Evidence: Documented · Source attached · Claim: `kcc:technique-2` · Covers Craigslist, late 1990s.
- **Form** — The raw materials are HTML and, to a lesser extent, CSS.
  - Evidence: Documented · Source attached · Claim: `kcc:form-1`

## Positions by area

The overall position recorded for each area. "No overall position recorded" means rules exist for the area but no position above them; the rules still apply. It is not the same as "Not established", which means nobody has researched the area.

- **Layout** — Specified
- **Typography** — Specified
- **Color** — Specified
- **Imagery** — Ruled out
- **Interface** — Specified
- **Technique** — Specified
- **Surface** — Outside this language. The area does not apply; this is not a gap in the research.
- **Motion** — Outside this language. The area does not apply; this is not a gap in the research.
- **Motif** — Outside this language. The area does not apply; this is not a gap in the research.
- **Form** — Outside this language. The area does not apply; this is not a gap in the research.

## Design grammar — web primitives

A starting grammar for a website in Utilitarian: HTML rendered by the browser’s own default style sheet. White ground, black text, blue and purple underlined links, default heading sizes, native controls, document order. Almost every answer below is “leave it”.

Three kinds of line: **On the record** names a rule this record holds (its wording is under Established rules) and states what it becomes on the web. **Web translation** is Aesthetary's choice for the web, derived from the rules it cites; change it if you have a reason, keep the cited rule. **Not specified by the source** means the research reached this but the sources say nothing about it; **Not researched yet** means the research has not reached it yet. Either way, follow the instruction and do not invent a rule. Structured version: `designGrammar` in data/utilitarian.json.

### Colour

| Role | Value | Contrast | Use | Kind |
| --- | --- | --- | --- | --- |
| ground | `#FFFFFF` | — | The browser’s canvas: a light background. | On the record |
| text | `#000000` | 21:1 | Black text. | On the record |
| link | `#0000EE` | 9.4:1 | Unvisited links. | On the record |
| visited | `#551A8B` | 11.0:1 | Visited links. | On the record |

- **On the record · From our catalogue entry** · `token_rule:color-5` → Default link colours; no palette.
- **On the record · Documented** · `claim:kcc:interface-2` → Links are blue (#0000EE) unvisited, purple (#551A8B) visited, underlined.
- **On the record · Documented** · `claim:kcc:interface-3` → A light background, black text and blue links.

### Typography

Family: the browser’s default font (font-family left unset). Stack: `initial`

| Role | Size | Weight | Line height | Case | Tracking | Measure | Use |
| --- | --- | --- | --- | --- | --- | --- | --- |
| h1 | 2em | 700 | normal | not specified | not specified | — | The browser’s default h1. |
| h2 | 1.5em | 700 | normal | not specified | not specified | — | The browser’s default h2. |
| body | 1em | 400 | normal | not specified | not specified | — | Everything else, at the reader’s own size. |

- **On the record · Our reading** · `claim:dcc:typography-4` → The browser’s default font: leave font-family unset.
- **On the record · Documented** · `claim:kcc:technique-1` → No webfont: HTML in the browser’s default style sheet, with no or negligible author styling.

### Grid and layout

No grid. Document flow, in source order.

- **On the record · From our catalogue entry** · `token_rule:layout-3` → Document flow; no imposed layout.
- **On the record · Our reading** · `token_rule:hierarchy-13` → Rank by document order and heading level, nothing else.
- **Web translation** — If anything is set, set only a reading width. _Why:_ A full-width line on a wide screen is hard to read; one max-width is the smallest decision that fixes it, and it is still a decision. (`token_rule:layout-3`)

### Shape and geometry

Tokens: radius `default` · shadow `none` · border `default`

- **On the record · Our reading** · `claim:surface-reason` → No surface vocabulary exists.
- **Not specified by the source** — The sources do not specify surface. _Instead:_ Add no border, radius or shadow; what the browser draws is all there is.

### Imagery

- **On the record · From our catalogue entry** · `claim:imagery-excluded` → No imagery.

### Nobody decided

The absence of a position is the property. Any removal that reads as emphatic moves the page to Web Brutalism.

- **On the record · Our reading · disputed** · `token_rule:ut-r1` → The absence of a position is the property; any emphatic removal moves the artefact to Web Brutalism.
- **On the record · Documented** · `claim:kcc:technique-2` → In the canonical case the plainness is a by-product of early HTML and CSS limits, not a design decision.

### Components

Anatomy, tokens and states below are Web translation: Aesthetary's specification for the screen. Each value line after them says whether it restates a rule this record holds.

#### Button

The operating system’s button, untouched.

- Anatomy: native <button>; its label
- Tokens: appearance `native`
- State, default: Native.
- State, hover: Native.
- State, focus: The browser’s focus ring.
- State, active: Native.
- State, disabled: Native, with the reason in words nearby.
- Accessibility: A real <button>, so keyboard and screen reader support come free.
- Accessibility: The focus ring is never removed.
- **On the record · Documented** · `claim:kcc:interface-1` → Leave form controls at the platform’s native appearance.

#### Card

No card: a heading and a paragraph, one after the other.

- Anatomy: heading at its default size; paragraph; an inline link
- Tokens: border `none` · radius `none` · shadow `none`
- State, default: Text.
- State, focus: The browser’s focus ring on the link.
- Accessibility: Heading levels carry the structure, so the outline reads correctly.
- **On the record · From our catalogue entry** · `token_rule:layout-3` → Document flow; no imposed layout.
- **On the record · Our reading** · `token_rule:hierarchy-13` → Rank by document order and heading level, nothing else.

#### Input

The operating system’s text field, with a plain <label>.

- Anatomy: <label>; native <input>
- Tokens: appearance `native`
- State, default: Native.
- State, focus: The browser’s focus ring.
- State, error: A sentence saying what went wrong, beside the field.
- State, disabled: Native.
- Accessibility: Every field has a <label>.
- Accessibility: Errors are words.
- **On the record · Documented** · `claim:kcc:interface-1` → Leave form controls at the platform’s native appearance.
- **Web translation** — Wrap every field in a <label>. _Why:_ A label is markup, not styling: it adds no visual decision and makes the field usable. (`claim:kcc:technique-1`)

#### Navigation

A list of links, with the browser’s disc bullets and the browser’s link colours.

- Anatomy: <ul> with disc bullets; links, blue and underlined
- Tokens: link `#0000EE` · visited `#551A8B` · underline `always` · bullet `disc`
- State, default: Blue, underlined.
- State, hover: The browser’s own.
- State, focus: The browser’s focus ring.
- State, current: Plain text, not a link.
- Accessibility: Underlines stay, so links are found without colour.
- Accessibility: aria-current on the current page.
- **On the record · Documented** · `claim:kcc:interface-2` → Links are the browser default: blue unvisited, purple visited, underlined.
- **On the record · Documented** · `claim:kcc:motif-1` → The default style sheet renders list bullets as discs.

### Motion

- **On the record · Our reading** · `claim:motion-reason` → Motion costs time; the register refuses cost.
- **Not specified by the source** — The sources do not specify motion. _Instead:_ Add none. The browser’s own behaviour (a focus ring appearing, a page loading) is all that moves.

### Deliberately not added

- **Surface** (shapeGeometry): Not specified by the source; the record’s reading is that none exists.
- **Motion** (motion): Not specified by the source; the record’s reading is that it costs time.
- **Declared stack or unset default** (typography): An open question on the record.

## Coverage — what has been looked at

One row per research dimension a research pass considered. "Not researched yet" (`UNKNOWN`) means exactly that; a dimension can carry an Aesthetary recommendation and still be unresearched, and those are different things.

| Research dimension | Evidence | Resolved by | Carries a rule |
| --- | --- | --- | --- |
| Composition | Specified · From our catalogue entry | follows the recorded claim | yes |
| Typography | Specified · From our catalogue entry | follows the recorded claim | yes |
| Hierarchy | Specified · Our reading | Aesthetary decided | yes |
| Colour | Specified · From our catalogue entry | follows the recorded claim | yes |
| Density | Not specified by the source | Aesthetary decided | no |
| Imagery | Ruled out | — | no |
| Form / motif / surface / technique | Does not apply: form, motif · Not specified by the source: surface · Specified: technique | — | yes |
| Motion | Not specified by the source | — | no |

## Not researched yet

Every area of this record has a recorded position. That is unusual — most records do not.

## Grade your own work

11 checks: 3 mechanically testable, 6 needing a person to look, 0 needing a source Aesthetary does not hold, 2 with no recorded position. 4 further research dimensions produced no rule (Density, Imagery, Form / motif / surface / technique, Motion). This rubric is silent on them. 1 context rule is listed apart: known about this Aesthetic, not something to check finished work against. Scores do not add up. A failure against a required rule and a departure from something we invented are not the same result, and no total should let them cancel.

### Recognition — does this read as the intended Aesthetic?

- **[visual_human · recognition signature · Evidence: No grade recorded]** Strip every logo, word and borrowed image out of your work, then show it to someone who knows the collection. Do they land on this Aesthetic? The signature to hold is: The browser's own defaults left largely in place — the browser's default font, untouched link colours, default heading sizes — with no imagery, no webfont, and a page that arrives effectively instantly. The diagnostic condition is the absence of a position: nothing here is emphatic, and the plainness has no rhetoric attached to it. Web Brutalism produces a similar surface deliberately and wants you to notice; this one has not thought about it. Modern SaaS shares the neutrality but spends heavily on looking credible.
  - _If it fails:_ The work may be competent and still read as a different Aesthetic, or as none. Nothing below matters until this passes.

### Fidelity — are its defining rules present?

- **[unassessable · no recorded position · Evidence: Not researched yet (`UNKNOWN`)]** Nothing is recorded as a requirement of this Aesthetic. There is no rule here that your work must hold — which means nothing you do can fail this dimension, and nothing you do can satisfy it either. That is missing research, not freedom: our research brief does record failure modes to avoid, listed under avoidance below. They are recorded judgement, not requirements.
  - _If it fails:_ Not applicable. An empty dimension is an absence of research, never a pass and never a failure.

### Implementation — were those rules translated appropriately into this medium?

- **[visual_human · From our catalogue entry · Evidence: From our catalogue entry]** Your work may depart from this — but knowingly, not by accident. Composition: document flow; no imposed layout.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. Rank by document order and heading level, nothing else. The first thing is the most important thing because it is first.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[visual_human · From our catalogue entry · Evidence: From our catalogue entry]** Your work may depart from this — but knowingly, not by accident. Colour: default link colours; no palette.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.

### Avoidance — known failure modes, neighbour drift, cloning

- **[mechanical · recorded failure mode · Evidence: No grade recorded]** Check your work against this: No webfonts, no imagery, no motion, no custom link colours, no considered spacing, no visual signature of any kind.
  - _If it fails:_ A failure mode recorded in our research brief: recorded judgement about what weakens this Aesthetic, not a requirement of the language.
- **[mechanical · recorded failure mode · Evidence: No grade recorded]** Check your work against this: No craft that shows.
  - _If it fails:_ A failure mode recorded in our research brief: recorded judgement about what weakens this Aesthetic, not a requirement of the language.
- **[visual_human · recorded failure mode · Evidence: No grade recorded]** Have you made any of these changes? Each one moves the work into a neighbouring Aesthetic: Against Web Brutalism: unexamined versus argued. Inherited verbatim. Against Modern SaaS: both neutral; SaaS spends to look credible, this spends nothing. Anti-signature: any evidence of deliberate choice — a considered mono, a stark border, an oversized rule — converts it to Web Brutalism, on the line this record draws. This is the easiest record in the queue to get wrong, because *trying* breaks it.
  - _If it fails:_ You have built the neighbour. That may be fine — but name which Aesthetic you are in.
- **[mechanical · declared closure · Evidence: No grade recorded]** Check your work against this: Not open: adding any visual decision that reads.
  - _If it fails:_ This one is closed, not open. The record says generation must not go here.
- **[visual_human · neighbour drift · Evidence: No grade recorded]** Could your work be mistaken for Web 1.0? That language is: Incompetence preserved deliberately; the opposite of Utilitarian's competent plainness
  - _If it fails:_ Not necessarily wrong, but you are closer to Web 1.0 than to this Aesthetic.

### Accessibility — the Aesthetic preserved without its inaccessible practice

- **[unassessable · no recorded position · Evidence: Not researched yet (`UNKNOWN`)]** Does this Aesthetic conflict with any usability floor? Nobody has recorded one for it.
  - _If it fails:_ Nothing — and that is the problem. An unrecorded conflict is not an absent one. Hold AA on reading matter and decide the rest on other grounds.

### Context — known about this Aesthetic, not a check

Where the Aesthetic comes from, what it is called, how it sits among its neighbours. Use it to understand the work; do not score finished work against it.

- The absence of a position is the property. Defaults are left in place because styling was not undertaken, and any emphatic removal moves the artefact to Web Brutalism. _(Our reading · disputed · Evidence: Our reading · disputed)_

**Not covered at all:** Density: Not specified by the source; Imagery: Ruled out; Form / motif / surface / technique: Does not apply: form, motif · Not specified by the source: surface · Specified: technique; Motion: Not specified by the source. These research dimensions produced no rule, so there is no check. Treat them as unscored, never as passed and never as failed.

## Rules for the agent

1. Do not invent rules for any area listed under **Not researched yet**.
2. Do not treat an absent position as permission to do anything you like — say that the language has no position, and decide on other grounds.
3. Keep our interpretations separable from the language's own requirements. If asked to justify a choice, cite which kind of claim it came from.
4. If you need something this record does not contain, say so rather than producing a confident answer from the aesthetic's name.
5. When you self-score against "Grade your own work", score only checks marked `mechanical`. Declare `visual_human` and `evidence_dependent` checks unjudged rather than guessing, and never score an `unassessable` one.
6. Evidence "Not researched yet" (`UNKNOWN`) is never a failure. It means nobody researched the dimension, so departing from what is written there costs nothing and must not be reported as a defect. "No grade recorded" is not a grade either: do not treat it as our decision or as an outside source.
7. In **Design grammar**, a "Web translation" line is our choice for the web and may be changed with a reason; the rules it cites may not. Never present a translation as a property of the language.

## Provenance

- Record: `utilitarian` · status `draft` · research `partly_researched`
- Full structured record: https://aesthetary.com/data/utilitarian.json
- Human-readable record: https://aesthetary.com/a/utilitarian.html
- This file is a snapshot. The record may have changed since; check the page above.

_Aesthetary is an alpha. Where a page says nothing, nobody has done the work yet._