Logo
Two rounded squares, one outlined and one filled, then the wordmark “dta”. It links home.
Mark and wordmark
Story: /stories/logo/default/
Guidelines
Section titled “Guidelines”- Once per page, top left. The mark alone is decorative; the link is named “dta, home”.
- The filled square moves onto the outlined one on hover (
motion.duration.slow,motion.ease.standard): a token changing a component. Reduced motion turns it off.
Tokens used
Section titled “Tokens used”Read from the component’s source:
--action-bg--action-subtle--border-strong--fg-default--font-sans--motion-duration-slow--motion-ease-standard--radius-sm--space-1--space-2--stroke-focus--stroke-ink--type-title-line-height--type-title-size--type-title-weight