🎨 Dynamic Mockups Design System

A production-ready, scalable design system built with modern best practices.

$3

- React 18.3.1 - Latest React with hooks
- TypeScript 5.9.3 - Full type safety
- Radix UI Themes 3.2.1 - Accessible primitives
- SCSS - Enhanced styling with nesting and variables
- Vite 6.0.7 - Lightning-fast build tool
- Storybook 10.1.4 - Component documentation
- Vitest - Testing framework

---

📁 Final Project Structure

``
design-system/
├── src/
│ ├── tokens/ # Design tokens (Type-safe)
│ │ ├── colors.ts # Brand & semantic colors (50-950 scales)
│ │ ├── spacing.ts # 8px grid system (0-96)
│ │ ├── typography.ts # Font families, sizes, weights
│ │ ├── radii.ts # Border radius values
│ │ ├── shadows.ts # Elevation shadows
│ │ └── index.ts # Token exports
│ │
│ ├── theme/ # Theme system
│ │ ├── theme.ts # Theme configuration
│ │ ├── ThemeProvider.tsx # React context provider
│ │ └── index.ts
│ │
│ ├── components/ # Component library
│ │ ├── Button/
│ │ │ ├── Button.tsx # Component logic
│ │ │ ├── Button.scss # SCSS styles
│ │ │ ├── Button.stories.tsx # Storybook stories
│ │ │ └── index.ts
│ │ │
│ │ ├── Input/ # Text input with labels, icons, errors
│ │ ├── Switch/ # Toggle switch
│ │ ├── Checkbox/ # Checkbox with labels
│ │ ├── Select/ # Dropdown select
│ │ └── index.ts # Component exports
│ │
│ └── index.ts # Main entry point
│
├── dist/ # Build output
│ ├── index.js # CommonJS bundle
│ ├── index.mjs # ESM bundle
│ ├── index.d.ts # TypeScript declarations
│ ├── design-system.css # Compiled CSS from SCSS
│ └── [component folders]/ # Individual declarations
│
├── stories/ # Storybook files
├── .storybook/ # Storybook config
├── tsconfig.json # TypeScript config
├── vite.config.ts # Vite build config
├── package.json # Package manifest
└── README.md # Usage documentation
`

---

🎨 Components Built

$3


- Variants: solid, soft, outline, ghost, surface
- Colors: primary, secondary, accent, success, error, warning, info + Radix colors
- Sizes: 1-4
- Features: Loading states, left/right icons, full width, disabled states
- SCSS File: Button.scss with CSS variables for customization

$3

- Variants: surface, classic, soft
- Sizes: 1-3
- Colors: Custom focus colors (primary, secondary, accent, etc.)
- Features: Labels, helper text, error states, left/right icons, full width
- SCSS File: Input.scss with focus states and variants

$3

- Sizes: 1-3
- Colors: Custom colors beyond Radix defaults
- Features: Labels, helper text, left/right label positions
- SCSS File: Switch.scss

$3

- Sizes: 1-3
- Colors: Custom colors
- Features: Labels, helper text, error states, indeterminate state
- SCSS File: Checkbox.scss

$3

- Variants: surface, classic, soft, ghost
- Sizes: 1-3
- Colors: Custom focus colors
- Features: Labels, helper text, error states, disabled options, full width
- SCSS File: Select.scss

---

🎯 Design Tokens System

$3

`typescript
import { colors } from 'design-system';

// Brand colors with 50-950 scales
colors.brand.primary[500] // #0ea5e9
colors.brand.secondary[600] // #475569
colors.brand.accent[500] // #d946ef

// Semantic colors
colors.semantic.success.main // #059669
colors.semantic.error.main // #dc2626
colors.semantic.warning.main // #d97706
colors.semantic.info.main // #2563eb
`

$3


`typescript
import { spacing } from 'design-system';

spacing[4] // 1rem (16px)
spacing[8] // 2rem (32px)
spacing[16] // 4rem (64px)
`

$3


`typescript
import { typography } from 'design-system';

