Reference
Brand specification
The visual identity, UX principles, color system, and redesign acceptance criteria for Superbash Learn.
Source: docs/brand-guidelines.md in the repo.
Superbash Learn brand guidelines
The canonical visual system for every public-facing Superbash Learn asset.
docs/design/design-system.mdis the token and interface reference; this document defines art.
Brand in one sentence
Practical AI learning, made tangible: a calm operator’s desk rendered as a subject-led hand-cut paper diorama.
Canonical art direction
Every generated public illustration, marketing visual, news cover, and benchmark cover uses the same physical paper-cutout language:
- warm ivory paper ground with subtle fibre;
- layered cut-paper and board forms with visible edges;
- soft, natural overhead studio light and restrained charcoal shadows;
- charcoal, forest green, burnt orange, and deep indigo on ivory;
- one topic-specific scene that communicates a real task, decision, or result.
The style should feel crafted and editorial, never childish, scrapbook-like, flat-vector, glossy 3D, or like a generic AI illustration.
Subject before decoration
Write a one-sentence brief before generating. Name the hero subject, its action or state, and three visible anchors. A viewer should identify the topic at card size without reading the headline.
Examples:
| Topic | Useful scene |
|---|---|
| AI agents | A paper assistant routes a task among research notes, tools, a calendar, and a finished deliverable. |
| Model choice | A calibrated selection bench makes capability, cost, and speed visibly comparable. |
| Building a project | An idea card moves through a workbench into a checked, deployed site. |
Generation rules
- Use Toapis with
gpt-image-2, generate a 3:2 image for site modules and a 16:9 image for editorial covers, then save the approved result locally. - Do not generate text, letters, numbers, logos, watermarks, product UI, or faux code. Page typography carries all labels.
- Do not use robots, glowing brains, circuits, neon, chrome, gradients, translucent blue charts, floating dashboard cards, or random abstract forms as a substitute for the subject.
- Do not add new decorative colour schemes. Topic distinction comes from the composition and the relative use of the canonical palette.
- Preserve enough quiet ground around the subject for the intended crop.
Evidence is not art
Screenshots, source charts, product captures, supplied photos, and other documentary media are evidence. Keep them authentic, captioned where needed, and visually separate from generated covers. Never restyle evidence to resemble paper cutouts or use generated art to imply product behaviour.
Asset and review rules
- Store generated page art in
site/src/assets/brand/or the relevant content asset directory, and wire it through Astro’s image pipeline. - Inspect every result at full size and in its live crop. Reject garbled marks, accidental text, weak silhouettes, mismatched palette, or a scene that could illustrate any topic.
- Keep diagrams semantic and accessible (SVG/HTML) when labels or values need to be read. A generated raster is never the source of truth for instruction.
See art-creation-pipeline.md for the production workflow and editorial-art-direction.md for news and benchmark covers.