# Figment recommended design system

Revision 2 | September 22, 2026 | Alternative UI recommendation

## Recommendation

Keep the approved paper background, forest interface and Bricolage Grotesque / Plus Jakarta Sans pairing. Restore Figment's original navy wordmark and marigold four-point star. Let human child characters lead the imagery. Keep the tactile miniature worlds as the distinctive creative treatment, with precise diagrams for actual teaching.

Audience: children ages **5 to 12**, and the parents who subscribe and supervise. The age correction from the founder takes precedence over older project documents. The visual system should feel inviting at five and still respectful at twelve.

The intended scene is a parent and child exploring on a kitchen-table tablet. The parent should quickly understand what the child can do. The child should see an inviting next step with enough space and readable language to act independently when ready.

## Sources reviewed

- `docs/figment-design-system.md`, the existing v2.1 design system.
- `src/app/globals.css`, the current main-platform tokens.
- `docs/brand-assets/02-wordmark.svg` and `04-mark-only.svg`, the original brand geometry.
- `docs/imagery-brief.md`, the established distinction between creations and conversational assistants.
- `aui-preview/DESIGN.md`, the first alternative direction.
- `aui-preview/app/preview.jsx` and `styles.css`, the implemented preview.
- The founder's latest edits: retain the background and fonts, correct the star and fox anatomy, favour human characters.

This recommendation applies to the isolated alternative UI. It does not silently supersede the main platform's design system or change its product, auth, billing or data rules.

## What changes and why

| Area | Existing main system | Recommended alternative |
| --- | --- | --- |
| Brand signature | Navy wordmark, dotless i, four-point marigold star | Preserve the actual signature. Remove the preview's substitute asterisk and added full stop. |
| Main canvas | Cream `#FDF8EE` | Retain the founder-approved paper `#FAFBF7`. |
| Interface emphasis | Navy and coral, pronounced tactile controls | Forest actions and headings, restrained edges, calm spacing. |
| Heading type | Bricolage Grotesque | Keep Bricolage Grotesque 800. |
| Reading and UI type | Inter and Plus Jakarta Sans, with Fraunces accents | Keep the preview's Plus Jakarta Sans 400/600 for reading and controls. Two families are enough here. |
| Creative imagery | Flat illustrated scenes | Tactile clay and cut-paper miniatures led by human children. |
| Instructional imagery | Subject-specific requirements | Accurate SVG geometry and reviewed labels. Decorative generated art must not answer a factual question. |
| Child readability | 18px body, 14px caption, 48px targets | Carry those existing requirements into the alternative. The first preview had undersized labels and reading text. |
| Content density | Tool and lesson inventory | A clear next activity, followed by a browsable tool library. One question or decision at a time inside an activity. |

## Brand lockup

The word is `fıgment`, using a dotless i. The star replaces its dot. There is no added punctuation after the name.

Preserve the original star path:

```svg
<path d="M 0,-22 C 3,-6 6,-3 22,0 C 6,3 3,6 0,22 C -3,6 -6,3 -22,0 C -6,-3 -3,-6 0,-22 Z" fill="#F5B82E" />
```

The preview's shared `Logo` component reuses the original text position and star transform, with the already loaded Bricolage font. Use navy `#1A2440` on light surfaces. An inverse wordmark may use paper on forest, with the star remaining marigold. Use the star alone only in an established brand context. Keep at least half its height as clear space around the lockup.

Do not substitute a Unicode asterisk, six-point flower, five-point star or a generic sparkle icon for the brand mark. Decorative stars inside a child's fictional artwork are not brand marks and can follow the story.

## Colour tokens

The executable token file is `aui-preview/app/tokens.css`. The handoff includes `recommended-tokens.json` and `contrast-report.json`.

