skills.rest
lsst-sqre
lsst-sqreOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-system

Reference Rubin Observatory design system CSS variables and design tokens.

2|1|Updated Jan 7, 2021
Search Tags:#theming#design system#CSS#design tokens#front-end development#UI styling#component development
One-click install
npx skills add https://github.com/lsst-sqre/squareone --skill design-system-lsst-sqre
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/lsst-sqre/squareone/tree/main/.claude/skills/design-system
Command: npx skills add https://github.com/lsst-sqre/squareone --skill design-system-lsst-sqre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent UI styling and hardcoded design values lead to a fragmented user experience and slow development. This skill provides a complete reference to the Rubin Observatory design system's CSS variables and design tokens, ensuring consistent, maintainable, and themeable styling across all components.

Core Features & Use Cases

  • Comprehensive Token Reference: Details all available CSS variables for colors (primary, semantic, scales), spacing, border radius, elevations, transitions, and asset paths.
  • Two-Tiered Token System: Explains the distinction and usage of @lsst-sqre/rubin-style-dictionary (foundation tokens) and @lsst-sqre/global-css (application-specific tokens).
  • Dark Mode & Theming: Guides on implementing dark mode and other themes using CSS variable overrides.
  • Use Case: When styling a new button component, use this skill to select the correct primary color from the --rsd-color-primary-* scale, apply appropriate padding with --sqo-space-* tokens, and add a shadow using --sqo-elevation-*.

Quick Start

Apply the primary background color and medium spacing to a component using design tokens. background-color: var(--rsd-color-primary-600); padding: var(--sqo-space-md);

Frequently Asked Questions about design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply design tokens to style components consistently?▼

Design tokens are CSS variables like `--rsd-color-primary-600` and `--sqo-space-md` that enforce consistent styling across components. Reference the Rubin Observatory design system to select appropriate tokens for colors, spacing, and typography, then apply them via `var()` in your stylesheets to maintain a unified look.

What's the difference between Rubin Style Dictionary and global CSS tokens?▼

Rubin Style Dictionary (`@lsst-sqre/rubin-style-dictionary`) provides foundation tokens—base design values for colors, spacing, and typography. Global CSS (`@lsst-sqre/global-css`) extends these with application-specific tokens. Use foundation tokens as your baseline and global CSS tokens for Rubin-specific overrides and theme variations.

How do I implement dark mode using CSS variables?▼

Dark mode uses CSS variable overrides to swap color values at runtime. Define your component styles using design tokens like `--rsd-color-primary-*`, then override token values in a dark theme context. This approach lets you theme consistently without duplicating component code.

Can I use design tokens with React components and CSS Modules?▼

Yes. Import design tokens into CSS Modules as CSS variables and reference them with `var()`. React components apply these modules via the `className` prop. This pattern keeps styling decoupled from component logic while leveraging token consistency.

What token prefixes should I use for different design elements?▼

Use `--rsd-*` prefix for Rubin Style Dictionary foundation tokens (colors, spacing, typography) and `--sqo-*` prefix for squareone extensions. Each prefix isolates its token scope, making it clear which layer—foundation or application—a token belongs to.

Do I need to hardcode color and spacing values if I'm using design tokens?▼

No. Design tokens replace hardcoded values entirely. Instead of `color: #0066cc` or `padding: 12px`, use `color: var(--rsd-color-primary-600)` and `padding: var(--sqo-space-md)`. This ensures maintainability, consistency, and single-point control for theme updates.

Related Skills

Explore More Software Engineering Skills→
schalkneethlingschalkneethling
7

css-tokens

Generate a tokens.css file with CSS custom properties for theming and dark mode.

Community
Basic
twiced-technology-gmbhtwiced-technology-gmbh

ui-consumer

Guide @toolr/ui-design component usage, CSS tokens, and design conventions.

Official
Intermediate
zzoohubzzoohub

design-system

Standardize design tokens and component architecture across web and React Native.

Community
Advanced
caiokfcaiokf

conventions-css

Enforce CSS conventions with custom properties, scoping, and design tokens.

Community
Basic