Brand guide

Golden-ratio structure

φ governs only the places where it is implemented and measurable: a two-part 61.8 / 38.2 split and the Living Substrate seed density of 0.382. The split is packeted: either part may be split again by the same ratio, and that part again, without end — the structure is self-similar at every depth it governs, not a ratio applied once. It does not govern Material typography, spacing, fees, product counts or animation timing.

Where the packet applies: page and pane splits (a supporting pane inside a focus pane inside a window), nested cards, and the substrate seed. Where it does not: Material’s type roles, the 8dp spacing scale and motion timing keep their own scales; φ is a structure, not an ornament.

The seven-layer map

The L1–L7 map explains functional residence. The standard cycle is the Trivium on L2–L4: Beauty · Grammar · Induction, Truth · Logic · Deduction, Justice · Rhetoric · Abduction. The extended row is all seven GEN7@1 seats — L1 firewall plus L5–L7 witnesses around that cycle. Do not stretch seven arts onto seven seats. Varṇa and regime are historical analogies, never classes of human worth. Cross-domain cells are [I]. The me / we / us faces explain interaction context. Neither a face nor a layer creates legal authority, deployment state or DNS.

A phenomenon does not live at an L. Work about a phenomenon is seated at an L. Layer names mark work functions, never ranks of human worth or sovereign identities.

Neighbouring surfaces (owner direction 2026-09-18): APU, Cortex, Liquid and Emergentism share the DAV context class with the core epistemic loop. Four unlike objects: utility, Menexus subproduct, spawned DEX, worldview. They do not become organs, Skyzai.com sub-brands, or proof of a formed DAV.

Menexus is the product family with three named subproducts: Nexus for permissioned connections, Cortex for memory and history, and the new AIA for voice and text interaction. APU, Circle, RealityFutures and Agentz are connected ecosystem products, not Menexus subproducts. See the shared product experience. This product map does not establish deployment or change legal ownership.

Spheres: Menexus = geosphere · Evolutionary Network = biosphere · Skyzai = noosphere. The noosphere is a distributed posture — offense remains possible, but becomes costlier and less well targeted. It is not immunity, a live legal claim or a SKU.

Components, applied system, native shell.

Material 3 is mandatory across apps, websites, landing pages and this guide: component anatomy, states, semantic roles, adaptive navigation, accessible inputs, focus, targets and official Material Symbols. Now in Android shows how those foundations become a coherent product: Styles → Components → Layout Examples → Loading and Error. The Android UI Kit published by Android Design with ivyknight supplies native shell, safe-area and window references. Skyzai owns the identity, artwork, meaning, evidence language and voice—not an alternative interaction standard.

Material explains how a brand customizes the system (customizing Material) and defines its own vocabulary (Material A–Z); this guide uses that vocabulary as written and customizes exactly six things.

Platform research is tracked in the research register. It does not adopt Apple HIG, glass or wallpaper colour while S1, S4 and S5 remain pending.

App-first. At every size.

Material 3 is mandatory everywhere: apps, websites, landing pages and this guide. A website is the Skyzai app experience on the web, including its large-screen expression. Adapt to the actual window width, not the device label. A narrow browser window still needs compact navigation. Marketing changes content and composition, never the interaction standard.

One interaction contract. Different content goals.

There is no marketing exemption. Apply Material before brand styling to every header, menu, search, button, field, dialog, chat, sign-in, checkout and account flow. Both task and sales journeys use adaptive navigation and accessible recovery. Expressive content sits within that foundation; it does not replace it.

Material Symbols—not improvised icons

Use the official Material Symbols library for search, menus, back, send, microphone, close and every other functional icon. Default to Outlined, weight 400, grade 0, optical size 24, with selected fill 1 only where selection applies. Keep a 24dp glyph inside a minimum 48dp target. Give icon-only buttons an accessible name; hide decorative SVGs from assistive technology.

Bundle the approved SVG assets on the web and Material Symbols XML/vector drawables on Android. Use the same approved vectors in Flutter. Do not rely on a network icon font, emoji, hand-drawn replacements or the deprecated predefined Compose Material Icons library. Logos and expressive artwork are not UI icons. See the component register.

Apps in Desktop Mode—not an operating system

Skyzai owns the app experience, not OS-level navigation. Do not reproduce the system Back / Home / Recents bar, taskbar or window controls. Use app-level navigation for the user's task. A narrow desktop window still uses the compact layout.

Use Android's desktop app quality guidelines as the acceptance reference:

• Input: verify keyboard traversal, visible focus, conventional shortcuts, pointer hover, contextual menus, scrolling and appropriate cursors. Preserve text selection; support range selection where applicable.
• Workspace: adapt to window resizing; offer configurable content panels or views where useful. This does not require movable navigation rails or drawers.
• Task continuity: test applicable drag and drop, file picking, export, multi-window use, offline recovery and app/web transitions. Add picture-in-picture, multiple instances or handoff only where supported and useful.

Record applicable guideline/test IDs, platform, result and justified exclusions. Android-only APIs require native tests; browser QA is not a substitute. These are product acceptance requirements, not a claim that this guide implements every desktop feature.

Acceptance · every surface, before release

1. Components: map every interactive element to a Material 3 component and its supported implementation. Inspect anatomy, semantic roles, shape and elevation; do not approve a lookalike screenshot alone.
2. States: verify applicable hover, focus, pressed, selected and disabled states, plus loading, empty, error and recovery. An unavailable action must explain the next step.
3. Navigation: test compact, medium and expanded window widths, resizing and split-screen; retain task context, predictable back, focus return and a usable dismissal path.
4. Inputs: exercise keyboard and touch, labels, validation, error announcements and visible focus; preserve at least 48dp native / 48 CSS px web action targets and avoid keyboard obstruction.
5. Icons: use official Material Symbols for function, with accessible names for icon-only controls. Brand marks and artwork cannot substitute for functional icons.
6. Accessibility: check semantic structure, screen readers, 200% text, contrast, supported themes, forced colours and reduced motion. Native insets and IME behavior need native-device acceptance.
7. Expression: illustrations, charts and scroll scenes preserve readable content, normal scrolling and working Material controls when motion or media is unavailable.
8. Evidence: record the component/library version, tested widths and input methods, failures and owner. This checklist is not Google certification; a web implementation does not prove native equivalence.

Three bodies of reference

Beyond Material, three platform research volumes are custodied as source evidence (chair directives 2026-08-20 and 2026-09-05). The fence is uniform: engineering techniques are adoptable; foreign brand identity is not — Skyzai tokens govern identity.

What apu.bot and skyzai.org taught the canon

These rules were learned on two working surfaces and folded back here so the next door does not re-learn them the hard way. They are applied patterns, not proof that every host is live, connected, or authorized. APU.Bot remains an independent utility. Skyzai.org is a Skyzai door. Do not copy APU copy, fonts or art onto Skyzai.org; do not paste Skyzai organ doctrine onto apu.bot. See the shared product experience and the APU register.

One value, one name, three tiers.

Material explains design tokens and their three tiers (design tokens); this guide does not repeat it. What is Skyzai’s: which carriers hold the values, how they are named, and the rule that a token is the only legal way for a surface to name a colour, a type role, a shape, a duration or a distance — a literal in product CSS is a defect the coverage tool reports.

• A Material role carries the Material name, spelled --md-sys-<group>-<role>. Nothing else may use the --md- prefix.
• A Skyzai-only concept carries a Skyzai prefix. Inventing a --md- name that Material does not define is a defect.
• Two names for one value are allowed only as an alias through var(), never as two literals. The structural gate compares this guide and design-tokens.css on resolved values.
• Appearance is data, not a name: data-theme takes dark, light, true-tone or dark-warm. Values change per appearance; names never do.
• Documentation is not data. A token that exists only in prose, a comment or a <pre> block does not exist; the gate reads parsed declarations only.

