Project structure

🧱 Project Structure

VyomaCSS follows a clean SCSS architecture inspired by real-world design systems.

scss/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── utilities/
│   ├── _spacing.scss
│   ├── _text.scss
│   └── _display.scss
├── components/
│   ├── _button.scss
│   └── _card.scss
├── main.scss

---

🎨 Design Tokens (Variables)

All core design values live in _variables.scss.

Colors

$primary: #4f46e5;
$danger: #ef4444;
$dark: #111827;
$light: #f9fafb;

Spacing Scale

$spaces: (
  0: 0,
  1: 0.25rem,
  2: 0.5rem,
  3: 1rem,
  4: 1.5rem,
  5: 3rem
);