| Token | Value | Use |
| --- | --- | --- |
| `paper` | `#FAFBF7` | Page background |
| `green` | `#183F35` | Primary action, headings, strong selected state |
| `ink` | `#1E302A` | Reading text |
| `muted` | `#56645D` | Secondary text on light surfaces |
| `brand-navy` | `#1A2440` | Original wordmark |
| `brand-marigold` | `#F5B82E` | Original star |
| `yellow` | `#F5CE61` | Highlights and warm surfaces |
| `sage` | `#DFE9DD` | Learning surfaces and selections |
| `coral` | `#E99076` | Decorative creative accents |
| `lilac` | `#D8CEF1` | Decorative exploration accents |
| `line` | `#DCE3D9` | Nonessential section dividers |
| `control-border` | `#81917E` | Input boundaries that must remain visible |
| `focus` / `error` | `#9C472B` | Focus and corrective feedback, with text or an icon |
| `success` | `#183F35` | Positive feedback, with text or an icon |

Use white text on forest actions. Use ink or forest on light accent surfaces. Butter and marigold are different colours with different jobs. Do not use either for small text on paper. The pale divider token is decorative; it is not sufficient by itself to identify an input boundary.

The contrast report calculates the specific foreground/background pairs, without claiming a full accessibility certification. Confirm contrast again when adding a new tinted surface or opacity.

## Typography and spacing

| Role | Face | Size and treatment |
| --- | --- | --- |
| Marketing hero | Bricolage Grotesque 800 | 38 to 84px, fluid, line height about 1.05 |
| Page heading | Bricolage Grotesque 800 | 32 to 56px, balanced wrapping |
| Section heading | Bricolage Grotesque 800 | 29 to 48px |
| Child reading | Plus Jakarta Sans 400 | 18px minimum, line height 1.6 to 1.7 |
| Child control | Plus Jakarta Sans 600 | 16 to 18px, minimum 48px target |
| Child caption | Plus Jakarta Sans 400/600 | 14px minimum; no essential instruction hidden in a caption |
| Parent reading | Plus Jakarta Sans 400 | 16px minimum |
| Parent caption | Plus Jakarta Sans 400/600 | 13px minimum |

Host fonts locally. Keep headings above `-0.04em` letter spacing and prose around 60 to 70 characters per line. Short labels may be uppercase; reading text must use normal sentence case. Eyebrows are optional, not required above every heading.

Use a spacing scale of 8, 12, 16, 24, 32, 40, 48, 64, 80 and 96px. Marketing sections can breathe at 80 to 110px on desktop and about 48px on mobile. Activity screens need shorter distances between a prompt, its choices and the next action.

Radii: 8px controls, 12px panels and 16px large art. Circles are reserved for avatars and icon-only controls. Avoid a soft shadow plus a decorative border on every card.

## Screens and components

| Surface | Purpose | Key behaviour |
| --- | --- | --- |
| `/` | Explain the product to a family | Show what children can create, age bands, parent involvement and useful FAQs. |
| `/studio/` | Give the child a clear starting point | Continue a sample project, then browse tools. Use a single column of readable activity cards on small phones. |
| `/story/` | Show a child shaping an outcome | Choose a setting and ending. Open the corresponding prewritten story and allow changes. |
| `/lesson/` | Demonstrate guided learning | One question, visible equal-part diagram, large answers, optional hint and read-aloud, calm correction and completion. |
| `/parent/` | Help a parent understand and supervise | Recent work, a conversation prompt and clear example pause/time controls. |
| `/design/` | Show the recommendation to the build team | Brand, palette, type, interactive component states, imagery and links to all sample surfaces. |
| `/library/index.html` | Find implementation assets | Browse illustrations, exact diagrams and the optional film with labelled file paths. |

Primary buttons describe an action. Secondary buttons use a visible outline. Disabled buttons retain a readable label and do not imply that a request succeeded. Answer choices use native radio inputs, a clear selected border and explicit feedback. A correct answer may lock while its next action remains available. An incorrect choice permits another attempt.

Keep keyboard focus visible. Move focus to the new heading when an activity changes step. Dialogs close with Escape and keep focus within the open dialog. Pair icons with labels unless their purpose is already unambiguous. Do not make a tiny icon the only way to perform a child action.

