RSK World - Responsive Design System | CSS Framework | Components & Tokens | RSK World

CSS3 Tokens Components Grid Themes

Responsive Design System provides a comprehensive CSS framework: design tokens (colors, typography, spacing, radius, shadows), light/dark themes, 12-column grid, utility classes. Components: buttons, cards, badges, alerts, forms, nav, list group; advanced: modal, tabs, dropdown, tooltip, breadcrumb, pagination, accordion. Typography, layout (stack, cluster, sidebar, split, center, flow, region), tables, effects (progress, avatar, divider, spinner), callouts, scroll-snap, timeline, overlays. Animations with prefers-reduced-motion, focus and a11y, responsive patterns, print styles. By rskworld.in.

If you find this Responsive Design System useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Design System

Component Library

Buttons, cards, badges, alerts, form inputs, nav, list group. Advanced: modal, tabs, dropdown, tooltip, breadcrumb, pagination, accordion. All with rsk- prefix.

Buttons – primary, secondary, outline, sm/lg
Cards – header, body, footer
Badges & Alerts – primary, success, warning, danger, info
Forms – input, select, textarea, label; advanced: checkbox, radio, switch, input group
Modal, tabs, dropdown, tooltip – minimal JS for open/close and ARIA
Design tokens (--rsk-*) for colors, spacing, radius
Responsive breakpoints: 576px, 768px, 992px, 1200px, 1400px
prefers-reduced-motion and focus-visible support

Project Structure & Files

Single entry design-system.css imports tokens, themes, grid, utilities, typography, layout, components, advanced components, forms, tables, effects, callouts, scroll, timeline, overlays, selection, animations, focus, responsive, print.

css/tokens.css – colors, typography, spacing, radius, shadows, breakpoints
css/themes.css – light/dark (data-theme), semantic surface/text
css/grid.css – container, 12-column row/col, responsive cols
css/layout.css – stack, cluster, sidebar, split, center, flow, region, wrapper, box
css/components.css – buttons, cards, badges, alerts, inputs, nav, list group
css/components-advanced.css – modal, tabs, dropdown, tooltip, breadcrumb, pagination, accordion
css/forms-advanced.css, tables.css, effects.css, callouts.css, scroll.css, timeline.css, overlays.css
css/animations.css, focus.css, responsive.css, print.css

Pages & Demos

index.html (home), components.html (advanced components, theme toggle), examples.html (typography, forms, tables, layout, effects), documentation.html.

index.html – hero, buttons, badges, alerts, cards, grid, form sample
components.html – modal, tabs, dropdown, accordion, theme switcher (localStorage)
examples.html – typography, forms, tables, layout, callouts, timeline, overlays, scroll-snap
documentation.html – in-repo documentation
README, USAGE, COMPONENTS, DESIGN-TOKENS, CHANGELOG, CONTRIBUTING
No build step – link design-system.css and use classes

Design Tokens & Themes

Override tokens in :root. Light/dark via data-theme on html; respects prefers-color-scheme when no theme set. Semantic --rsk-surface, --rsk-text, --rsk-border.

Colors – primary, success, warning, danger, info, gray scale
Typography – font families, sizes (xs–5xl), weights
Spacing (4px base), radius, shadows, duration, easing
data-theme="dark" or data-theme="light" on html
Theme toggle in components.html – choice stored in localStorage
Container max-widths per breakpoint

Technologies & Stack

Pure CSS3: custom properties, Flexbox, no build. Minimal JS only for modal, tabs, dropdown, accordion, theme toggle.

CSS3 – custom properties, Flexbox, Grid references
No npm, no bundler – link design-system.css
All classes prefixed with rsk- for namespacing
Focus-visible ring, skip link, prefers-reduced-motion
Print styles, responsive visibility (rsk-show-md, rsk-hide-lg)
For consistent UI and rapid prototyping

What You Get

Full design system source: CSS modules, HTML demo pages, README, USAGE, COMPONENTS, DESIGN-TOKENS, CHANGELOG, CONTRIBUTING, LICENSE.

Complete source – css-design-system/ folder with css/, *.html, docs
All CSS files – tokens, themes, grid, utilities, typography, layout, components, etc.
Single entry – design-system.css imports all
Documentation – README, USAGE, COMPONENTS, DESIGN-TOKENS, CHANGELOG, CONTRIBUTING, LICENSE
No build step – open HTML in browser or link design-system.css in any project
Override :root tokens to customize
© 2026 RSK World. All rights reserved.

Design System Application

Responsive Design System with components, tokens, grid, themes, and documentation. No server required.

css-design-system/ – main project folder
index.html, components.html, examples.html, documentation.html
css/ – tokens, themes, grid, utilities, typography, layout, components, components-advanced, forms-advanced, tables, effects, callouts, scroll, timeline, overlays, selection, animations, focus, responsive, print, design-system.css
README.md – features, file structure, usage
Open index.html in browser – no build step
Author: Molla Samser | rskworld.in

CSS Files Included

Design tokens, themes, grid, utilities, typography, layout, base and advanced components, forms, tables, effects, callouts, scroll, timeline, overlays, selection, animations, focus, responsive, print.

tokens.css – --rsk-color-*, --rsk-font-*, --rsk-space-*, --rsk-radius-*, --rsk-bp-*
themes.css – light/dark semantic tokens
grid.css – rsk-container, rsk-row, rsk-col, responsive column classes
layout.css – rsk-stack, rsk-cluster, rsk-with-sidebar, rsk-split, rsk-center, rsk-flow, rsk-region
components.css – rsk-btn, rsk-card, rsk-badge, rsk-alert, rsk-input, rsk-nav, rsk-list-group
components-advanced.css – rsk-modal, rsk-tabs, rsk-dropdown, rsk-tooltip, rsk-breadcrumb, rsk-pagination, rsk-accordion
animations.css – keyframes, transition utilities, prefers-reduced-motion

Project Features

Design tokens, light/dark themes, 12-column grid, utility classes, component library, typography, layout primitives, animations, focus and a11y, responsive, print.

Tokens – colors, typography, spacing, radius, shadows, breakpoints
Themes – data-theme, prefers-color-scheme
Components – buttons, cards, badges, alerts, forms, modal, tabs, dropdown, accordion
Layout – stack, cluster, sidebar, split, center, flow, region
Effects – progress, avatar, divider, spinner, callouts, timeline, overlays
Animations – fade, slide, scale, spin, pulse, bounce, skeleton; reduced motion
Focus-visible, skip link, print styles