# Kawaii — style guide for coding agents

> Generated from the Aesthetary record for **Kawaii**.
> Research: **Graded, not yet sourced** · Build guidance: recorded in 5 of 8 research dimensions.
> No source attached. 1 claim graded by our research brief.

## 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:** Mascot characters, sparkle and heart motifs, pastel with one bright, everything rounded

**Recognise it by:** Mascot characters built to consistent proportion, sparkle and heart motifs placed at controlled intervals, a pastel field carrying exactly one bright accent, and every corner and terminal rounded without exception. The diagnostic condition is precision inside softness: the construction is exact even though the vocabulary is soft, and loose execution reads as a different and lesser thing. Mascot-Led, a Module, is the layout device of building a page around a character; this is a full register with its own palette rule and craft standard.

**Family:** Subculture & Street
**Era:** contemporary

## What it is arguing

Cuteness executed to a professional standard. Rounded form, mascot character and controlled pastel are a demanding craft with exact rules of proportion and spacing, and doing it properly is the point rather than an affectation.

**It refuses:** Refuses sharpness, irony about cuteness, and the assumption that the register permits loose execution.

## What it is not

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

- K-Pop
- Mascot-Led

## 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 · Graded by our research brief · No source attached · Our reading.
- **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/kawaii.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._

- **color** — Colour is a count constraint: pastel field plus exactly one bright. A second bright breaks the register — the same shape as Seventies Revival's accent prohibition, inverted.
  - Kind of claim: From our catalogue entry · Evidence: From our catalogue entry · Product area: Color
- **imagery** — Imagery: character illustration.
  - Kind of claim: From our catalogue entry · Evidence: From our catalogue entry · Product area: Imagery
- **form / motif / surface / technique** — No sharp corner anywhere, including interface furniture.
  - Kind of claim: From our catalogue entry · Evidence: From our catalogue entry · Product area: not mapped

### Graded by our research brief · No source attached

_A research brief graded this documented, but no source is attached yet. A grade is not a source._

- **register** — The modern sense originates in a 1970s Japanese schoolgirl handwriting style — rounded fine-pencil forms decorated with hearts, stars and faces — which teenagers created themselves as a rebellion against a rigid education system before any industry adopted it.
  - Kind of claim: Graded by our research brief · No source attached · Evidence: Graded by our research brief · No source attached · Product area: Context (not a design area)

### Our reading

- **layout** — Composition: no position of its own is recorded; the brief defers to the neighbour Mascot-Led.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Layout
- **hierarchy** — Rank by the single bright accent and character gaze — the accent marks the one important thing, and the mascot looks toward it.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: Hierarchy
- **construction** — Precision inside softness: the vocabulary is soft but the construction is exact. Loose execution reads as amateur rather than as kawaii.
  - Kind of claim: Our reading · Evidence: Our reading · Product area: not mapped

## 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** — No overall position recorded
- **Color** — Specified
- **Imagery** — Specified
- **Interface** — Specified
- **Motif** — Specified

## Design grammar — web primitives

A starting grammar for a website in Kawaii: a pastel field with exactly one bright, no sharp corner anywhere, a character that leads the eye, and soft forms built with exact precision.

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/kawaii.json.

### Colour

| Role | Value | Contrast | Use | Kind |
| --- | --- | --- | --- | --- |
| field | `#FFF1F6` | — | The pastel ground. | Web translation |
| pastel | `#DDEBFF` | — | Tiles, tabs and secondary controls. | Web translation |
| ink | `#4A2A45` | 11.2:1 | Text and lines. | Web translation |
| bright | `#FF7AB6` | 5.1:1 with ink on it | The one bright. One element per view. | Web translation |

- **On the record · From our catalogue entry** · `token_rule:color-5` → A pastel field plus exactly one bright. A second bright breaks the register.
- **Not specified by the source** — The sources do not specify exact hues. _Instead:_ Any pastel and any single bright satisfy the rule; the count is what is recorded.

### Typography

