Understand Before You Build
- HTML
- CSS
- inset
- scroll-snap-type
- margin-inline
- Content-visibility
- Scroll-Driven Animations
- Isolation
- @Container
- @layer
- :not()
- :is()
- :Where()
- :has()
- :target
- backdrop-filter
- :root
- Color-scheme
- Animations
- Selectors
- Object-fit
- Logical Pseudo-Classes
- :scope
- Properties
- Performance
- Aspect-ratio
- State Pseudo-Classes
- Positioning
- Resize
- Structural Pseudo-Classes
- Responsive Design
- Units
- Root & Scope Selectors
- Scrolling
- At-Rules
- Target & URL Selectors
- Spacing
- Functions
- Attribute Selectors
- Layouts
- Basic Selectors
- Filters & Effects
- Colors & Typography
- Flexbox
- Combinator Selectors
- Grid
- Form & UI State Selectors
- AI CSS Generator
- Sass
- CSS Frameworks
- React UI
- Figma
Basics of Design systems
Design System is a collection of reusable UI components, rules, styles, and guidelines used to build consistent applications.
It helps designers and developers create scalable and maintainable UI.
Simple Meaning
Instead of designing and coding every screen from scratch:
- Create reusable UI rules once
- Reuse them across the project
This creates consistency and faster development.
Why Design Systems Are Important?
- Consistent UI
- Reusable components
- Faster frontend development
- Easy team collaboration
- Scalable architecture
- Easy maintenance
- Better user experience
Real World Example
Large companies use design systems:
- Material Design
- Human Interface Guidelines
- Carbon Design System
- Atlassian Design System
Main Parts of a Design System
- Colors
- Typography
- Spacing
- Grid system
- Buttons
- Forms
- Icons
- Cards
- Modals
- Tables
- Themes
- Responsive rules
1. Design Tokens
Design Tokens are reusable design values.
These are the foundation of a design system.
Examples
[code theme="dark"] Primary Color Font Size Spacing Border Radius Shadow [/code]SCSS Example
[code theme="dark"] $primary:#ff6600; $radius:12px; $spacing-md:16px; [/code]Tailwind Example
[code theme="dark"] colors:{ primary:"#ff6600" } [/code]Design Token Visual Example
[grid]
[/grid]
2. Typography System
Typography rules define:
- Font family
- Font sizes
- Line height
- Font weights
- Heading hierarchy
Example
[code theme="dark"] Heading 1 → 48px Heading 2 → 36px Body Text → 16px [/code]Typography Scale Example
[grid]
[/grid]
3. Color System
Design systems define consistent color palettes.
Common Colors
- Primary
- Secondary
- Success
- Error
- Warning
- Background
- Text colors
Example
[code theme="dark"] Primary → Blue Danger → Red Success → Green [/code]Color Palette Example
[grid]
[/grid]
4. Spacing System
Consistent spacing creates professional UI.
Example Scale
[code theme="dark"] 4px 8px 12px 16px 24px 32px [/code]Why Important?
- Visual consistency
- Cleaner layouts
- Better responsive design
Spacing System Example
[grid]
[/grid]
5. Grid System
Grid systems help align UI consistently.
Common Grid
[code theme="dark"] 12 Column Grid [/code]Used For
- Responsive layouts
- Dashboard UI
- Cards alignment
- Page structure
Grid Layout Example
[grid]
[/grid]
6. Reusable Components
Design systems create reusable UI components.
Examples
- Buttons
- Cards
- Modals
- Inputs
- Dropdowns
- Navbar
Component Example
[code theme="dark"]Component Library Example
[grid]
[/grid]
7. Component Variants
One component can have multiple versions.
Button Variants
[code theme="dark"] Primary Secondary Outline Disabled Loading [/code]Variant Example
[grid]
[/grid]
8. States in Design Systems
Components support different states.
Examples
- Hover
- Active
- Focus
- Disabled
- Loading
- Error
Input State Example
[grid]
[/grid]
9. Themes
Modern systems support multiple themes.
Examples
- Light Mode
- Dark Mode
- Brand Themes
Theme Example
[code theme="dark"] :root{ --bg:white; } .dark{ --bg:black; } [/code]Dark Mode Example
[grid]
[/grid]
10. Design System + React
Frontend developers convert design systems into reusable React components.
Example
[code theme="dark"]11. Design System + Tailwind
Tailwind projects often create reusable UI systems.
Example
[code theme="dark"] .btn-primary{ @apply px-6 py-3 rounded-lg bg-blue-500 text-white; } [/code]12. Figma Design Systems
Designers usually create systems in:
- Figma
- Sketch
- Adobe XD
Figma Includes
- Components
- Variants
- Auto Layout
- Tokens
- Responsive layouts
13. Developer Handoff
Frontend developers inspect:
- Spacing
- Typography
- Colors
- Layout
- Responsive behavior
14. Large Project Benefits
- Faster feature development
- Easy UI scaling
- Consistent branding
- Cleaner frontend architecture
- Better developer experience
15. Common Problems Without Design Systems
- Inconsistent UI
- Duplicate components
- Different spacing everywhere
- Random typography
- Poor responsiveness
16. AI Generated UI Problems
AI-generated UI often creates:
- Inconsistent spacing
- Duplicate styles
- Poor responsive structure
- No reusable architecture
Developer Responsibility
- Create reusable components
- Maintain consistent design rules
- Optimize component structure
- Ensure scalability
Best Practices
- Use reusable tokens
- Create scalable components
- Maintain spacing consistency
- Use typography hierarchy
- Follow responsive rules
- Keep naming clean
Quick Summary
- Design Systems create reusable UI rules
- Design Tokens manage colors, spacing, typography
- Reusable Components improve scalability
- Figma systems help designers and developers work together
- Modern frontend development heavily depends on design systems
Design systems are one of the biggest foundations of scalable and professional frontend applications.