Tenzir design system
Tenzir design system: brand tokens (colors, typography, spacing, shadows, motion), design principles and invariants, and official logos. Use when styling anything Tenzir-branded: web UIs (shadcn/ui, Tailwind, plain CSS, or any frontend framework), Quarto documents and reports, slide decks, or diagrams (Mermaid, Graphviz). Also use when the user asks about Tenzir brand colors, fonts, logos, gradients, dark mode, or how to make output look like a Tenzir product.From its SKILL.md
npx -y skills add tenzir/skills --skill tenzir-design-systemAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 3 stars3 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
3.5 KB, as published. Nobody here has run it
Tenzir 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.