Atom · draft · v1.1.0 · owner: Site system lead · contract 19 of 20 points (open: figma)
Do and don't
Do: The lockup
Rendered by logo.tsOpen example: Logo · Do: The lockup Use the full-page example to follow page links.
Do: Standalone mark
Rendered by logo.tsOpen example: Logo · Do: Standalone mark Use the full-page example to follow page links.
Do: Optical small mark
Rendered by logo.tsOpen example: Logo · Do: Optical small mark Use the full-page example to follow page links.
Do: Outlined name
Rendered by logo.tsOpen example: Logo · Do: Outlined name Use the full-page example to follow page links.
Don't: Repeated in content
Rendered by logo.tsOpen example: Logo · Don't: Repeated in content Use the full-page example to follow page links.
Don't: Stretched or recoloured
Rendered by logo.tsOpen example: Logo · Don't: Stretched or recoloured Use the full-page example to follow page links.
Rules
| Rule | Why | Check |
|---|---|---|
| Native lockup placements remain 22/26/34 px; standalone normal mark is at least 32 px, optical small mark is 16–24 px, and outlined wordmark has at least 24 px visible cap-height. Preserve every viewBox aspect ratio. | A nonempty SVG can still violate its optical minimum; real styled consumers must measure the visible word path as well as the SVG viewport. | Automated: tests/site/logo-sizing.spec.ts |
| 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 |
| The existing website lockup remains in the header and footer; standalone asset variants do not authorize additional page placements. | System asset support and website placement are separately governed. | Automated: scripts/site/system/check-pages.ts (.wordmark only in header and footer) |
| Inline variants are decorative hidden SVGs in currentColor; their labelled parent supplies the accessible name. Standalone SVG exports carry the Loom image label. Preserve the aspect ratio and minimum size for each variant. | Paint, naming and optical-size obligations remain explicit across supported uses. | Automated: tests/unit/site-system.test.ts |
API
| Prop | Type | Required | Default | What it does |
|---|---|---|---|---|
variant | lockup | mark | mark-small | wordmark | No | "lockup" | Lockup: existing 26 px core signature, 22 px at viewport widths up to 380 px, and 34 px in the footer. Mark: standalone symbol at 32 px or above. Mark-small: optical 16–24 px symbol/favicon cut. Wordmark: outlined Archivo name at 24 px visible cap-height or above. Parent supplies accessible name and placement. |
Contract details
The full contract: identity, anatomy, variants, states, tokens, layout, motion, accessibility, content, tests
Identity
| Aspect | Value |
|---|---|
| Id | logo |
| Layer | Atoms |
| Category | brand |
| Owner | Site system lead |
| Status | draft |
| Version | 1.1.0 |
| Source | apps/showcase/site/system/atoms/logo.ts (private repository; the contract and the render function are this one module) |
| Version | Date | Change |
|---|---|---|
| 1.0.0 | 2026-10-26 | D-SITE-019 refinement: measured woven square, optical small cut and retained outlined Archivo; candidate final geometry remains under review. |
Use when
- The lockup in existing header and footer positions. Why: The name and mark identify the home link.
- A standalone identity asset or favicon at its supported size. Why: Mark, small-mark and wordmark variants have distinct asset roles without authorizing new website placements.
Do not use when
- Repeated as arbitrary content decoration. Why: Use expressive IdentityArt for large illustrative moments.
- Recoloured in a dye or stretched. Why: The identity uses ink or cotton and preserves its authored aspect ratio.
Anatomy
| Part | What it is |
|---|---|
| root | svg lockup (mark and wordmark) inside a.wordmark. |
| mark | Four precisely joined turning modules, with an optical small cut. |
| wordmark | Loom in Archivo, outlined. |
Made of: tokens:colour.
Used in: footer, header, task-header.
Variants
| Variant | When | Why |
|---|---|---|
| lockup | Existing core/header at 26 px, 22 px up to 380 px viewport width; existing footer at 34 px. | Mark and name identify the home link at the retained scale. |
| mark | Standalone identity assets at 32 px or above. | The normal cut preserves joined-module detail at larger sizes. |
| mark-small | Favicon or compact asset at 16–24 px. | An optical cut preserves open small-size joins; use lockup for the existing 22/26 px core and 34 px footer signature. |
| wordmark | Standalone outlined name with at least 24 px visible cap-height. | The name can identify a standalone asset without adding a new expressive illustration. |
States
| State | Rendered or not applicable |
|---|---|
| default | default |
| hover | Not applicable: The parent link (wordmark) carries hover; the logo itself does not change. |
| focus-visible | Not applicable: The logo does not take focus; links and buttons inside it carry their own focus ring. |
| active | Not applicable: The logo cannot be pressed. |
| disabled | Not applicable: The logo has nothing to disable. |
| loading | Not applicable: The logo is rendered at build time and is complete when the page loads. |
| empty | Not applicable: The logo is not rendered without content; the builder skips it. |
| error | Not applicable: The logo shows no data that can fail. |
| current | Not applicable: The logo has no current item. |
| visited | Not applicable: The logo is not a link. |
| expanded | Not applicable: The logo does not open or close. |
Tokens
| Part | Token |
|---|---|
| root.fill | currentColor (ink on cotton, cotton on ink) |
| lockup.height | 26 px core; 22 px at viewport widths up to 380 px; 34 px in .footer-name |
| mark.height | --logo-mark-height → --space-9 (32 px) |
| mark-small.height | --logo-small-mark-height → --space-8 (24 px) |
| wordmark.height | --logo-wordmark-height → --space-9 (32 px SVG; at least 24 px visible cap-height) |
| --logo-padding-space-3 | var(--space-3) |
| --logo-color-ink | var(--ink) |
| --logo-padding-left-space-5 | var(--space-5) |
| --logo-margin-left-space-5 | var(--space-5) |
| --logo-border-left-rule-hair | var(--rule-hair) |
| --logo-border-left-ink | var(--ink) |
| --logo-font-type-small-strong | var(--type-small-strong) |
| --logo-gap-space-3 | var(--space-3) |
| --logo-mark-height | var(--space-9) |
| --logo-small-mark-height | var(--space-8) |
| --logo-wordmark-height | var(--space-9) |
Layout
| Aspect | Value |
|---|---|
| min | 22/26 px core lockup and 34 px footer lockup; 24 px optical small mark by default (supported 16–24 px); 32 px normal mark; 32 px wordmark SVG with at least 24 px visible cap-height |
| breakpoints | Required review at 390, 768, 1024 and 1440 px; execution is not implied by this declaration; the existing core lockup is 22 px up to 380 px and 26 px above; the footer stays 34 px. Standalone variants retain their component-token sizes at these breakpoints and preserve their authored aspect ratios. |
| wrapping | Never. |
| textExpansion | The outlined name does not expand; translated parent labels remain outside the SVG. |
Spacing and rhythm
| Aspect | Value |
|---|---|
| internal | The lockup's own clear space (one ribbon width (14/48 of visible mark); at least 6 px around the 26 px lockup). |
| external | Set by the existing header or footer; standalone assets retain their own clear space. |
| rhythm | Header and footer only. |
Motion
| Aspect | Value |
|---|---|
| None | The mark is still; it represents finished cloth. |
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 | Inline variants are aria-hidden, nonfocusable SVGs; a labelled parent owns meaning. Standalone generated exports are named images. |
| name | Existing home link: Loom home / Loomホーム. Standalone asset: Loom, supplied once by the image or its parent. |
| keyboard | The SVG has no interaction. Existing home link retains native keyboard behavior. |
| focus | Existing home link is first in the header after the skip link; standalone assets take no focus. |
| screenReader | The parent link or standalone image supplies one name; no duplicate inline SVG announcement. |
| contrast | Use measured current foreground/ground pairs; no inherited contrast numeral. |
| target | The existing home link is 44 px tall; static asset variants are not interactive targets. |
Content
| Slot | Length | Voice |
|---|---|---|
| accessible name on the owning link or standalone image (not a Logo prop) | One concise name: Loom home for the home link, or Loom for a standalone identity image | The inline SVG is decorative and hidden. Supply its purpose once on the owning link or image; do not announce both an image name and a duplicate wordmark. |
Good: “Loom home” · “Loom”
Bad: “Logo” · “Loom logo Loom home (duplicate announcement)”
Japanese: The outlined wordmark stays Loom in every language. The existing Japanese home-link name is 「Loomホーム」 and belongs to the parent, not a translation prop on Logo. The standalone owner supplies the name once; no new placement or native review is established here.
Icons and illustrations
None: this element uses no icon or illustration of its own.
Decisions and exceptions
- D-SITE-001: Loom Site is the site's own design system, governed by Loom
- D-SITE-019: V4 identity, break and repair, and the supporting family
Usage
235 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.