All four appearances declare the complete 49-role web compatibility scheme. The bundled native export includes all four; newer native APIs may omit deprecated background roles. A source export is not evidence of adoption in a product. The complete web scheme contains: the four key families primary, secondary, tertiary and error each with role, on-role, container and on-container (16); the surface family — surface, on-surface, surface-variant, on-surface-variant, surface-dim, surface-bright, the five containers and surface-tint (12); inverse-surface, inverse-on-surface, inverse-primary (3); outline, outline-variant (2); scrim, shadow (2); background, on-background (2); and the twelve fixed roles (primary-fixed, primary-fixed-dim, on-primary-fixed, on-primary-fixed-variant for each of the three key colours).

The surface ramp below is rendered from the live tokens of the current appearance. The Material names alias the Skyzai carriers --surface-*: one ramp, one value, two names. The ramp keeps Material’s order — lowest below low below container below high below highest, and dim at or below the surface, bright at or above it — at Skyzai-compressed tone steps, because the surface ink is fixed identity rather than a generated neutral tone. Material defines these roles relatively; it does not fix tones for a custom scheme.

The fixed roles hold tones 90, 80, 10 and 30 of the appearance’s key colour and do not move with tonal elevation. Skyzai’s primary changes hue by appearance — yellow in dark, blue in light, green in True Tone — so these roles are fixed within an appearance, not across appearances. That is a declared deviation from Material, tied to the open hue-axis ruling; Night Shift inherits the dark values.

The animated Skyzai seal

This is the parent mark for both skyzai.com and skyzai.org. It also represents the protocol whole. Bearer weaves (Natural, Legal, Artificial Person) and the Circle organ below are contextual identity signs; they never replace the parent seal as the Skyzai brand.

Monochrome, including in motion. The parent seal uses one identity ink with layered opacity. Its outer layers counter-rotate around a fixed, shadow-free core. Colour animation belongs only to the woven seals. Appearance changes adapt the monochrome ink to the background.

Keep logos crisp, never pulsing. Do not add a glow, halo, drop shadow or breathing shadow to a logo, whether idle, moving, hovered, focused or pinned. No such shadow may fade in and out. Use a separate visible focus outline for controls. Material elevation belongs to the supporting surface; contained page atmosphere remains separate from the mark.

Bearer weaves and the Circle organ

Person-class weaves say who is acting. Organ weaves say which function is in play. Those are different registers. Mixing them in one row made Circle.news look like a fourth person. It is not. Natural, Legal and Artificial Person are bearer contexts. Circle.news is the IS organ occupying DAV context. It borrows the 24-ring field and adds the Circle core. Two half-stroke layers counter-move; hover, focus or activation recovers the still. Colour is expressive only. rings × stroke = 144 is a construction invariant, not identical ink area. None of these replaces the parent seal.

Circle.news organ vs Artificial Person

Circle.news and Artificial Person share the twenty-four-ring field (stroke 6, 727-unit construction, 40-unit safety margin). Circle.news keeps the filled r53 core — the Circle dot. Artificial Person is the same field without the dot: void centre, like Natural and Legal. Natural Person uses the six-ring void-centred weave; Legal Person uses the twelve-ring void-centred weave. The dotted six- and twelve-ring drawings below are historical construction comparisons, not alternative shipping logos. Owner direction 2026-09-18: scoped split of the former shared production mark — the field stays identical; only the core distinguishes Circle.

Production binding

These are static construction comparisons, not a second animation contract. Use the shared theme-aware identity motion contract. The former white-only, half-canonical-ring rest proposal is not implemented here and is not a shipping rule. Circle.news uses the 24-ring, stroke-6 field with the fixed r53 core. Artificial Person uses that field with the core removed. Each 48-path live split uses stroke 3 and returns to its own still (with core / without core) on inspection. The six- and twelve-ring dotted drawings are construction comparisons, not alternative Circle logos.

Rules

Give identity room

Reserve clear space equal to one inner-core diameter around the parent seal. Use the full animated seal for the hero carrier, the full still for app-bar and card identity, and the simplified inner crop only for the dense utility carrier defined below. Person and DAV signs keep their documented ring count and ink invariant.

1× core

One system, a legible family

Skyzai is the parent identity. Domains describe jobs, products carry focused promises, bearer weaves say who is acting, and organ marks say which function is in play. The animated parent seal unifies the system without forcing every member to look identical.

Brand family and source lineage

The original black-tile exports come from the Brands page of Figma file pIKiZn3o6QK9UClW1aCM7B and remain unmodified source records. The parent shown here uses the current monochrome production ink; Circle uses the approved 24-ring derivative, not the earlier 12-ring DAV frame. The asset register distinguishes these from source tiles. Local retrieval does not prove that remote Figma is unchanged, or prove deployment, authority, liquidity or settlement.

Parent and person contexts

Identity first; context never substitutes for proof.

DAV epistemic loop · core

IS → COULD → SHOULD · Circle occupies the DAV context

Neighbouring surfaces

Same context class, four unlike objects — not Skyzai.com sub-brands, not a formed legal DAV.

Context class — core loop and neighbouring surfaces

The DAV is a context class, never proof of formation, authority, DNS or settlement. Core DAV is the epistemic loop Circle → ReFu → Agentz. APU, Cortex, Liquid and Emergentism sit beside that loop as neighbouring surfaces: same context class, four unlike objects. They do not become a second organ loop, Skyzai.com family members, or each other.

Production SVG downloads

These transparent stills preserve the approved geometry, stroke and artboard. Choose the ink for the surface beneath the mark. An SVG loaded with <img> does not inherit the page’s colour: choose the matching file. Inline SVG may bind color to --sz-identity-rest-ink, including Night Shift. Keep meaningful image alternatives; hide a redundant mark from assistive technology when its adjacent name already supplies the label.

For prominent animated identity, use the existing parent seal or contextual weave component; these downloads are stills, not substitute animation engines. The parent stays monochrome; only woven seals may colour-cycle. At favicon size use the static parent utility crop, never a cropped person weave. Original Figma tiles are provenance references, not transparent or theme-responsive production files.

Skyzai.com family

These are members or named faces of the applied Skyzai.com family—not independent parent brands. A product mark may lead on its own surface; the Skyzai relationship stays discoverable in provenance, navigation or the endorsed lockup.

Spawned proof, outside the family

Mark registers

Marks are sorted by what they denote. That selects the governing law. Evolutionary Network is excluded from this organisation.

Purpose behind each mark

Artwork identifies a subject. Its VMOSK-A explains the intended purpose: Vision, Mission, Objectives, Strategies, KPIs and Agents. These are concise, derived profiles—not replacement charters or proof that a product is delivered.

Context symbols follow the represented subject. A shared logo does not transfer a charter. Missing fields and source conflicts remain visible; the internal source register keeps exact provenance for maintainers.

Download purpose profiles · Download all measured SVG specifications

Still exports remain unchanged. Prominent marks use their approved motion components: the parent stays monochrome; woven seals retain their split, colour and hover-collapse behavior. A still download is not an animated component.

Ventures

Distinct identities. One Skyzai design system. Venture logos and expressive colour palettes change; Material components, typography outside identity wordmarks, navigation, motion, accessibility and appearance behaviour stay shared.

Menexus

Memory, permissions and conversational access

The original three-path mark is preserved. Its viewport is 1000 × 1000 source units; each stroke is 25 units, with 0.62 opacity per path. Keep the original translation and overlapping strokes. These are SVG coordinates, not physical dp. The preserved download uses cream ink and is shown on a dark ground.