Family: rounded sans (a translation of the rounded handwriting the style began with). Stack: `ui-rounded, "M PLUS Rounded 1c", "Nunito", "Arial Rounded MT Bold", sans-serif`

| Role | Size | Weight | Line height | Case | Tracking | Measure | Use |
| --- | --- | --- | --- | --- | --- | --- | --- |
| title | 1.75rem | 800 | 1.2 | not specified | not specified | — | Headings. |
| body | 1.0625rem | 500 | 1.6 | not specified | not specified | — | Everything else. |

- **Web translation** — Use a rounded sans. _Why:_ The modern sense began as rounded handwriting, and no sharp corner is allowed anywhere; rounded terminals carry both into type. (`token_rule:kw-r1`, `token_rule:surface-8`)
- **Not researched yet** — A typeface and a type scale are not researched yet. _Instead:_ The rounded stack and sizes here are a starting point.

### Grid and layout

Built around a character: the page is composed around a mascot. A grid is not researched yet.

Tokens: space-step `0.75rem`

- **On the record · Our reading** · `token_rule:layout-3` → Compose around a character (the Mascot-Led device).
- **Web translation** — Space everything in one step (0.75rem) and its multiples. _Why:_ Loose execution reads as amateur; one spacing step keeps the softness exact. (`token_rule:kw-r2`)

### Shape and geometry

Tokens: radius-pill `999px` · radius-tile `16px` · radius-field `12px`

- **On the record · From our catalogue entry** · `token_rule:surface-8` → border-radius on every element, interface furniture included; nothing is square.
- **Web translation** — Use three radii only: pill, 16px tile, 12px field. _Why:_ Precision inside softness: a fixed radius scale is exact construction. (`token_rule:kw-r2`, `token_rule:surface-8`)
- **Web translation** — Place sparkle and heart motifs at controlled intervals, not scattered. _Why:_ Our translation of the record's recognition signature into this web primitive; the record states it as the look, not as a rule. (`gestalt`)

### Imagery

- **On the record · From our catalogue entry** · `token_rule:imagery-7` → Use character illustration.
- **Web translation** — Build characters to consistent proportion. _Why:_ Our translation of the record's recognition signature into this web primitive; the record states it as the look, not as a rule. (`gestalt`)
- **Not specified by the source** — The sources do not specify photography. _Instead:_ Nothing forbids it; the record names character illustration.

### Character

The mascot leads: it is built to fixed proportion and looks at the one important thing.

Tokens: char-size `4.5rem`

- **On the record · Our reading** · `token_rule:hierarchy-13` → The character looks toward the element that takes the bright.
- **Web translation** — Build the character to consistent proportion every time it appears. _Why:_ Our translation of the record's recognition signature into this web primitive; the record states it as the look, not as a rule. (`gestalt`)

### Precision

Soft vocabulary, exact construction. Loose execution reads as amateur, not as Kawaii.

- **On the record · Our reading** · `token_rule:kw-r2` → Construct exactly: consistent radii, spacing and proportion.
- **Web translation** — Refuse sharpness, irony about cuteness, and loose execution. _Why:_ Our translation of the record's argument (intent) into this web primitive; the record argues it, it does not state it as a rule. (`intent`)

### 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

A fully rounded pill. Only the one important action takes the bright; everything else stays pastel.

- Anatomy: pill shape (radius = half the height); rounded type; bright fill for the one primary action only
- Tokens: radius `999px` · height `3rem` · primary `the one bright` · secondary `pastel with a 2px ink line`
- State, default: Primary: the bright, ink label. Secondary: pastel field, ink line.
- State, hover: The pill darkens one step; nothing bounces.
- State, focus: 3px ink outline, following the pill's shape.
- State, active: One step darker again.
- State, disabled: Pastel, dashed line, muted label.
- Accessibility: Ink label on the bright measures 5.1:1.
- Accessibility: Only one bright button per view, so the accent never has to compete.
- **Web translation** — No sharp corner: buttons are pills. _Why:_ Our screen application of the cited record material. The record's native medium is not established as a screen, so a component value is a web translation, never a screen requirement of the language. (`token_rule:surface-8`)
- **Web translation** — Only one element per view takes the bright accent. _Why:_ Our screen application of the cited record material. The record's native medium is not established as a screen, so a component value is a web translation, never a screen requirement of the language. (`token_rule:color-5`, `token_rule:hierarchy-13`)

