About tenzir-design-system
tenzir-design-system is a tool-agnostic design-system skill for work using Tenzir branding. It pairs authoritative YAML tokens and brand assets with guidance on design decisions and applying those values.
Key features
- 01Machine-readable brand and design tokens
- 02Color, typography, and layout guidance
- 03Motion, iconography, and branded-effect rules
- 04Light and dark mode conventions
- 05Official logo assets
Use cases
- 01Find and apply colors or typography in a design
- 02Set spacing, radius, and elevation consistently
- 03Choose brand assets for light or dark interfaces
Install
Copy the command and run it in a terminal.
npx skills add https:/After installing, type/tenzir-design-systemin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
source.mdassets/logos/logo-dark.svglogo-light.svglogomark-dark.svglogomark-light.svgdata/brand.ymltokens.ymlreferences/branded-effects.mdcolors.mdelevation.mdiconography.mdinvariants.mdlayout.mdmotion.mdtypography.mdDetails
From the project READMETenzir Design System
Canonical home of the Tenzir design system: machine-readable tokens, design principles, and brand assets. The skill defines values and design decisions; how those get realized in any given tool is out of scope.
The YAML data files are authoritative for all values; the markdown captures the design decisions: how to choose and apply tokens. When a snippet and the YAML disagree, the YAML wins.
Data Files
- data/brand.yml: color palette, semantic roles (primary/success/warning/…), graph colors, typography, and logos. Follows Quarto's brand.yml schema, so Quarto/Shiny can consume it directly.
- data/tokens.yml: everything beyond that schema, under the
tenzir:key: spacing, radius, type scale, shadows, opacity and tints, motion, z-index, breakpoints, and the dark-mode mapping. - source.md: scope and non-goals.
Question Routing
| Question | Load |
|---|---|
| What's the hex/value of a token? | data/brand.yml, data/tokens.yml |
| Which color/font/size should I use? | references/colors.md, references/typography.md |
| Spacing, radius, breakpoints, z-index? | references/layout.md |
| Shadows, overlays, surface stacking? | references/elevation.md |
| Animation durations and easing? | references/motion.md |
| Which icon set/style? | references/iconography.md |
| Branded effect (gradient border, gradient text, kicker, prose)? | references/branded-effects.md |
| The non-negotiable design rules? | references/invariants.md |
| Scope and non-goals? | source.md |
Load only the files the current task needs. Prefer design tokens and existing component patterns over bespoke styling.
Components
There are no Tenzir component specs. The system contributes the invariants (tokens, flat surfaces, elevation, gradients, iconography), not component anatomy. Build components with your project's library and honor the invariants.
Conventions
- The skill is tool-agnostic: it owns the values (data/) and the
design decisions (the
references/principle docs and the invariants). How those get realized in a given tool is out of scope. - Light and dark are both strict, first-class modes that share one palette and remap semantic roles; keep background noise minimal.
Assets
Official logos live in assets/logos/. Variant names describe the artwork
color; dark artwork goes on light backgrounds:
logo-dark.svg,logomark-dark.svg: for light backgroundslogo-light.svg,logomark-light.svg: for dark backgrounds
The logomark is the icon-only mark; use it where the full logo has already appeared or space is tight.