Menexus follows Skyzai for interface typography, Material components, colour roles, appearance and accessibility. Its separate brand guide is archived. This identity entry does not change product ownership, legal authority or implementation status.

Download original Menexus SVG

Historical logo references

Preserved from the retired Menexus guide, not adopted as current product identities. Assure, Insure and Ensure are not Menexus products. LQID is retained under its original name, not renamed or reissued as EXIT. These originals remain available for provenance only; existing Skyzai release holds still apply.

One system, distinct colour

Menexus uses the shared Skyzai role palette. The four venture palettes below are generated from deliberate seeds with Material Color Utilities 0.13.0, using its Vibrant HCT scheme at standard contrast. Aureus: forest #005430; OFN: blue #2962FF; Tokencen: ochre #8A5D20; Helios: solar #FFC233. This is the proposed Skyzai adaptation, not a claim that existing venture sites have migrated.

Use semantic role/on-role pairs, not the raw seed as body text. Night Shift, reduced motion, error/success meanings and accessible states follow the shared system. A brand accent is never evidence of a positive result. Download all light and dark role palettes · Logo provenance · Material colour source.

Real-world assets

Three distinct roles: origination, standards and local service delivery. Sharing a design system does not merge their responsibilities or establish a licence, certification or operating service.

Semantic colour, resolved by appearance

Components consume Material role pairs, never a dark-only hex ladder. Each specimen below resolves the same three contracts inside its own appearance: role and on-role travel together, while fixed Skyzai identity inks remain separate.

Fixed identity inks

Stable colour families — four coordinated palettes

Blue stays blue, green stays green and gold stays gold. Appearance changes their shades and matching foregrounds, not their purpose. The guide uses gold-led actions; APU uses blue-led actions. Each keeps that choice in light, dark, True Tone and dark-warm. Red remains the error family. Original artwork is never inverted, filtered or recoloured by a theme switch.

The chips above are painted with the literal hex printed beside each one: they are a declarative reference to four appearances at once, not a rendering context, so §00.4’s alias-not-literal rule for live surfaces does not govern them — the structural gate holds each chip equal to its printed value instead.

How the scheme is derived

Web adoption: data-web-palette="gold" keeps this guide gold-led; data-web-palette="blue" keeps APU blue-led. These generated profiles bind the existing source ramps to stable roles. Use --sz-color-blue-container with --sz-color-blue-on-container for a blue illustration, not whichever role happens to be primary. Native scheme exports retain their legacy key order until a separately tested application adoption; this web correction does not silently rewrite them.

Material explains the colour system — HCT, tonal palettes, roles and dynamic colour — and this guide does not repeat it (colour system, roles, dynamic colour). What is Skyzai’s: each appearance’s four key colours become six tonal palettes (primary, secondary, tertiary, error, neutral, neutral-variant) with Google’s own material-color-utilities; the accent roles read those palettes; the surface roles do not — the substrate black, the seal cream and the surface ramp are fixed identity inks. The generated palettes are the --ref-* tokens below, rendered live for the current appearance.

Contrast and dynamic colour

Material publishes standard, medium and high contrast variants of a scheme. Skyzai ships standard and answers the reader’s own prefers-contrast: more with stronger text, borders, focus rings and underlines (§09); a full medium and high scheme is generated from the same key colours when a product needs it. Wallpaper-seeded app colour remains off under pending ruling S1. Brand seeds and identity inks remain the current contract; platform research is not adoption.

Appearance follows the user and their system

Light and dark are the primary Material appearances. Night Shift warms either one without changing hierarchy, meaning or evidence. True Tone is the warmed light state; dark-warm is the warmed dark state. Every state uses Material colour roles and state layers rather than page-specific paint.

dark · operator

Black / Yellow

A dark treatment for skyzai.org, K2 envelope review, internal dashboards, and operator surfaces. Proof behavior is strict: source, tier, and refusal boundary stay visible.

light · same identity

Light surfaces / Gold

The same guide identity on light surfaces, with darker gold action ink and paired foregrounds. A blue-led product keeps blue here too. Appearance is a reader preference, not an audience assignment.

true-tone · warm light

Skyzai custom

Warm paper / Gold

A warm-light palette for comfortable reading. The guide keeps gold actions; APU keeps blue. Green illustrations and gold or blue cards retain their own family and matching text.

dark-warm · operator

Skyzai custom

Warm OLED / Gold

Night Shift applied to the dark role structure for long operator sessions. Meaning and component state remain identical to dark.

Source boundary. Now in Android demonstrates light and dark system completeness. True Tone and dark-warm are marked Skyzai extensions, not case-study exports: they preserve the matching Material role structure to reduce visual temperature, and remain candidates until contrast, every applicable component state, forced colours and device rendering are re-tested. Store appearance as a user preference, respect the operating system on first visit and preserve manual override.

Make the value understandable.

Now in Android is Skyzai’s primary applied-product reference: the bible for turning a design kit into a finished product system. Organize work as Styles → Components → Layout Examples, then design loading and recoverable error states with equal care. Skyzai additionally requires a useful empty state and marks it below as a local completeness extension. Show light and dark, show every applicable interaction state, and visibly tag any Skyzai departure from the Material baseline. Do not copy the case study’s older typography values over the current Material 3 roles in this guide.

Ship the visual, not a runtime dependency

Use a diagram when relationships or sequence become clearer than prose. Use a playful illustration when a metaphor makes an unfamiliar idea approachable. Use photography or generated artwork when it shows a useful customer scene. If a short sentence does the job better, keep the sentence. Apps use these selectively; websites may give them an editorial stage.

Use assets/storytelling/<asset-id> in the owning product, with a manifest linking source, render, SHA-256, creator/tool/version/date, rights, intended profile, alt/text fallback and claim boundary. Keep private prompts and references in a permissioned receipt; never bundle private provenance into a public site. An accessible Figma file is not by itself a redistribution licence.

Initial media budgets (Skyzai targets, not Google rules): each diagram/icon SVG ≤100 KB, offscreen illustration ≤200 KB per selected image, hero image ≤400 KB, and no visual asset required to unlock reading or chat. Set intrinsic dimensions; use responsive sources; lazy-load below-fold images but not the LCP hero. Load video only on intent. An exception needs a measured performance receipt, not a larger default.

Release checks: source and render agree; links resolve; rights are recorded; light/dark and Night Shift remain readable; meaningful text is not baked into art; 200% text and compact widths work; diagrams have a keyboard-accessible full-size view and text equivalent; controls retain Material semantics, contrast and focus; reduced motion, blocked JavaScript and unavailable media do not hide the message.

Reference: Mermaid accessibility · official Mermaid CLI. Use a pinned local renderer with strict security, not executable code or arbitrary links from untrusted diagram input.

Website example · original explanatory diagram

Make the idea easier to see.

A useful visual starts with a reader’s question. Its job is to shorten the path to understanding—not to decorate every surface.

Read the diagram as text

1. Name the reader’s question.
2. Choose Mermaid for relationships, or an original illustration for a concept.
3. Review source, meaning and rights.
4. Export locally with a text equivalent.
5. Test themes, reflow and reduced motion.

Mermaid sourceIllustration brief

The illustration brief is ready for a selected commission; it is not presented as finished artwork. This example’s entrance animation is optional: its final content is present before animation and without JavaScript.

Material 3 type roles

Use the fifteen Material 3 roles exactly. Google Sans Flex is the shared interface family. This guide bundles it locally; individual apps require their own adoption and text-scaling tests. Code and telemetry use bundled Google Sans Code. Do not invent page-specific type scales or depend on a network font.

