Skip to main content
Digitaltableteur

Design system components

BrandLockup

The Digitaltableteur lockup: the mark in its brand disc beside the name in live Satoshi Bold, sized as one unit from the disc height so the parts never drift apart.

Status: alpha. Group: display. Markdown version: /design-system/components/brand-lockup.md

When to use

The Digitaltableteur lockup: the mark in its brand disc beside the name in live Satoshi Bold, sized as one unit from the disc height so the parts never drift apart.

When not to use

The contract records no forbidden uses.

Look-alikes

The contract names no look-alike with a deciding condition.

Props

BrandLockup props
PropTypeDefaultDescriptionRequired
size"sm" | "md" | "lg" | "xl"mdDisc height 32, 40, 64 or 80 px; the name and the gap scale with it. Defaults to "md".No
animatedbooleanfalsePulses the mark's three leading bars while true, driven by the consumer's hover or focus. Defaults to false.No
classNamestringnoneExtra class names on the root; set --brand-lockup-height here to resize at a breakpoint.No

Variants

  • Available sizes: sm, md, lg, xl (default md).

Invalid combinations

The contract records no invalid combinations.

Keyboard

BrandLockup keyboard behaviour
KeyBehaviour
GeneralBrandLockup has no tab stop; wrap it in a link or button to make it interactive.

Rules

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

BrandLockup rules
LevelRuleHow it is checked
MUSTARIA: The mark is decorative (aria-hidden); the visible name is the accessible name, also for a link around the lockup.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTARIA: Inside a link or button, hover and focus-visible scale the disc and recolour the name.Not yet verified: no evidence record. WCAG 4.1.2.
MUSTRequired stories produce no axe violations at the configured severity.Automated by npm run test:stories:matrix:ci. WCAG 2.5.8.
MUSTThe accessibility tree (role, name, state) matches the committed snapshot for every required story.Automated by npm run test:stories:matrix:ci. WCAG 1.3.1, 4.1.2.
MUSTThe component remains legible and operable under a real browser forced-colors: active pass.Automated by npm run test:stories:hc.
MUSTPositional, scale, and opacity motion is suppressed under prefers-reduced-motion.Not yet verified: no evidence record. WCAG 2.2.2, 2.3.3.
MUSTEvery documented keyboard interaction works as specified.Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.

Install and import

  • In-repo only. BrandLockup is not exported from @digitaltableteur/react, so there is no public import path.
  • Alpha components are internal and never exported.

Links