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.md is 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:

TopicUseful scene
AI agentsA paper assistant routes a task among research notes, tools, a calendar, and a finished deliverable.
Model choiceA calibrated selection bench makes capability, cost, and speed visibly comparable.
Building a projectAn 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.