Atom · draft · v1.0.0 · owner: Site system lead · contract 19 of 20 points (open: figma)
Do and don't
Do: Reverse monochrome proof
Rendered by identity-sticker.tsOpen example: Identity sticker · Do: Reverse monochrome proof Use the full-page example to follow page links.
Do: Repair silhouette
Rendered by identity-sticker.tsOpen example: Identity sticker · Do: Repair silhouette Use the full-page example to follow page links.
Do: Word strip
Rendered by identity-sticker.tsOpen example: Identity sticker · Do: Word strip Use the full-page example to follow page links.
Do: Boundary silhouette
Rendered by identity-sticker.tsOpen example: Identity sticker · Do: Boundary silhouette Use the full-page example to follow page links.
Do: Healthy specimen
Rendered by identity-sticker.tsOpen example: Identity sticker · Do: Healthy specimen Use the full-page example to follow page links.
Do: Broken specimen
Rendered by identity-sticker.tsOpen example: Identity sticker · Do: Broken specimen Use the full-page example to follow page links.
Do: Finished edge
Rendered by identity-sticker.tsOpen example: Identity sticker · Do: Finished edge Use the full-page example to follow page links.
Don't: Not a measured result
Rendered by identity-sticker.tsOpen example: Identity sticker · Don't: Not a measured result Use the full-page example to follow page links.
Don't: Unknown variant
Rendered by identity-sticker.tsRefused by the element. identity-sticker: unknown silhouette
Rules
| Rule | Why | Check |
|---|---|---|
| Positive specimens declare their rendered initial state and document language; each registered visual variant has a positive example. | Machine and Library consumers need the same examples without turning declarations into execution evidence. | Automated: tests/unit/v4-example-coverage.test.ts |
| Use one of the seven distinct authored silhouettes and retain its caption. | Rotating the same knot does not preserve the selected sticker family. | Automated: tests/unit/site-identity.test.ts |
API
| Prop | Type | Required | Default | What it does |
|---|---|---|---|---|
tone | context | mono | No | "context" | Context-aware colour or a monochrome proof; the reverse variant retains its cut-outs. |
kind | boundary | word-strip | healthy | repair | reverse | broken | selvedge | Yes | A specific source-package silhouette. | |
lang | en | ja | No | "en" | Caption language. The English word-strip artwork remains labelled as such. |
Contract details
The full contract: identity, anatomy, variants, states, tokens, layout, motion, accessibility, content, tests
Identity
| Aspect | Value |
|---|---|
| Id | identity-sticker |
| Layer | Atoms |
| Category | identity |
| Owner | Site system lead |
| Status | draft |
| Version | 1.0.0 |
| Source | apps/showcase/site/system/atoms/identity-sticker.ts (private repository; the contract and the render function are this one module) |
| Version | Date | Change |
|---|---|---|
| 1.0.0 | 2026-10-27 | Refined the seven selected silhouettes with named component roles and transparent vector masters; final visual acceptance remains open. |
Use when
- Showing the identity family or a named decorative application. Why: Distinct silhouettes preserve the original family beyond one repeated mark.
Do not use when
- Substituting a sticker for an actual operational status. Why: StateBadge carries a record state; a sticker specimen is illustrative.
Anatomy
| Part | What it is |
|---|---|
| root | Figure with a visible caption |
| silhouette | Source-derived SVG with a variant-specific viewBox; proportions do not stretch |
| label | Translated name outside the geometry |
Made of: tokens-component.
Used in: identity-playground.
Variants
| Variant | When | Why |
|---|---|---|
| boundary | Boundary | Each source design communicates a different brand expression. |
| word-strip | Tightly woven | Each source design communicates a different brand expression. |
| healthy | Healthy state specimen | Each source design communicates a different brand expression. |
| repair | Route and repair | Each source design communicates a different brand expression. |
| reverse | Reverse mark | Each source design communicates a different brand expression. |
| broken | Broken state specimen | Each source design communicates a different brand expression. |
| selvedge | Finished edge | Each source design communicates a different brand expression. |
States
| State | Rendered or not applicable |
|---|---|
| default | default |
| hover | Not applicable: The identity sticker is not interactive, so it has no hover state. |
| focus-visible | Not applicable: The identity sticker does not take focus; links and buttons inside it carry their own focus ring. |
| active | Not applicable: The identity sticker cannot be pressed. |
| disabled | Not applicable: The identity sticker has nothing to disable. |
| loading | Not applicable: The identity sticker is rendered at build time and is complete when the page loads. |
| empty | Not applicable: The identity sticker is not rendered without content; the builder skips it. |
| error | Not applicable: The identity sticker shows no data that can fail. |
| current | Not applicable: The identity sticker has no current item. |
| visited | Not applicable: The identity sticker is not a link. |
| expanded | Not applicable: The identity sticker does not open or close. |
Tokens
| Part | Token |
|---|---|
| --identity-sticker-surface | var(--cotton) |
| --identity-sticker-ink | var(--ink) |
| --identity-sticker-on-ink | var(--cotton) |
| --identity-sticker-lettering | var(--font-display) |
| --identity-sticker-cutout | var(--on-dye) |
| --identity-sticker-fixed-ink | var(--field-ink) |
| --identity-sticker-mark-indigo | var(--indigo-ink) |
| --identity-sticker-mark-madder | var(--madder-ink) |
| --identity-sticker-mark-teal | var(--teal-ink) |
| --identity-sticker-on-dye | var(--on-dye) |
| --identity-sticker-on-saffron | var(--on-saffron) |
| --identity-sticker-indigo | var(--indigo) |
| --identity-sticker-madder | var(--madder) |
| --identity-sticker-saffron | var(--saffron) |
| --identity-sticker-teal | var(--teal) |
| --identity-sticker-caption | var(--type-small) |
| --identity-sticker-gap | var(--space-4) |
Layout
| Aspect | Value |
|---|---|
| breakpoints | Required review at 390, 768, 1024 and 1440 px. SVG scales uniformly. |
| wrapping | Caption wraps below the complete silhouette. |
| textExpansion | Translated captions are outside the fixed geometry; the word-strip stays English with an equivalent caption. |
Spacing and rhythm
| Aspect | Value |
|---|---|
| internal | Clear space inside the authored SVG viewBox. |
| external | Parent grid gap. |
| rhythm | One named silhouette per figure. |
Motion
| Aspect | Value |
|---|---|
| None | No intrinsic element animation. The optional claude-entrance consumer profile may translate below-fold structure once (20px, --dur-weave, --ease-enter, --stagger); reduced motion disables it. This preserved baseline entrance is separate from element playback. |
Runtime and reuse
Render-only element; mount any registered child enhancements separately. Preserve required Site CSS, fonts, responsive and locale rules from nativeElement.
Accessibility passport
| Aspect | Value |
|---|---|
| role | Figure with a visible caption |
| name | Translated specimen name in figcaption |
| keyboard | No keyboard interaction |
| focus | Not focusable |
| screenReader | The drawing is hidden; its caption names the decorative specimen. The word-strip artwork stays English |
| contrast | Dye fields retain paired cut-outs; foreground marks use context-aware ink. Monochrome/reverse proofs retain geometry |
| target | Not an interactive target |
Content
| Slot | Length | Voice |
|---|---|---|
| label | One descriptive phrase | Name the specimen, not an actual outcome. |
Good: “Healthy state specimen”
Bad: “Your system is healthy”
Japanese: Visible caption translations are drafts pending native review. Lettered artwork is English.
Icons and illustrations
-
art:v4-sticker-boundary -
art:v4-sticker-word-strip -
art:v4-sticker-healthy -
art:v4-sticker-repair -
art:v4-sticker-reverse -
art:v4-sticker-broken -
art:v4-sticker-selvedge
Decisions and exceptions
Usage
104 uses across the built pages (measured by npm run site:system).
Tests
| Aspect | Value |
|---|---|
| unit | tests/unit/site-system.test.ts: renders every do and don't example through the registry and checks the classes it owns |
| visual | Not yet: there are no screenshot baselines; the Library page is checked for sideways scroll at 1440 px by tests/site/system.spec.ts |
| a11y | tests/site/system.spec.ts: axe (0 serious or critical) on the element's Library page in light and dark |
| parity | scripts/site/system/check.ts: Library examples are rendered by the same render function the site imports |
Figma
not-yet: The Loom Site Figma library is the last stage of the plan; this element is not mapped yet.