The metrics captioned on each specimen are Material 3’s published type-scale values (type scale tokens), adopted unmodified — Material is the source of the numbers, the specimens render them, and the structural gate pins each caption to its live role. The live web specimens use bundled Google Sans Flex and Google Sans Code; Google Sans Flex and Google Sans Code are the unified family requirement; product adoption is separately receipted.

Emphasized roles and scaling

Material publishes fifteen emphasized companions to the type roles (type scale tokens) and explains the roles themselves (typography); this guide does not repeat either. Skyzai’s binding: an emphasized role keeps its metrics and moves one weight step up on Google Sans Flex’s variable axis — a 400 role renders at --m3-type-emphasized-weight-regular (500), a 500 role at --m3-type-emphasized-weight-medium (600) — for selected navigation destinations, the label of the one filled button, and unread or important rows. These are Skyzai-emphasized web weights, not a claim that every current Material emphasized role has these weights. Web and native share the Google Sans family requirement. Text must scale to 200% without clipping; the rendered fence tests it.

Adaptive, contextual, native

APU supplies navigation through the website or app’s permitted content; Menexus supplies its information and access foundation. Material supplies the adaptive rail, panel and controls. Navigation exposes destinations and their hierarchy; conversation invokes relevant capabilities. Follow the shared product experience, without turning the product family into an obligatory organ-switching menu.

Outline markers. A root uses a disclosure arrow; a nested item with children uses an outlined bullet; a leaf uses a solid bullet. The marker toggles children independently of its title link. Keep the full 48px target, visible keyboard focus and an announced expanded/collapsed state.

Compose to the available window, not to a named device. The diagrams below preserve the inspected 40dp status and 24dp gesture zones. Native Android uses the system bars; installed web surfaces use safe-area insets; ordinary browser pages never counterfeit them.

Android shell — what Android explains, what Skyzai supplies

The shell rules are Android’s and are linked, not repeated: window size classes (the same five edges as §05, read from the window, not the device), edge-to-edge (the default from target SDK 35 — content draws behind the bars and pads by insets; the installed PWA does the same through env(safe-area-inset-*)), predictive back (opt in, let the system animate, never intercept back to keep someone on a screen), adaptive icons and the splash screen. Ordinary web pages never draw phone chrome; the diagrams above are reference geometry for native and installed surfaces only.

What Skyzai supplies is its own mark in the shapes Android asks for: a 108dp foreground layer with the seal inside the 66dp safe zone, a flat substrate-black background layer, and a monochrome layer for themed icons that carries alpha only and takes the person’s wallpaper tint. The maskable PWA icon is the same composition; the splash screen shows the seal on surface with no wordmark. Android’s themed launcher icon may follow the person’s system choice; that does not enable wallpaper-seeded in-app colour under pending S1.

Material has two depth axes

At rest, use the current Material surface roles to establish containment and emphasis. Use a numbered shadow elevation only when a surface must visibly float or block another surface. These axes are independent: level 3 does not mean surface-container-high, and a higher container role does not imply a shadow. Follow each component’s current contract; where tone and shadow are exposed, treat them independently. Elevation communicates spatial ownership, never evidence, approval, truth or readiness.

For the artwork-led profile, see Material framing and component-specific hover elevation. Editorial corners may increase deliberately; ordinary component state contracts stay intact.

Surface materials

The active colour scheme supplies these semantic materials. surface-dim and surface-bright preserve their relative direction in every theme; the container sequence runs from lowest to highest emphasis.

Shadow elevation levels

Material Web exposes six ordinal levels, 0–5. The specimens below use the official key shadow at 30% plus ambient shadow at 15%. They all sit on the same surface-container-lowest material so the shadow—not a colour substitution—is what changes. Compose instead accepts independent tonalElevation and shadowElevation values in dp; always take the final value from the current component contract.

Shape

Material’s shape scale and its corner tokens are Material’s to explain (shape, elevation); the Skyzai carriers are --shape-xs … --shape-full and the Material names alias them (--md-sys-shape-corner-none 0 · extra-small 4 · small 8 · medium 12 · large 16 · large-increased 20 · extra-large 28 · extra-large-increased 32 · extra-extra-large 48 · full). Skyzai’s own rules: buttons and chips of selection are full; cards are medium and never smaller on a product surface; dialogs and bottom sheets are extra-large; the 4 and 8 steps are internal chrome only. Shape morphing is a Compose behaviour and is documented there, not drawn here. The six shadow levels are --md-sys-elevation-level-0 … 5, aliases of the ladder rendered above.

Governing principles for components

This section defines the adoption boundary, not a substitute component library. Start with the current official Material component, preserve its anatomy, applicable states and accessibility semantics, then bind Skyzai tokens and product content. §04.3 demonstrates the button family; every other component needs its own implementation mapping and receipt.

Material component anatomy
+ Skyzai semantic tokens
+ native platform accessibility
+ product-specific content
≠ copied Pixel identity

Component register — every Material 3 component, linked, with the Skyzai binding

Material explains each component — anatomy, states, accessibility, code — on its own page; this guide links it and does not redraw it. The register states what Skyzai does with each of the thirty-six components in the current catalogue (read 2026-09-02): used and how it is bound, conditional and when, or not used and why. A product that adopts a component owes its own implementation and receipt; a row here is a decision, not a proof.

States belong to the component.

Material explains states and state layers (interaction states); Skyzai binds each component’s specified state colour and behavior. Written here: the tokens Skyzai binds, the six-tile specimen rendered from them, and the one Skyzai law — a state never carries proof, readiness or authority.

• Use the specified role: on-primary for filled buttons, primary for outlined and text buttons, and on-surface for cards. Never apply one universal state colour.
• Layers overlay the component without decorative translation or scaling. Elevation remains component-specific: an elevated card may move from level 1 to 2 on hover.
• Pressed overrides hover; dragged overrides everything; disabled removes every layer.
• A state is never the sole carrier of meaning: selection also changes the icon fill or the label; error also writes supporting text.
• Only one state layer applies at a time. The standard icon-button specimen has a 40dp painted state inside a 48dp target; do not apply that inset to every component.
• State never encodes proof, readiness or authority. A selected row is a selected row; evidence is written next to it, not painted on it.
• The button family in §04.3 and the cards in §04.1 are the live consumers of these tokens; the coverage tool forbids a literal alpha on any interactive rule.

Actions, not decoration

Use the current official Material button family. Labels are short, specific and sentence case. The active theme accent is reserved for the primary action, selected state and focus — never decorative fill.

Five common Material button families

Icon buttons are a separate family

Applicable filled-button states

Loading is a Skyzai asynchronous-workflow extension, not a sixth button family. Preserve the label or an accessible progress name. Validation errors belong beside the affected field or task; they do not turn a button into an “error variant.”

Android application contract

Skyzai Android is Compose-first Material 3. This file does not restate Material. Open the live Android and M3 pages, then apply the Skyzai mapping below. Flutter may share tokens; it is not a second brand.

Android units & scaling: Android-facing type renders in sp — the px tokens here map 1:1 at baseline density only. Test font scale 1.0–2.0 (Android 14+ non-linear scaling) before ship: no clipped labels, no fixed line-height clipping. “48px” in this guide ≙ the 48dp touch target. Google Sans Flex is bundled with the app — it is not a platform font; ship it or fall back per the token stack. The shared family decision is settled. Each consumer still tests bundling, fallback, layout and scaling before adoption.

