Rubin Observatory Design System
References the Rubin Observatory design system's CSS custom properties for colors, spacing, and elevation to build visually consistent user interfaces.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Distinguishes between foundational (`--rsd-*`) and application-specific (`--sqo-*`) design tokens.
- Complete reference of CSS custom properties for colors, spacing, shadows, and border radii.
- Provides guidance on responsive (`em`) vs. fixed (`rem`) spacing units.
- Outlines best practices for token usage, theming (dark mode), and component styling.
- Includes tokenized paths for official brand assets like logos and favicons.
Use cases
- Styling a new UI component according to Rubin Observatory brand guidelines.
- Finding the correct CSS variable for a specific color, spacing value, or shadow effect.
- Refactoring hard-coded styles to use the standardized design token system.
FAQ
What key capabilities does this skill provide?
It provides a comprehensive reference of all CSS tokens for colors, spacing (responsive vs. fixed), shadows, and border radii. It also distinguishes between foundational (`--rsd-*`) and application-specific (`--sqo-*`) tokens, ensuring Claude uses the entire design system correctly.
When should I use this skill?
Use this skill when building or styling frontend components for the Rubin Science Platform, particularly with Next.js. It's essential for ensuring visual consistency, applying correct theming, and using the proper design tokens for any UI task.
How does this skill improve my workflow?
It saves you from looking up design token names and values. Claude can directly apply the correct CSS variable (e.g., `var(--rsd-color-primary-600)`) instead of hardcoding hex codes, leading to faster, more accurate, and maintainable UI development.
What's the difference between `--rsd-*` and `--sqo-*` tokens?
`--rsd-*` tokens are foundational properties from the core style dictionary (e.g., base color palettes). `--sqo-*` tokens are application-specific variables that build on the base tokens for use in apps like Squareone (e.g., spacing, shadows, component-specific styles).
What does this skill do?
This skill gives Claude a complete reference to the Rubin Observatory design system's CSS custom properties. It provides instant access to all official colors, spacing units, elevation shadows, and brand assets, enabling Claude to style components according to established guidelines.
Related skills
Frontend Design
Generates distinctive, opinionated UI designs that move beyond generic templates and reflect a product's unique brand identity.
Design Tools142,11812 ptsFrontend CSS Standards
Writes consistent, maintainable CSS by adhering to project methodologies, design systems, and performance best practices.
Design Tools21312 ptsNetresearch Branding
Applies Netresearch brand identity, design standards, and technical specifications to web projects, documentation, and digital content.
Design Tools612 pts