NextGen Design System

A reusable design system containing design tokens, layouts, and SCSS foundations for modern React applications.

Contents

This package provides:

• Color tokens
• Typography tokens
• Spacing tokens
• Container tokens
• Viewport tokens
• Grid layouts
• Gradient tokens
• Shadow tokens
• Blur tokens

The package is framework-agnostic and can be used with:

• React
• React Aria
• Base UI
• Next.js
• Vite
• Storybook

Installation

npm install @marinae/nextgen-design-system

Usage

Import the complete design system:

@use '@marinae/nextgen-design-system/style';

or:

import '@marinae/nextgen-design-system/style';

Available Tokens

Colors

var(--indico-primary-blue-500)
var(--indico-gray-600)
var(--indico-success-500)
var(--indico-warning-500)
var(--indico-error-500)

Typography

var(--font-size-display-2xl)
var(--font-size-display-xl)
var(--font-size-display-lg)
var(--font-size-display-md)

var(--font-size-text-xl)
var(--font-size-text-lg)
var(--font-size-text-md)
var(--font-size-text-sm)
var(--font-size-text-xs)

Spacing

var(--space-1)
var(--space-2)
var(--space-3)
var(--space-4)
var(--space-5)
var(--space-6)
var(--space-8)
var(--space-10)
var(--space-12)
var(--space-16)
var(--space-20)
var(--space-24)
var(--space-32)
var(--space-40)
var(--space-48)
var(--space-56)
var(--space-64)

Containers

var(--container-sm)
var(--container-md)
var(--container-lg)
var(--container-xl)

Viewports

var(--viewport-mobile)
var(--viewport-tablet)
var(--viewport-desktop)

Grid Layouts

Available utility classes:

<div class="grid-12"></div>
<div class="grid-6"></div>
<div class="grid-5"></div>
<div class="grid-3"></div>
<div class="grid-2"></div>

Generated CSS:

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-6 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

Shadows

var(--shadow-xs)
var(--shadow-sm)
var(--shadow-md)
var(--shadow-lg)
var(--shadow-xl)

Blur

var(--blur-xs)
var(--blur-sm)
var(--blur-md)
var(--blur-lg)
var(--blur-xl)

Example

.card {
  background: white;
  padding: var(--space-6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.hero {
  max-width: var(--container-xl);
  margin-inline: auto;
}

.layout {
  display: grid;
  gap: var(--space-6);
}

<div class="grid-12">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Development

The design system is documented and maintained using Storybook.

Storybook is used for development and documentation only and is not included in the published package.

Versioning

This package follows semantic versioning.

Examples:

npm version patch
npm version minor
npm version major

License

MIT