Store listing icons follow Google Play icon design specifications. They are not adaptive launcher layers and not in-app stills. Play dynamically masks a full square at a 30% corner radius and adds the drop shadow. Do not pre-round, pre-shadow, or ship a transparent ground. Fit the ink — measured pixels of the mark — not the SVG viewBox or a construction safety frame. The longest ink axis sits on the 75% keyline (384px in a 512px asset). Do not scale empty canvas. Never force full-bleed. Opaque Skyzai substrate #050505. Cutter: scripts/cut_android_icons.py. This is not Google certification.

New Android UI uses current Google artifacts. Check the live release notes before pinning. This is not an app module and not Play evidence. Open compose-material3 releases.

Study layout only. Not Pixel OS, not Play, not TalkBack evidence. Wallpaper dynamic color stays off.

Open Predictive back and canonical layouts. Specimens only — not a Compose runtime and not Play evidence.

Material’s breakpoints, Skyzai’s carriers.

Layout follows Material’s five breakpoints and its 8dp spacing scale. Material explains both — breakpoints, the layout scaffold, spacing, bidirectionality — and this guide does not repeat it. What is written here is Skyzai’s: the carriers each breakpoint sets, the spacing tokens every surface reads, and which canonical layout each Skyzai surface uses.

CSS may branch only at these edges — max-width 599 / 839 / 1199 / 1599 and min-width 600 / 840 / 1200 / 1600 — in this guide, in design-tokens.css and in script. Ultra-wide queries above 1600 are allowed because extra-large is open-ended. On Android the same five classes come from the window, not the device (window size classes).

Skyzai’s --s1 … --s9 are the carriers on every platform; --s1 is the 4dp half-step for compact internal alignment and page structure starts at --s2. Material’s spacing tokens ship on Jetpack Compose only, so on the web the Material names alias the Skyzai carriers. Responsive page gutters step --s4 on compact, --s5 on medium and --s6 on expanded windows. Component dimensions, touch targets and optical line widths are not spacing tokens.

Material’s nested units that Skyzai does not carry as a scale step — 2, 6, 10, 14, 20, 36, 40, 56, 72dp — exist only as their Material aliases (--md-sys-measurement-space25 … space900) for component work that needs them. Padding and gaps before margins: define spacing on the parent container, not on each child.

Write layout in logical properties (margin-inline-start, padding-inline, inset-inline) and name edges leading / trailing, never left / right. Back, forward and send icons mirror; clocks, media controls, circular progress and charts do not; linear progress mirrors except in Hebrew. Text keeps both RTL alignment and RTL directionality — never one without the other. The full rules are Material’s: bidirectionality & RTL.

Purposeful motion, never proof

Component transitions use Material 3 motion — Material explains the easing and duration tokens and the transition patterns (motion, easing & duration tokens) and this guide only binds them (--md-sys-motion-easing-* → --ease-*, --md-sys-motion-duration-* → --dur-*; on the web there are no springs, which the structural gate enforces). What is written here is Skyzai’s: the identity motion system that drives the parent seal, the three bearer weaves, and the Circle organ — taken mechanically from the circle.news animated mark and given Skyzai geometry and constants.

For expressive page backgrounds and card-to-content continuity, see contained atmosphere and continuity without repeating artwork. Those product-profile rules do not alter the parent seal or the weave engines below.

The live specimens are the monochrome parent seal on the cover and in §01, and the colour-animated weaves in §01.1; hover or focus any of them to watch the settle. The shared inspection mechanics derive from the circle.news animated logo (receipt intel/diffs/circle-logo-motion/2026-09-02.md); geometry and constants remain Skyzai’s.

A blast from the centre, not a twinkle

Agent cards use a hex mosaic whose colour rides a radial phase. The crest leaves the middle and blows outward. Phase is distance from the centre. Pigment is the 2014 Material Design family ramp (50–900) from The color system, with A100/A200 at the crest — not free HSL and not Skyzai product roles. The seven specimens are the extended GEN7@1 row. The standard cycle is the Trivium on L2–L4 only. They are work functions, not ranks, not deities as SKUs, and not a live runtime. Squaring the sine makes a sharp blast. + radius would suck the wave inward; keep the minus. This is not the parent seal, not a weave, and not proof of a live agent.

Trivium is the standard cycle. Seven seats are the extended row. Names mark work functions, never ranks of human worth. Varṇa and regime are analogies, not castes of persons. Mythic names are optional symbols — not SKUs, not deities as products, and not evidence that a machine holding the lens contacted the world.

Still frames under reduced motion. These canvases are local; they call no model and do not identify a live runtime. Continuous outward ripples. A single expanding shock is not this binding.

Living Substrate

Conway's Game of Life as a toy register in this guide. Specified for skyzai.com as a generative field. It is the one place the guide permits a continuous generative animation: simple local rules, no central controller. B3/S23 on a torus. This is not cosmology proof, not APU, not Circle, and not evidence that a machine holding the lens contacted the world.

Substrate ready. Use the controls or focus the field for keyboard editing.

Clear, calm, consequential

Write from the user’s job backward. Name the useful outcome first, the mechanism second and the boundary where it matters. Product copy can inhabit the intended finished experience without inserting internal development labels into the interface.

Every website follows the shared product experience: the new Menexus AIA is the voice/text interface, Agentz coordinates product-specific work behind it, and answers stay within the current Nexus-permitted context. Editorial voice is not a claim that these services are already connected.

Material’s content design — UX writing, global writing, alt text, notifications — is Material’s to explain (content design); Skyzai adopts it and adds the rules below, which are its own.

• Sentence case everywhere except proper nouns and the names of Skyzai surfaces.
• A control says what happens: Save changes, Sign as proposer, never Submit or OK. The action keeps its name through the flow — the button that says Publish produces a toast that says Published.
• An error says what happened and how to fix it, in the surface’s voice, without apology or blame; it sits with the field or task that failed (§04.2a).
• An empty state is an invitation to act, never a mood; it names the first useful step.
• A notification leads with the outcome, then the source and the freshness window; it never manufactures urgency.
• Evidence stays with the claim: tier, source, date and refusal boundary are written beside the sentence they qualify, not in a footer.
• Global writing: numerals for numbers, ISO dates in receipts, no idioms, and the sender’s name before the platform’s.
• Alt text describes function for controls and content for images; the seal is “Skyzai” and a weave is its person class, never a decoration.

Accessibility

Accessibility is constitutional, not polish. State the current rule first, test it in the artifact that uses it, and keep forensic history in the archive rather than in the reading path.

Contrast — measured, not claimed

scripts/brand_token_audit.py checks the shared system pairs. This guide also runs check_theme_ink_contrast against its own text roles on --bg, --surface, and --elevated in dark, Night Shift, light, and true-tone. Both gates must pass.

System preferences

Structure, targets, and generative surfaces

Scope: the guide is checked locally as a rendered reader and as source. Product adoption, deployment, and assistive-technology behavior on external surfaces require their own receipts.

Material’s accessibility foundation and Android’s accessibility guidance are linked, not repeated (accessible design, Android accessibility). What Skyzai adds: every rule above is tested in this artifact by the structural gate or the rendered fence, forced colours are honoured (focus rings, borders and the seal survive forced-colors: active), and text scales to 200% without clipping.

Color contrast guidance: M3 color contrast

One canon, explicit authority

This v8 file is the active local Skyzai brand canon in this repository. Earlier editions, migration tools and product-specific studies are archive evidence, not parallel sources of truth. A local canon label does not prove product adoption, publication or deployment.

Platform drift: Android surfaces named in this guide (adaptive icons, Predictive Back, font scaling, QPR icon theming) are re-checked against the current stable Android API level at each guide version bump. The monochrome icon note is pinned to API 33+.

