Demonstration of Atlas Design System using CSS Layers for organized and maintainable styles
CSS Layers provide a way to organize and control the cascade order of styles. This design system uses layers to separate base tokens, semantic tokens, spacing, typography, effects, layout, components, utilities, and overrides.
@layer atlas.base, atlas.semantic, atlas.spacing, atlas.typography, atlas.effects, atlas.layout, atlas.components, atlas.utilities, atlas.overrides
• Organization: Clear separation of concerns
• Maintainability: Easy to find and modify specific
token categories
• Performance: Better browser optimization
• Flexibility: Easy to override specific layers
when needed
Contains all base color tokens including neutral, primary, blue, green, orange, yellow, and red color palettes.
Contains semantic color tokens that reference base colors for consistent theming across the application.
Contains all spacing tokens including number values and semantic spacing references.
Contains all typography tokens including font sizes, weights, and line heights for consistent text styling.
Contains border radius, stroke width, and elevation (shadow) tokens for visual effects.
Contains grid system tokens for responsive layout and navigation.
Beautiful gradient combinations using the design system's predefined gradient tokens.
A beautiful warm gradient that combines neutral and orange tones for a welcoming feel.
A subtle cool gradient perfect for professional interfaces and clean designs.
A fresh green gradient inspired by nature, ideal for eco-friendly and organic brands.
A luxurious golden gradient that adds elegance and premium feel to any design.
Contains utility classes for common patterns like horizontal scrolling and accessibility helpers.
The .scroll-horizontal class provides horizontal
scrolling functionality:
The visually hidden utilities help with accessibility by hiding content visually while keeping it available to screen readers.