#### Card

A rounded pastel tile with the character in it, built to an exact radius and spacing.

- Anatomy: 16px radius; pastel fill; character at a fixed size; rounded title
- Tokens: radius `16px` · padding `1.5rem` · fill `pastel`
- State, default: Pastel tile.
- State, hover: A sparkle appears at the corner.
- State, focus: 3px ink outline following the radius.
- Accessibility: The character is decorative unless it carries meaning; then it has alt text.
- **Web translation** — Round every corner of the card. _Why:_ Our screen application of the cited record material. The record's native medium is not established as a screen, so a component value is a web translation, never a screen requirement of the language. (`token_rule:surface-8`)
- **Web translation** — Construct exactly: one radius, one spacing step, repeated. _Why:_ Our screen application of the cited record material. The record's native medium is not established as a screen, so a component value is a web translation, never a screen requirement of the language. (`token_rule:kw-r2`)

#### Input

A rounded field with a soft pastel fill and a firm ink line.

- Anatomy: 12px radius; white field, 2px ink line; rounded label above
- Tokens: radius `12px` · border `2px solid ink`
- State, default: Ink line.
- State, focus: The line takes the bright, plus a 3px outline.
- State, error: A message in words, beginning "Error:".
- State, disabled: Pastel field, dashed line.
- Accessibility: The 2px ink line keeps the field visible against pastel.
- Accessibility: Labels are real text.
- **Web translation** — Round the field; no sharp corner anywhere, including interface furniture. _Why:_ Our screen application of the cited record material. The record's native medium is not established as a screen, so a component value is a web translation, never a screen requirement of the language. (`token_rule:surface-8`)
- **Web translation** — Keep a firm 2px ink line on the field. _Why:_ Precision inside softness: the soft form is exactly drawn, and a pastel edge alone would not meet 3:1. (`token_rule:kw-r2`)

#### Navigation

Rounded tabs in pastel. The current page is marked by the character looking at it, not by a second bright.

- Anatomy: pill tabs; current tab in white with an ink line; the character beside the current tab, facing it
- Tokens: radius `999px`
- State, default: Pastel pills.
- State, hover: One step darker.
- State, focus: 3px outline.
- State, current: White pill; the character faces it.
- Accessibility: aria-current on the current tab; the character is decorative.
- **Web translation** — Round the tabs. _Why:_ Our screen application of the cited record material. The record's native medium is not established as a screen, so a component value is a web translation, never a screen requirement of the language. (`token_rule:surface-8`)
- **Web translation** — Point attention with the character's gaze toward the one important thing. _Why:_ Our screen application of the cited record material. The record's native medium is not established as a screen, so a component value is a web translation, never a screen requirement of the language. (`token_rule:hierarchy-13`)
- **Web translation** — Do not spend the bright on navigation. _Why:_ Exactly one bright per view, and it belongs to the primary action. (`token_rule:color-5`)

### Motion

- **Not researched yet** — Motion is not researched yet. _Instead:_ Bounce and wobble are common Kawaii clichés; the record does not hold them. Use none by default, and never at the cost of precision.

### Deliberately not added

- **Exact hues** (color): The count rule is in the record; the sources do not specify the hues.
- **A typeface and scale** (typography): Only the rounded origin is recorded.
- **Interface conventions beyond rounding** (components): The research record does not establish them. The four components are contemporary translations of documented visual rules.
- **Motion** (motion): Unknown; bounce is a cliché, not a rule.

## 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 | Not researched yet | Aesthetary decided | yes |
| Typography | Not researched yet | Aesthetary decided | no |
| 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 | Specified · From our catalogue entry | follows the recorded claim | yes |
| Form/motif/surface/technique | Not researched yet: form, surface, technique · Specified: motif | follows the recorded claim | yes |
| Motion | Not researched yet | Aesthetary decided | no |