This document amends itself only through two machine-held registers, adopted from the apu.bot Librarian’s discipline (2026-09-05 study) and the owner’s continuous-versioning directive (2026-09-05): version — every canon mutation bumps the version and renames this file in the same act, PATCH for refinements, MINOR for content additions, MAJOR chair-gated; and authority — every section carries a mutation tier in brand.section_tiers.json. A chair-tier section (this one included) is a signature act: its content changes only under an owner directive, marked OWNER-DIRECTIVE in the commit, and the tier-mutation gate blocks a drive-by commit exactly as the Librarian refuses a promote click that supplies no signer. Agents never upgrade a tier. The registers are law; the prose beside them is commentary.

APU.Bot — the Artificial Public Utility

The product brand register for apu.bot, integrated into this canon by owner directive (2026-09-05, in-session: “fully integrate APU in the brand guide” — the brand-guide dimension of ruling R3). APU is a nested outline that filters chaos for teleology, in the WorkFlowy lineage, with a second author inside it that can never sign. Its brand law rides this canon: no separate colour corpus, no second token file, no third authority.

The current mark is the four chamfered polygons from live apu.bot, stored as cream on dark and on light. Preserve the 618 × 618 viewBox, transforms, stacking and 0.7 alpha per shape. The archived rounded-rect https://apu.bot/APU.svg still 200s and is not the live identity. The storytelling file is the same geometry in black for a light ground. No shared seal or person-class weave is replaced by this reference.

APU’s expressive entrance changes fill colours only; the shapes remain stationary. Its isolated additive colour treatment and gradual black/light-ground or white/dark-ground inspection state are APU-specific. Compact identity remains quiet. Shared type, semantic roles, spacing, controls and accessibility still come from Skyzai. Do not apply APU’s chamfers, per-polygon alpha or colour cycle to unrelated marks. The downloadable source has fixed black ink; it does not inherit the host theme through an external image.

Use APU as the product name and lowercase apu.bot as the website wordmark. Explain “Artificial Public Utility” once in the brand story; it expresses the name’s ambition, not government ownership, statutory utility status, universal availability or free service. The concrete customer promise comes first.

Small illustrations. Clearer ideas.

Illustration should make the next step feel understandable and approachable. Use it to introduce an unfamiliar action, explain an empty space or make a complex relationship tangible. It is not a replacement for clear writing, a Material icon or a working control. Marketing can give an idea a larger stage; the same care for meaning, accessibility and honest claims still applies.

Current direction: Material Bridge is the rendering style, not the recurring subject: geometric, painterly forms, tactile surfaces, deliberate colour and soft light. Skyzai has its own cyberpunk visual world, expressed through agency and connection—not compulsory futuristic cities. APU’s Mediterranean campaign remains product-specific provenance. Every app needs a distinct setting chosen for its purpose; that does not restrict an app to one location, subject or camera angle. Share Google Sans, Material Symbols, accessible Material behaviour, approved identity masters and contained moving glow. Quiet Material artifacts and the existing linework specimens explain mechanisms inside an interface. “Material Bridge” names our selected illustration direction, not a Google component library, certification or licence to copy third-party artwork.

One foundation. Distinct visual worlds.

Owner correction, September 14, 2026. The APU work establishes the Material Bridge rendering reference as well as useful Material explanations and contained motion. Carry that geometric, painterly craft into Skyzai; change the subjects and setting, not the art language. Each product owns its visual world and original scenes. Preserve the shared interface foundation without recycling APU’s pictures, settings or inventing three audiences for every product.

Three complementary layers, one visual language. Moving atmosphere gives the scene a living, contained setting. Original editorial artwork tells the customer’s story. Material illustrations with Google Material Symbols explain how things connect. Use the layer that helps the reader; not every section needs all three.

Skyzai’s cyberpunk: agency before scenery

Your keys, your network, your agency. Skyzai draws on Timothy Leary’s image of the individual as a “reality pilot”: a person using knowledge and technology to steer their own life. This is our selected interpretation, not a definition of the entire cyberpunk genre or an adoption of all Leary’s views. Read Leary’s essay (PDF). Historical attribution stays precise: Bruce Bethke coined the term; Leary developed the interpretation that informs this direction. Read Bethke’s account.

Make that principle useful in the interface: show who controls a key or record, what is shared and with whom, and where a person can question, correct, decline or leave. APU supports judgment; it does not replace the person’s direction. These are design requirements, not claims that every capability is live. State actual availability beside the relevant action.

Commission original artwork around a meaningful choice, discovery or freely chosen connection. Future cities, lived-in technology, tactile metal and glass or luminous colour may serve the story; none is compulsory. Daylight, domestic, natural or abstract settings can also express technological self-direction. Neon and dystopia are not acceptance criteria. Keep a readable focal subject, controlled detail and atmospheric depth. Use the shared Material Bridge rendering language without transplanting APU’s coast, cypress trees, classical arches or existing compositions into Skyzai. Futuristic subject matter does not call for cinematic game art or a default violet palette.

Me, We and They are three entrances into the same Skyzai world, with different original compositions for individuals, organisations and machines. They are not three art styles. This direction does not reskin APU, Circle, ReFu or other sibling products as cyberpunk; their own settings remain product-specific. Never use the same illustration twice, including on a card and its destination.

Agency belongs in both the experience and its artwork; cyberpunk styling never excuses inaccessible neon controls. Keep light, dark and explicit warmth appearances, paired text colours, Material states, official icons and the existing bounded glow policy. Artwork retains its reviewed colours; it does not force a dark interface or change semantic action colours. No combat, surveillance or operational capability is implied by a concept scene.

APU product-specific artwork — provenance only

Original AI-generated concept illustrations from APU, September 13, 2026. This gallery documents provenance and the geometric, painterly rendering reference; it is not a stock library. Do not use these illustrations or settings on Skyzai surfaces. These are still reference specimens, not photographs, customer evidence or screenshots. The guide does not load their video derivatives.

Art direction: meaning before scenery

Material Bridge is the rendering style, not the recurring subject. Preserve simplified silhouettes, geometric painterly forms, sculptural forms and planes, softly painted shading, tactile matte surfaces, deliberate colour and soft light. APU’s coastal scenes demonstrate that craft, not a mandatory setting. Choose each scene from its particular idea. Keep important content inside the central 80% for the reviewed 3:2 card crop; other formats need their own focal-safe area. Compose original artwork for each content placement, not merely each topic.

Same craft. Different scenes.

Settings

Interiors, wilderness, workshops and everyday spaces can belong beside an occasional futuristic city. Choose the environment because it explains the idea, not because the previous illustration used it.

Subjects

People, tools, objects, natural systems and interactions—not always buildings. Make the particular action or relationship recognizable at the intended display size.

Viewpoints

Close-ups, overhead views, eye-level scenes, wide landscapes and unusual crops. Keep a consistent rendering craft while varying camera, scale and focal placement.

Composition

Intimate or expansive, quiet or active, symmetrical or off-centre. Let the idea set the arrangement; do not turn every subject into the same centred tableau.

No default repetition of bridges, arches, terraces or golden sunsets. These motifs need a specific reason, not a style name. Review the collection side by side, including adjacent cards and destination pages. A different file or prop can still repeat the same visual formula. Regenerate the weak scene or omit it; do not force novelty through arbitrary props or unrelated settings.

Never use the same illustration twice. Each illustration has one logical content placement across apps and websites. A card and its destination hero need different artwork; if fresh art is not ready or useful, omit the second illustration. A crop, recolour, mirrored image, new filename or minor prop change does not make a reused scene original. Track a stable scene ID and its assigned placement, compare exports by hash, and visually review for disguised repetition.

Responsive exports, appearance variants and an approved silent hover derivative belong to that one placement; they do not permit the illustration to appear elsewhere. Shared style, Material building blocks, official logos and functional icons remain reusable. An assembled Material illustration is a composition and follows the same one-placement rule.

