# APU identity — logo, artwork & website pattern

2026-09-14 · Local website candidate · A Skyzai product

[A] Navigation decision updated 2026-10-11: the owner removed the website top
application bar. The existing shared bottom dock and modal drawer are the
persistent navigation entry at every width. This supersedes earlier app-bar
lockup and desktop-rail guidance for the website; the separate authoring app
retains its own shell. The retired scroll-header source and tests are preserved
under `90_ARCHIVE/2026-10-11_website-topbar/` in the repository.

This is an APU-specific supplement, not a replacement for the Skyzai brand guide.
Skyzai owns the typography, semantic colour roles, spacing and Material controls.
The website's vendored design tokens carry that source lineage. These logo and
composition rules describe the current APU candidate [A]; usage recommendations
below are design decisions [I], not evidence of a deployed or approved release.

## Name and ambition

The owner clarified on 2026-09-13 that **APU stands for Artificial Public Utility**
[A: owner intent]. This is the origin and ambition of the name, not a claim of
government ownership, statutory utility status, public governance, universal
availability, or free service. The operator remains Menexus GmbH under Skyzai.

Recommended public hierarchy [I]: **APU** is the product name; **apu.bot** is its
website wordmark. Explain the expansion once in the brand story rather than
repeating it in navigation or replacing the concrete customer promise. Keep
“One APU. Three ways to use it.” at the entrance. The expansion is not forbidden;
its proposed prominence remains a copy decision, not an established launch claim.

## Product endorsement [I]

