Rubin Observatory Design System

소개

Provides a comprehensive guide to the Rubin Observatory design system, detailing the full set of available CSS variables (custom properties) for styling components. This skill covers both foundational tokens from the Rubin Style Dictionary (`--rsd-*`) and application-specific tokens for the Squareone platform (`--sqo-*`). Use it when you need to apply correct branding, understand the token architecture, or find specific values for colors, spacing, elevations, border radii, and brand assets. It includes usage patterns and best practices to ensure consistent and high-quality UI development.

주요 기능

• Distinguishes between foundational (`--rsd-*`) and application-specific (`--sqo-*`) design tokens.
• 2 GitHub stars
• 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.

사용 사례

• 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.