Different app, different setting. APU’s Mediterranean coast is a product reference, not the Skyzai default. Do not carry its sea, cypress trees, stone arches, bridges and portals into every app. Choose each app’s environment, subjects, materials, scale and lighting from the customer’s actual job; explain why that world belongs to the app and how it differs from its siblings. A palette swap or another angle on the same coast is not a new setting.

Possible directions—not commissioned scenes—include Circle observing life in a contemporary city, RealityFutures exploring possibilities in an observatory, and Agentz shaping a proposal in a working atelier. Settings may be urban, natural, domestic, scientific or abstract; architecture and landscapes are optional. Approve an app-specific representative, then vary its scenes coherently rather than inventing a new style for every screen. Keep the shared Material framing, official Symbols and contained moving glow; tune atmospheric hues to each scene without changing semantic control colours.

Begin with the customer’s question and one useful change. Then choose the metaphor, composition, family reference, palette and exclusions. Reject glossy generic 3D objects, stock-office scenes, decorative robots, brains, circuits, embedded UI, lettering and logo redraws. Real labels and official Material Symbols belong in HTML or reviewed vectors. A gate does not prove privacy; a bridge does not prove collaboration; beauty does not establish readiness.

APU supporting scenes — three original product-specific references

Material makes the artwork belong

One expressive opening; a quieter working surface

Use large scenes for an entrance, a meaningful section opening or a welcome state. Use small Material note cards, source sheets and connectors to explain the mechanism or close a story. Do not place a poster beside every bullet, transcript message or control. Keep the task readable when images fail.

Round the frame; preserve the scene

The editorial reference uses a 28px outer frame, 16px image corners and 16px inset, all existing shape/spacing tokens. These are documented editorial choices, not a redefinition of Material’s ordinary card shape. Maintain a consistent aspect ratio and focal crop; never stretch, leave encoded black bars or dump an unframed full-width image into a reading column.

Invisible surfaces still occupy space

Internal padding protects the content; an external spacing-token gap separates the next surface. Both are required around a clipped glow field even when its border is invisible. Start with 24–32px between related blocks and 48px between sections, then verify actual composition at compact width and 200% text. Put the clipping mask on decoration, not on the card’s focus ring.

Elevation follows the component, not enthusiasm

A filled interactive card uses level 0 at rest, 1 on hover, and 0 on focus/press; an elevated card uses 1, 2 and 1 respectively. Focus has its own visible indicator. Use the shared level tokens and Material easing for transitions. Do not borrow a dragged-state elevation as a stronger hover, lift passive artwork, or substitute colour glow for spatial depth. The static figures here are intentionally not clickable.

Component source: filled-card states and elevated-card states. Read the current component contract alongside Skyzai’s separate tone and shadow axes; the web adaptation is not native Compose or Google certification.

Build the explanation from Material

Our smaller illustrations assemble familiar Material objects: a conversation fragment, a note, a pair of source sheets, or connected tool tiles. Use one principal object and at most two supporting objects to explain one relationship. Compose with semantic HTML/CSS or reviewed SVG, existing shape and spacing tokens, tonal surfaces and restrained elevation. This is a shared illustration treatment—not a screenshot of a working feature.

A purpose

Spanish for our November trip

Twenty minutes to practise

Official symbols, original composition

Place unchanged, registered Google Material Symbols inside the objects. Use the same Outlined family and approved axes as the interface, with semantic currentColor. Do not ask an image generator to draw icons, redraw their geometry as imperfect linework, mix icon families, or replace symbols with emoji. Google supplies the glyphs; Skyzai composes the explanation.

Illustration, not a pretend control

Keep the composition still, without tab stops, hover-action states, recording dots or invented progress. Keep the complete meaning in nearby HTML text and real actions separate. Decorative symbols are hidden from assistive technology; an informative diagram needs a complete text equivalent.

Atmosphere stays behind the objects

An expressive section may place a contained roaming glow behind this assembly, using the existing decorative-motion policy. Keep the objects and labels on legible Material surfaces. Clip only the decorative field and leave a real external gap before the next card. Quiet task states need no glow.

This specimen reuses the guide’s registered add vector. Source and licence: Google Material Symbols. Original linework below is a separate optional spot-illustration treatment, never a substitute for official functional glyphs.

Contained atmosphere, real motion

For an expressive intro or closing scene, echo two reviewed hues from the artwork through the current appearance’s decorative container roles: blue with warm light, green with sunlight, or ochre with cool blue. Keep semantic text, action, error and focus colours unchanged. Shared utility pages may stay neutral. A glow belongs to its scrolling section—not a fixed viewport wash or a signal that AI is working.

Clip soft colour pools inside an invisible rounded boundary. For the APU roaming profile, choose fresh bounded destinations that eventually visit the centre, edges and corners; move the actual colour peak, not only a large invisible layer. Avoid opaque rectangles covering their neighbours. Isolate the field and use supported additive-light compositing when that is the intended mixture: green plus blue contributes cyan. This is light mixing, not pigment mixing; alpha and the chosen hues affect the result. Verify rendered overlap pixels in both browser engines and keep the surrounding page outside the blend group.

APU’s reference replans approximately 7–12.4-second transform-only legs with gentle easing. These are expressive timings, not control timings. No per-frame JavaScript or animated blur is needed. One decorative-motion policy pauses every active field and hover film, retains phase on ordinary pause, and stops work offscreen or in a hidden tab. Reduced motion and forced colours select a useful still. A disabled or unavailable animation leaves the composition intact. Test visible displacement and cancellation—not merely an animation name or a “Pause” label.

Continuity without repeating artwork

A whole-card link opens the related destination, but does not reuse its illustration there. Carry continuity through the title, colour relationship and Material container/heading transition; use a different original scene for the destination or leave it illustration-free. Navigation commits independently of animation. Preserve native links, keyboard activation, structural ancestors, browser Back, refresh and deep links. Rapid selection or a rejected transition must not resurrect an old page or leave the URL inconsistent with the visible heading. Never add movement to every paragraph just to decorate scrolling.

Optional living artwork is a silent, small hover derivative of the same scene. Default to its still poster; load only on eligible fine-pointer hover, and stop on exit, route change, modal opening, offscreen or hidden-document states. Respect pause, reduced motion and data saving. Touch and keyboard users lose no meaning or action. No fullscreen player, autoplay on page load, audio or extra focus stop is needed. Supporting illustrations stay still. Preserve full-resolution originals outside the web delivery set.

A coherent shell, without redundant chrome

APU reference profile—not a compulsory layout for every product. One branded drawer header replaces “Navigation” plus a repeated root label. Ancestors show the route; the focused node becomes a plain heading without a bullet. Folding and opening are separate actions. Outline and mind map use the same stable IDs and edges; a column of cards is not a mind map. Search follows the permitted branch, and current-node context follows the conversation.

A modal drawer uses a scrim, an inert background, trapped focus, Escape and a visible close control. Suspend the composer while navigation/search is open; restore focus on dismissal. Do not duplicate the hamburger in both top and bottom controls. Choose the smallest shell that preserves orientation; the guide’s adaptive reader and other products need not inherit APU’s all-width modal drawer.

APU places “Open APU” in the top app bar, with compact floating conversation controls below and a separate microphone action. A standard-size microphone FAB is a rounded 56px square with a 16px corner, not necessarily a circle; its Material elevation/state contract remains distinct from the composer. These are product-profile choices. Keep safe-area and keyboard insets, pointer access through empty gaps, and the final content visible. Unavailable voice or app launch must explain itself truthfully in a content-fit dialog—never a viewport-height empty panel.