APU is the product identity; Skyzai is the visible parent brand. Use the approved
monochrome Skyzai full still beside “A Skyzai product” in a secondary strip after
the entrance cards and in the navigation utilities. Keep the APU entrance
identity and hero primary; do not add a competing parent hero or crowd mobile
controls. The endorsement links to the existing Accounts & pricing page (#start), not
an implied live integration.

The two `assets/skyzai-parent-on-*.svg` files are byte-identical production
exports from Skyzai 8.1.2, with source hashes in `assets/manifest.json`. Display
them at 48px with 16px of external clear space on every side. Use the on-light
asset in light/True Tone and the on-dark asset in dark/dark-warm. They remain
still and monochrome; never apply the APU colour choreography or hover ink
transformation to the parent seal.

Menexus GmbH is the legal operator, not a repeated marketing lockup. Retain its
name, address and relevant support/privacy disclosures in Website & contact
and the press fact sheet. Do not remove those disclosures when simplifying
navigation or product branding.

## The mark [A]

The canonical website asset is `assets/apu-logo.svg`. The application copy is
`public/apu-logo.svg` in the product. Keep them byte-identical. The mark retains
the original 618 × 618 viewBox, four transforms, stacking order and individual
0.7 fill opacity. The four elements do not move, rotate or change size in motion.

[A] Website opening identity, updated 2026-10-11: use the existing transparent
`press/apu-logo.png` raster export before website readiness and without JavaScript.
It is the quiet black mark in light appearances; `invert(1)` makes it white in
dark and dark-warm appearances while preserving its alpha and geometry. The
generated coloured SVG replaces it only in the Home hero after `.site-ready`.
This is an in-place identity fallback, not a separate full-screen splash or a
change to the independently hosted app's loading screen.

Each element has local bounds 333.831 × 206.323. The shorter edge H is split into
a straight central segment of H/φ (0.618033989 H) and two equal corner cuts of
(1 − 1/φ)H/2 (0.190983006 H each). Each chamfer is 39.404186670 units along both
adjacent edges. The total chamfered portion is 0.381966011 H, not that amount at
each corner. Corners are straight cuts, never rounded arcs.

Preserve each element's opacity separately: group opacity would change the
overlap. “70%” means per-element alpha, not a claim that 70% of its area overlaps.
Do not replace the source transforms with approximate CSS rectangles.

## Wordmark and space [I]

Write `apu.bot` in lowercase using the site's locally hosted Google Sans Flex.
The entrance uses the Skyzai display-small type scale, weight 500 for `apu` and
400 for `.bot`, with −1px tracking. The domain suffix uses on-surface-variant;
the name uses on-surface. Navigation uses the standard shared drawer title,
without a separate top-bar wordmark.

Use at least one quarter of the displayed mark width as clear space around a
standalone mark, and at least 8px between mark and wordmark in a compact lockup.
The Home hero centres the mark at 112px (96px at compact widths), with the
wordmark and purpose beneath it. Vision and Mission follow the hero as a separate
sibling section. Compact attribution may use 30px. The former 40px navigation
mark belonged to the retired website top bar; do not add it to the shared bottom
controls. Below 24px, use the tested favicon asset,
not a newly simplified drawing. Never stretch, crop, bevel, outline or shadow
the shapes individually. Background glow belongs to the surface, not the mark.

## Variants [A/I]

- Quiet identity: the existing monochrome mask, using the surrounding semantic
  on-surface colour. Use for navigation, controls and the reading experience.
- Quiet opening identity: the canonical PNG remains visible before website
  readiness and without JavaScript, with theme-specific black/white treatment.
- Expressive Home hero: four individually translucent RGBY elements, shown only
  after website readiness. Use the Skyzai identity-phase tokens appropriate to
  the selected appearance, including warmer variants. Colour is decorative,
  never a status, permission or category.
- Still expressive identity: the same four-colour composition without animation.
  This is the Home hero's unsupported-animation and reduced-motion fallback after
  readiness. Before readiness and without JavaScript, retain the quiet PNG.
- Forced colours: system text colour; no motion. Recognition must not depend on
  distinguishing red, green, blue and yellow.

## Motion [A]

`identity.js` builds a bounded random sequence once per loaded document. Every
settled assignment contains each of the four palette colours once. Four fill
animations share a 64-second cycle: eight 8-second steps, each holding for 6.8s
and crossfading for 1.2s. The final assignment equals the initial assignment so
the loop does not jump. Intermediate colours occur during a crossfade; overlap
uses isolated additive light compositing (`plus-lighter`) with the original
0.7 alpha per element. Do not let the top polygon simply cover its neighbor:
green plus blue contributes cyan, red plus green yellow, and red plus blue
magenta. Brand pigments remain the shared identity tokens, so their mixed
shades differ from pure RGB primaries. The logo is an isolated group; page
glow and background do not participate in its internal mixture.

For source channels in 0–1, add premultiplied colour and alpha and clamp each
sum at 1. Two pure green/blue shapes at alpha 0.7 give an opaque overlap near
(0,179,179), not opaque full-intensity (0,255,255). Do not falsely describe
that as pigment mixing or change the canonical geometry to obtain it.
Rendered-pixel tests must check both browser engines and stacking-order
independence, not merely the presence of a CSS declaration.

Only fill changes. No flashing, geometric movement or randomized timing. No
audio. No remote request, local-storage entry or user tracking. Fill animation
can repaint; this is not a claim of compositor-only or zero-cost rendering.

The navigation's **Decorative motion** control pauses/resumes both background glow
and logo. Ordinary pause retains animation phase. Offscreen and hidden-document
states pause work. Reduced motion and high-contrast settings take precedence
and select a still composition. Appearance changes use the new palette while
retaining the clock position. Unsupported or failed animation must leave the
static mark and navigation usable. Never add another motion control to the hero.

Two independent colour pools move inside a fixed, clipped rounded boundary.
`atmosphere.js` replans each leg independently rather than repeating keyframes.
Each pool shuffles a fresh 3×3 spatial bag: centre, four edges and four corners,
at 8%, 50% and 92% on each axis, with ±2% jitter. Each uninterrupted bag visits
every region once; random order and new coordinates prevent a prerecorded loop.
The gradient peaks are centred in 124%-sized layers; translation compensates
for that size so the actual colour peak reaches the requested field coordinate.
The fixed vertical feather reaches full visibility at 8% and stays full to 92%,
so corner visits do not disappear under the old footer mask.

Only transforms animate, with a fresh distance-sensitive approximately 7–12.4s
leg and gentle easing, no dwell, per-frame JavaScript, animated blur or scale.
One completion callback plans the next leg; pause retains its clock, and stale
callbacks cannot restart a cancelled composition. Opacity and semantic colour
roles stay fixed. The warm hero's non-filled links use the stronger semantic
on-primary-container ink to retain contrast over the moving field and states.
These are expressive background timings, not control timings.
Verify visible displacement, not only an animation name or a “Pause” label.

Fine-pointer hover crossfades the additive colour artwork into the canonical
black SVG mask in light appearances, or white in dark appearances, over the shared 600ms identity-settle token; pointer exit
crossfades back. Complementary opacities and isolated additive layer composition
avoid a dark dip. The mask retains normal source-over 0.7 alpha per polygon;
the four moving-colour paths retain their exact geometry underneath.
Hover pauses the colour clock; pointer exit resumes it. Neither squares nor
the logo's position move. Reduced motion switches without a transition.
Unsupported additive compositing uses the static monochrome rest ink.
This is a decorative inspection state, not an action; do not create a keyboard
stop just to hover a noninteractive mark. Forced-colour system ink takes priority.

## Entrance and outline [A/I]

Bare URL and `#overview` lead to the shared entrance. Exactly three audience
roots exist: Individual (`#individual`), Organization (`#organization`) and Machines
(`#machines`). Existing deep links keep working and bypass the entrance.

Three whole-card links use Material container/on-container pairs, state layers,
visible keyboard focus. Filled cards are flat at rest (level 0), rise to level
1 on hover, and return to level 0 on focus/press with their independent focus
ring/state layer. Labels and actions are present without hover. Selection enters the
quieter page, scopes its outline and focuses the destination heading.
**All APU** is a structural parent inside branches, never a redundant label
on the entrance. It is not a browser Back action.
Privacy, availability and the published source tree remain shared utilities,
not a fourth audience or a child of Individual. Brand links return to the entrance.

## Source and release boundaries [A]

The earlier rounded mark is retained in the product's
`docs/identity/archive/2026-09-13-before-chamfer/`. Do not overwrite that provenance
or alter the user's Desktop originals. The expressive SVG is generated inline
from the current website asset during the allowlisted build; it is not a
separately hand-drawn master. Identity changes do not establish app availability,
signup, hosting, legal approval or deployment.

## Artwork: Material Bridge rendering, product-use subjects [I]

Active direction — 2026-09-21. Material Bridge is the **rendering style**, not a
bridge-building subject or Mediterranean setting. We inspected the community
Figma file [Building a Bridge with Design Kit](https://www.figma.com/design/0eXiAhuAlRCjVbthlcsl6X/?node-id=1-6178),
including its cover and recap. Use simplified geometric planes, tactile matte
grain, restrained depth, generous space and soft, deliberate light.

Start with the customer's activity. Six distinct scenes now express:
conversation in a reading corner; a colleague handover; a sourced account
passing into a scenario and proposed note; related notes; deliberate recording
on a train; and selecting what to keep. Do not imply shipped integrations,
automatic truth, privacy certification or a working interface through the art.

### One scene, one story

The [scene registry](../assets/artwork/scenes.json) owns current identities,
hashes, descriptions and permitted placements. Nine current scenes have fifteen
placements: six entrance scenes appear twice, on the preview card and **that
card's destination hero**. Three supporting scenes appear once each: reading
personal notes, beginning work after a handover, and reconsidering a winter
journey. Never reuse them for another story, site or app empty state. The nine
originals share rendering language, not repeated settings or compositions.

[A] On October 11 the owner removed the group-reading illustration `apu-we.webp`
from Organization's `#apu-website` section. Its exact image bytes and retired
inventory entries are preserved under
`90_ARCHIVE/2026-10-11_organization-illustration/` in the repository. This decision
does not retire the Organization card/hero, its continuation scene or `apu-me.webp`.

Cards retain decorative empty alternatives; destination and outcome figures describe the
actual scene. All nine are 1200 × 800 WebP, 3:2, under 60 KB each. Keep meaningful
subjects within the safe crop. Retain width/height, passive figures, full-bleed
media and spacing outside glow-bearing sections. Owner rule (2026-09-25): an image in a
card meets the card's border and the card's radius clips it; never put a border, mat,
inner rounded corner or shadow ring around an image. Card-to-hero
transitions and text movement remain; respect reduced motion. Illustrations
never change hue when appearance switches.

### Still first; matching motion only

The predecessor films are retained in source custody but **not published**:
they depict old scenes. There is no hover film in this set. The existing media
controller and its safety tests remain for a future matching film. Never put
an old movie over a new still. Any future extension must use the same scene,
be silent, optional, intent-loaded and stop on exit, navigation, hidden document,
dialogs, reduced motion or data saving. Touch and keyboard lose no information.

### Explanations belong beside their subject

The voice page uses actual Google Symbols and HTML text for the intended hold,
lock and cancel gestures. The data page distinguishes conversation, useful notes
and separate provider processing. These are explanatory diagrams, not recording
controls or privacy guarantees. Real outline demonstrations remain code, not
painted screenshots. Avoid decorative closing scenes that repeat the same story.

The two Flutter welcome scenes and the standalone seed-sheet are original,
small native vectors—not reused marketing images. They are still, decorative,
excluded from accessibility focus, and follow the host's semantic colours.
Only settled, genuine empty states admit them. Suppress during drafting,
recording, loading, recovery, search, nested emptiness, keyboard use and cramped
layouts. Ordinary notes stay visually quiet. The standalone illustration is
currently limited to the direct-authoring root; other modes have no proven
idle signal and remain unillustrated.

### Borderless does not mean spaceless [I]

Treat the full painted and interactive bounds as the card, even with no visible
border or fill. Keep at least 32px between neighboring cards. A glow-bearing
hero or entrance leaves 48–80px of external clear space before the next section;
padding inside the glow is not a substitute. The same clearance separates
outcome illustrations from copy. Maintain full-bleed carousel flow without
adding edge masks, white bars or clipping keyboard focus.

### Launch storytelling [I, owner-directed 2026-09-22]

Lead each audience page with a benefit and one on-page proof. Organization
progresses from purpose, through a source conflict, to a useful handover.
Machines progresses from distinct app contributions, through a source revision,
to scoped continuity. Agentz proposes action; it is not an invented live step
in the Circle–RealityFutures sample. One mounted sample presenter moves between
audience and full-workspace views; never duplicate its state or live region.

Remove repetitive development paragraphs and explanations of what a normal
link does. Keep compact Sample labels beside demonstrations, actual processing
information beside the AI guide, and service status once in Accounts & pricing.
This copy decision does not certify account isolation, deployed integrations,
retention, deletion or launch acceptance. Do not replace caveats with unsupported
"live now" claims. The eight-scene audit and exact new prompts are retained in
`docs/artwork/2026-09-22-audience-launch/`.

### Provenance and archived direction [A]

All six scenes were generated with the built-in image tool. The first output
provided style-only reference for the remaining five; no subject was reused.
Exact prompts, PNG masters, predecessor exports, previous guide text and their
hashes remain in the repository at
`docs/artwork/2026-09-21-product-use/`. The preparation script performs only
mechanical resizing and WebP encoding. This is local visual implementation,
not evidence of production release or product behavior.

## Reuse across Skyzai: reference, then adoption [I]

APU is the working reference implementation for this entrance pattern, not a
second ecosystem design authority. Start future sites from the reviewed APU
shell and the current Skyzai tokens/components; do not redraw the navigation,
appearance controls, motion controller or card states from screenshots.

Reuse the foundation, not every product's copy or identity. Three audience
cards are appropriate here because APU has three audiences; do not invent
three categories for another product. Preserve each product's meaning and logo.
Different stories can use the same geometry, spacing, interaction and art
direction without becoming identical marketing pages.

Promotion path: local APU change and QA → source-owned Skyzai guide revision →
one versioned guide release → explicit product-by-product adoption and QA.
Never reverse-sync a product token override into the canon automatically.
A design-reference change is not permission to publish or edit unrelated apps.

For this candidate, Skyzai reader integration is **pending reconciliation** of
the existing unfinished 8.0.13 brand worktree. Do not create a competing active
edition or treat this supplement as a completed upstream guide release.

## State-machine acceptance for future builders [I]

Verify the states, not just screenshots:

1. Bare URL, overview and invalid route: three usable cards and no top
   application bar. The shared bottom dock remains the persistent navigation
   entry. Sample identity remains at interactive examples; service availability
   has one shared home under Accounts & pricing.
2. Audience and deep link: correct branch and ancestors, current node open;
   structural parent returns to entrance; browser Back remains browser history.
3. Shared utilities: no invented Individual parent. Exactly one outline
   instance is presented in the shared modal drawer at every width. Closing
   returns focus safely; resizing preserves a usable drawer and reading layout.
4. Cards: flat rest, Material level 1 on hover, level 0 on focus/press, visible focus and
   pressed state; keyboard and touch activation work without hover. Passive
   artwork does not elevate as if clickable.
5. Transition: card-to-hero is optional, uses Material duration/easing tokens,
   and cannot block routing. Rapid activation, Back, capture rejection, hidden
   tab and missing animation APIs must not resurrect a stale destination.
6. Logo: centred Home hero at 112px/96px, with Vision and Mission in the following
   sibling section. Before readiness and without JavaScript, show the quiet PNG
   in black or theme-inverted white. After readiness, only the Home hero exposes
   the generated coloured SVG: four stationary polygons, individual 0.7 alpha,
   random colour cycle;
   fine-pointer hover restores black in light appearances or white in dark appearances at the same alpha and pauses the clock.
   Pointer exit resumes. Forced colours wins; reduced motion stays still.
7. Closing scene: correct audience, horizontally centered, no duplicate
   controls; glow scrolls with the section and shares navigation pause.
8. Test both browser engines, four appearances, compact/expanded widths,
   200% text, keyboard, reduced motion and failure paths. Automation does not
   substitute for physical-phone or manual screen-reader acceptance.

The card-to-content relationship follows the
[Material card container-transform guidance](https://m2.material.io/components/cards/web).
The elevation state map follows Google's
[filled-card tokens](https://raw.githubusercontent.com/androidx/androidx/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3/tokens/FilledCardTokens.kt).
An elevated card instead uses rest 1 / hover 2 / focus and press 1;
drag levels are not a stronger-hover treatment. The website uses semantic
whole-card anchors and the existing Skyzai elevation tokens, not a native
Compose component. Its XL poster shape and audience container palettes are
explicit editorial customizations; they do not redefine component states.
The browser implementation treats transitions as an enhancement, following
[the View Transitions specification](https://www.w3.org/TR/css-view-transitions-1/#transitions-as-enhancement).

## Shared APU navigation and conversation pattern

The website is the first reference host, not proof that all Skyzai products have adopted it. `ApuOutlineNav` remains read-only and capability-free. The bullet presentation and pure `focusNavigation` projection are opt-in; the authoring app's existing behavior stays unchanged.

Use one stable-ID tree. At the entrance show Individual, Organization and Machines. Inside a node, show its ancestors, a plain heading without a bullet, and its children. Ancestor separators clarify the path; do not style it as a row of unrelated underlined buttons. A child bullet/link opens that node; its separate caret folds children. Up means structural parent; Back means browser history. Leaf nodes keep their ancestors and utilities. Search acts inside the focused branch. A viewport-filling mind map shows actual connected nodes branching from APU—not columns of lists. Its Outline / Mind map switch changes presentation only, preserving the same IDs and fold state. Use native links, scrollable keyboard-accessible graph, Escape, visible close and synchronous focus return. Never require dragging to reach a page. Utilities are outside the three customer roots and remain accessible in either view.

Remove footer chrome only after relocating contact, privacy, identity, press, attribution and motion controls to navigation. Keep the contained atmosphere and conversation continuation without redundant closing scenes. Ordinary app work remains visually quiet; marketing glow is not an app-state indicator.

Personal projects use OSK-A; organization projects use VMOSK-A. APU connects useful notes to objectives and asks a short question where meaning or placement is uncertain. Emerging objectives remain possible; never manufacture relevance, erase disagreement or force users into routine filing/review. Private visitor conversation is not company property. Persistent organizational contributions need explicit scope/consent and actual memory admission.

Until a live chat adapter passes its own privacy, abuse and session-isolation gates, label any guided choices and replies as predefined examples. Never make local search or preset responses impersonate live AI. The press kit in `press/apu-press-kit.zip` carries preview-qualified copy, exact identity exports, original generated artwork and usage/provenance instructions.

Reference interactions: [Workflowy navigation](https://workflowy.com/help/navigate-around) distinguishes zoom, fold and ancestors; [Android navigation drawers](https://developer.android.com/develop/ui/compose/components/drawer) distinguishes persistent and modal navigation. This is a web adaptation, not a claim of native Compose certification.