Unresearched: Composition, Typography, Motion. Where a rule appears for one of these it is Aesthetary's implementation recommendation, not a property of the language, and its Evidence line above says so.

## Not researched yet

Nobody has established a position for this language on:

- Typography
- Surface
- Motion
- Technique
- Form

**Do not fill these in.** An absent position is absent research, not permission and not a blank for you to complete. If the work needs a decision in one of these areas, make it on other grounds and do not attribute it to this language.

## Grade your own work

19 checks: 10 mechanically testable, 7 needing a person to look, 0 needing a source Aesthetary does not hold, 2 with no recorded position. 3 further research dimensions produced no rule (Typography, Density, 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: Mascot characters built to consistent proportion, sparkle and heart motifs placed at controlled intervals, a pastel field carrying exactly one bright accent, and every corner and terminal rounded without exception. The diagnostic condition is precision inside softness: the construction is exact even though the vocabulary is soft, and loose execution reads as a different and lesser thing. Mascot-Led, a Module, is the layout device of building a page around a character; this is a full register with its own palette rule and craft standard.
  - _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 · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. Composition: no position of its own is recorded; the brief defers to the neighbour Mascot-Led.
  - _If it fails:_ Nothing. No one has researched the dimension yet, and this is only what Aesthetary would do. Departing from it costs you nothing.
- **[visual_human · Our reading · Evidence: Our reading]** Your work may depart from this — but knowingly, not by accident. Rank by the single bright accent and character gaze — the accent marks the one important thing, and the mascot looks toward it.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[mechanical · From our catalogue entry · Evidence: From our catalogue entry]** Your work may depart from this — but knowingly, not by accident. Colour is a count constraint: pastel field plus exactly one bright. A second bright breaks the register — the same shape as Seventies Revival's accent prohibition, inverted.
  - _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. Imagery: character illustration.
  - _If it fails:_ A defensible departure, and you should be able to say why you made it.
- **[mechanical · From our catalogue entry · Evidence: From our catalogue entry]** Your work may depart from this — but knowingly, not by accident. No sharp corner anywhere, including interface furniture.
  - _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. Precision inside softness: the vocabulary is soft but the construction is exact. Loose execution reads as amateur rather than as kawaii.
  - _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 sharp corners or terminals.
  - _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 second bright accent.
  - _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 irony about the register.
  - _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 loose or sketchy construction.
  - _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 muted or sophisticated palette.
  - _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 Mascot-Led (Module, kind layout): a layout device versus a full register with palette and craft rules. Against K-Pop (Influence, kind scene): an influence, not a peer language. Anti-signature: a second bright accent, a sharp corner, or loose construction.
  - _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: a second accent.
  - _If it fails:_ This one is closed, not open. The record says generation must not go here.
- **[mechanical · declared closure · Evidence: No grade recorded]** Check your work against this: Not open: sharp geometry.
  - _If it fails:_ This one is closed, not open. The record says generation must not go here.
- **[mechanical · declared closure · Evidence: No grade recorded]** Check your work against this: Not open: sloppy execution..
  - _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 K-Pop? That language is: Defined by extreme polish; fails immediately without it
  - _If it fails:_ Not necessarily wrong, but you are closer to K-Pop 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 modern sense originates in a 1970s Japanese schoolgirl handwriting style — rounded fine-pencil forms decorated with hearts, stars and faces — which teenagers created themselves as a rebellion against a rigid education system before any industry adopted it. _(Graded by our research brief · No source attached · Evidence: Graded by our research brief · No source attached)_

**Not covered at all:** Typography: Not researched yet; Density: Not specified by the source; Motion: Not researched yet. 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: `kawaii` · status `draft` · research `partly_researched`
- Full structured record: https://aesthetary.com/data/kawaii.json
- Human-readable record: https://aesthetary.com/a/kawaii.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._