typography.fontFamily.sans
typography.fontSize.base // 1rem (16px)
typography.fontWeight.bold // 700
`

---

🚀 How to Use in Your Primary Project

$3

`bash


Install from npm

npm install @dynamic-mockups/design-system @radix-ui/themes react react-dom

Or with yarn

yarn add @dynamic-mockups/design-system @radix-ui/themes react react-dom
`

$3

1. Import CSS Files (REQUIRED)
`tsx
// In your main App.tsx, main.tsx, or index.tsx
import '@radix-ui/themes/styles.css';
import '@dynamic-mockups/design-system/styles.css'; // ← IMPORTANT: Import design system CSS
`

2. Wrap with ThemeProvider
`tsx
import { ThemeProvider } from '@dynamic-mockups/design-system';

function App() {
return (
appearance="light"
accentColor="blue"
radius="medium"
>


);
}
`

3. Use Components
`tsx
import { Button, Input, Select, Switch, Checkbox } from '@dynamic-mockups/design-system';

function MyPage() {
return (


label="Email"
type="email"
placeholder="you@example.com"
required
/>

label="Country"
options={[
{ value: 'us', label: 'United States' },
{ value: 'uk', label: 'United Kingdom' },
]}
/>

Submit

);
}

`

---

🎨 SCSS Customization

$3

Create a custom-theme.scss in your project:

`scss
:root {
// Brand colors
--color-primary: #0ea5e9;
--color-primary-hover: #0284c7;
--color-primary-soft: #e0f2fe;

--color-secondary: #64748b;
--color-accent: #d946ef;

// Semantic colors
--color-success: #10b981;
--color-error: #ef4444;
--color-warning: #f59e0b;
--color-info: #3b82f6;
}
`

$3

`scss
@use 'design-system' as ds;

.my-component {
// Use tokens directly in your SCSS
color: var(--color-primary);
padding: var(--spacing-4);
border-radius: var(--radii-lg);

&:hover {
background-color: var(--color-primary-soft);
}
}
`

$3

If you want to customize component styles:

`scss
// Import and override
@use 'design-system/components/Button/Button.scss' with (
$button-primary-bg: #your-color
);
`

---

📚 Available Scripts

`bash


Development

yarn storybook # Run Storybook on port 6006
yarn dev # Run Vite dev server

Building

yarn build # Build the library (TS + Vite)
yarn build-storybook # Build Storybook for deployment

Quality

yarn typecheck # Run TypeScript type checking
`

---

📦 Build Output

$3

`json
{
"main": "dist/index.js", // CommonJS
"module": "dist/index.mjs", // ESM
"types": "dist/index.d.ts", // TypeScript
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
"require": "./dist/index.js"
},
"./styles.css": "./dist/design-system.css"
}
}
`

$3

- ESM: ~186 KB (50 KB gzipped)
- CJS: ~127 KB (41 KB gzipped)
- CSS: ~11 KB (1.8 KB gzipped)

---

🎯 Key Features

✅ Type-Safe - Full TypeScript support with exported types
✅ Tree-Shakeable - Import only what you need
✅ Customizable - SCSS variables and CSS custom properties
✅ Accessible - Built on Radix UI primitives (WCAG compliant)
✅ Token-Based - Consistent design with design tokens
✅ Documented - Comprehensive Storybook documentation
✅ Production Ready - Tested, built, and ready to publish

---

📖 Next Steps

1. Run Storybook to see all components:
`bash
yarn storybook
`

2. Customize colors in src/tokens/colors.ts

3. Add more components following the same pattern:
- Create component folder
- Add TypeScript component
- Add SCSS styles
- Create Storybook stories
- Export from src/components/index.ts

4. Test in your primary project using npm link`

---

The system is scalable, maintainable, and follows industry best practices used by companies like Shopify, Atlassian, and GitHub.

---

Developed by https://dynamicmockups.com