Material boundary: APU’s translucent browser treatment is an observed product reference only. This edition does not adopt Apple HIG, native Liquid Glass, a fifth appearance or monochrome action primaries; shared S4/S5 remain unresolved. The transferable requirements are compact placement, legible content, opaque fallbacks, accessible targets and no wasted full-width bar. An ordinary Material surface satisfies them.

A footer can disappear only after contact, privacy, accessibility/motion, press, identity and attribution remain discoverable elsewhere. For APU’s conversation-led ending, the closing illustration comes first, then a divider and the in-flow conversation. A floating composer is not a persistent transcript. State honestly whether replies are predefined, live or unavailable, and distinguish ephemeral conversation from admitted useful notes.

Test the logic as carefully as the picture

Start from system light/dark and respond to live preference changes; offer a clear manual override and reset. Extra warmth is explicit. Websites cannot infer Night Shift, True Tone or Android eye-care settings from the browser; do not guess from time or location. Keep text and controls legible over every possible glow overlap. On APU’s four-polygon mark only, inspection fades gradually to per-polygon 70% black in light appearances and 70% white in dark appearances. That alpha is not a global card-overlay rule and does not alter the Skyzai parent seal or person-class weaves.

1. Review every destination—not just the entrance—in light, dark, warm appearances, compact and expanded widths, and 200% text. Check actual spacing, image loading, corners and focus clipping.
2. Check one identity header, no duplicate controls, correct ancestor/leaf states and exact outline/map parity. Audit illustration placements across pages and apps: no repeated scene, including card-to-destination reuse. Distinct topics require distinct scenes; even the same topic cannot repeat its illustration in another placement. Use a visual review as well as IDs and hashes.
3. Exercise hover, press, keyboard, touch, drawer open/close, Back, reload, failed history/transition, blocked video and missing-image paths. Content and URL must remain coherent.
4. Measure visible glow movement and mixed pixels; verify pause, reduced motion, high contrast, data saving, hidden tabs and offscreen cancellation. Still artwork must complete the story.
5. Check mobile keyboard/safe-area obstruction, modal exclusivity, content-fit notices, readable hover ink and opaque control fallbacks. Automation does not replace physical-device or manual screen-reader acceptance.
6. Record source hashes, the tested candidate and actual release state. A beautiful reference, green local suite or reusable shell does not prove a connected AI service or adoption by another product.

Commission the next scene with the shared brief · Inspect the six original APU reference exports and provenance. Product identities and artwork custody stay with their owners; future products commission original scenes in distinct settings, using the shared Material Bridge editorial language.

In the app: explain one thing

An interface illustration is a quiet supporting actor. The heading names the state, the description explains it and the real Material action lets the person continue. The task remains complete if the image does not load.

One idea, one focal object

Start from the reader’s question. Use one recognizable object and at most two supporting elements. Simplify until the idea survives at the actual display size. Do not turn every empty state into a scene.

Human linework, controlled geometry

Use rounded joins, a consistent stroke and gently imperfect curves. Keep perspective, outline weight and fill treatment consistent across the family. Do not mix a doodle, glossy 3D object and stock photograph within one asset.

Quiet ink, purposeful accent

Begin with on-surface linework. Use a small primary-container or secondary-container accent only when it helps the composition. The roles resolve with the appearance; do not tint the parent seal or borrow a product’s taxonomy colours for decoration.

Room to breathe

Keep space around the silhouette and between art, heading, explanation and action. Start app spots at 96–160 CSS px; the examples below use a larger inspection size. These are Skyzai starting sizes, not Material specifications. Simplify detail at smaller sizes instead of shrinking a whole poster.

Still by default

Interface art should not compete with a conversation, progress indicator or screen reader. A short, optional response to intent may use the shared motion tokens. No perpetual decorative loop in a task state; reduced motion preserves the full still. Approved identity and ambient-glow motion have their own separate rules.

Useful without the picture

Keep headings, instructions and actions in HTML. Decorative art beside equivalent text uses empty alt text or aria-hidden="true". Informative art gets a concise description of its contribution, not a list of every shape. Do not put essential status in colour alone.

On a website: give the idea a scene

Marketing may expand the same idea into a playful conceptual illustration, a human story, photography or commissioned artwork. Choose one coherent treatment per asset and campaign. The Building a Bridge reference belongs here when its metaphor is useful—not as a skin over every app screen. A hero can be expressive while its navigation, chat bar and actions remain Material.

Photography and generated art may retain their natural subject colours; they are not UI palettes. Follow the shared Material Bridge rendering language for generated story scenes, with original agency-led Skyzai subjects rather than APU’s coastal world. Photography is a separate evidence-led choice, not a substitute style in the same illustrated set. Choose a crop, surrounding surface and light/dark treatment that work together. Place copy on a readable Material surface or tested scrim, not directly across uncontrolled detail. Never fabricate a customer, testimonial, screenshot, measurement or functioning installation. Label plausible concept scenes as concept artwork.

A reusable family, not a folder of unrelated pictures

1. Brief the job. Name the surface, state, audience, question, adjacent copy, real action, target size and what must remain understandable without the picture. Pick a specific reference and say which qualities matter.
2. Establish the craft; vary the staging. Review an app-specific representative at its real light and dark display sizes. Pin Material Bridge’s geometric painterly language, tactile finish, deliberate colour and soft light—not its perspective, scenery, composition or crop. Record setting, subject, viewpoint and composition for each planned placement, then compare the collection before generation and after rendering. Each scene must explain its particular idea and feel distinct beside the others. Share the rendering craft and interface foundation; do not regenerate a new style for each screen.
3. Build editable masters. Retain vector layers or high-resolution artwork, source/reference provenance, creator or model and edits. Keep logo masters separate and untouched. A downloaded kit or a visible ChatGPT image is a reference, not automatic ownership of its assets.
4. Prepare the delivery set. Include a stable asset name and revision, dimensions, selected ground or semantic-role binding, approved sizes, focal point, alt-text decision, rights record, export hashes and a still if motion is used. Use the shared format and performance budgets; do not invent a second shipping pipeline.
5. Review in the real surface. Inspect actual size and 200% text, all four appearances, RTL, forced colours, reduced motion, missing images and offline use. Check that the illustration cannot be mistaken for a button, chart, logo, product screenshot or proof of an outcome.
6. Keep one approved revision. Register the accepted exports in the product’s asset manifest. Archive rejected and superseded renders with their provenance, outside the active set. Feedback should revise the family deliberately rather than silently accumulating variants.

Acceptance question: does removing the illustration make the idea harder to grasp or the state less welcoming? If not, remove it. If it helps, check that a person can still read, navigate and act without it. The two inline examples above demonstrate the proposed Skyzai grammar; they are not copied ChatGPT assets or a complete approved product illustration pack.

Use the illustration brief and delivery checklist. External reference custody: OpenAI brand guidelines explain use of OpenAI marks; they do not define Skyzai’s style or supply an illustration licence.

Four ways to make a story useful

Start with the audience and offer; keep the shared Material acceptance bar. These are explanatory design specimens, not released product screens or measured business results.

Diagrams are interface, not artwork: they bind the canon through the generated Mermaid theme (mermaid-theme.json, emitted from brand.tokens.json → design-tokens.css by tools/emit_mermaid_theme.py — never hand-picked, freshness-gated like every generated carrier). The default Mermaid palette is forbidden in Skyzai surfaces. Labels use the bundled families: Google Sans Flex for prose, Google Sans Code for hashes, paths, token names and machine-readable values. Flow runs left-to-right; hierarchy runs top-down; a diagram’s direction is a reading contract, not a style choice.