The preview's parent settings are local demonstrations that reset when leaving the page. Labels say so. A build agent must connect the visual shell to the main platform's existing authorization and mutation paths before calling those controls operational.

## Human character art direction

Human children should be the main subjects in marketing, storytelling, language discovery and making scenes. Depict children choosing, building, observing, collaborating and revising. Mix ages and backgrounds naturally. Do not assign learning ability, subject preference or family roles based on appearance.

The refreshed story protagonist is Maya, a fictional girl with curly dark hair, a coral top and sage overalls. The main hero adds a second child explorer. The workshop scene centres a girl making a small clay creation. The language scene shows children sharing a greeting beside an ordinary globe. These are synthetic characters, not real children or customer outputs.

Animals still make sense in pet activities and selected stories. The corrected fox alternative is stored in `01-brand/alternatives/`; it is not the default homepage hero. It has two hind legs and two forelimbs, four limbs total. The superseded faulty version is retained only in the revision-history folder.

Art acceptance checks:

1. Count limbs and check hands, faces, joints, visible feet and contact with the ground.
2. Check that a repeated protagonist has consistent hair, clothes and proportions.
3. Check the intended desktop and mobile crop. Keep faces and the main action visible.
4. Remove generated text and accidental marks. Render labels as real UI text.
5. Describe robots and creatures as things the child creates. Never suggest a conversational AI companion.
6. Keep decorative maps, instruments and imagined worlds out of factual assessment visuals.
7. Inspect the actual generated asset at full resolution before releasing it. A good prompt is not evidence of correct anatomy.

## Age adaptation

| Age | Recommended presentation |
| --- | --- |
| 5 to 7 | One instruction at a time, picture-led choices, read-aloud, limited options, parent co-use and simple back navigation. |
| 8 to 10 | Short guided steps, visible progress, chances to revise and explain a choice. |
| 11 to 12 | More creative control, richer detail and reflection while retaining the same readable UI. |

The preview demonstrates the shared visual system and a sample activity. It does not implement adaptive curriculum or claim that the fraction example suits every five-year-old. A production build should select activity difficulty separately from visual age treatment.

## Motion and video

Feedback transitions use about 180ms with `cubic-bezier(.23,1,.32,1)`. Avoid movement that delays a choice or hides content before an animation runs. Honour reduced-motion preferences.

The 12-second silent film uses gentle camera movement over three generated stills: Maya's boat, the children in the book world and the human maker. It has a poster, native play/pause controls and English visual-description captions. No autoplay. It is an illustration montage, not footage of a working generative feature.

## Trust and implementation boundaries

Explain the actual activity before asking a parent to commit. Use specific descriptions of parental controls only when backed by the product. Do not add invented testimonials, partner logos, certifications, safety guarantees or learning-outcome claims.

All sample screens use synthetic content. Account creation, AI generation, persistence, moderation, payments and real parental settings remain the responsibility of the main application. Carry its auth, moderation, tenant isolation and privacy controls into any later implementation of this visual system.

## Build-agent handoff

1. Open the live `/design/` page and the local visual library.
2. Use `docs/Codex gen 1/manifest.json` for current assets and alt text. Use WebP for delivery and PNG as the source.
3. Read `05-handoff/image-revision-prompts.json` for the exact image edits and provenance.
4. Use `aui-preview/app/tokens.css` and `05-handoff/recommended-tokens.json` for token mapping. Do not replace the main global stylesheet wholesale.
5. Port one surface at a time into the existing Next.js component system. Keep real route and authorization boundaries intact.
6. Validate keyboard operation, contrast, readable text, mobile crops and activity state transitions. Re-run the main project's required integration checks only when the real application is changed.

No existing file was moved or deleted for this revision. Earlier generated artwork was copied to `06-revision-history/before-human-characters` before the authorized replacements. The main platform's implementation and design-system document remain independent of this recommendation.