Design Systems Template [/tokens/...]

_borders.scss

$border-radius-sm: 4px;
$border-radius-md: 8px;
$border-radius-lg: 16px;
$border-width: 1px;
$border-style: solid;

_colors.scss

// ==============================
// Semantic Color Tokens
// ==============================

:root {
  // Base
  --background: #ffffff;
  --surface: #f9f9f9;
  --overlay: rgba(0, 0, 0, 0.6);
  --border: #e6e6e6;

  // Text
  --text: #07273f;
  --text-muted: #83939f;
  --text-inverse: #ffffff;
  --text-link: #335eea;

  // Brand
  --primary: #335eea;
  --primary-hover: #264bb8;
  --secondary: #01e7a6;
  --secondary-hover: #00c48c;

  // Status
  --danger: #e5716d;
  --danger-light: #ff7e79;
  --warning: #ffc700;
  --info: #49b3ff;
  --success: #01e7a6;

  // Background states
  --background-muted: #f6fbff;
  --background-subtle: #fcfcfc;

  // Accent for charts/data
  --accent-1: #335eea;
  --accent-2: #49b3ff;
  --accent-3: #95d3ff;
  --accent-4: #dbf0ff;
}

[data-theme="dark"] {
  --background: #0d1117;
  --surface: #161b22;
  --overlay: rgba(255, 255, 255, 0.08);
  --border: #2e2e2e;

  --text: #e6edf3;
  --text-muted: #7d8590;
  --text-inverse: #0d1117;
  --text-link: #49b3ff;

  --primary: #49b3ff;
  --primary-hover: #2188ff;
  --secondary: #00c48c;
  --secondary-hover: #00b07d;

  --danger: #ff7e79;
  --danger-light: #ffaba8;
  --warning: #ffd666;
  --info: #6ecbff;
  --success: #00f2aa;

  --background-muted: #1e1e2f;
  --background-subtle: #222;
}

_elevation.scss

// Elevation / Shadow levels
$elevation-0: none;
$elevation-1: 0 1px 2px rgba(0, 0, 0, 0.05);
$elevation-2: 0 4px 6px rgba(0, 0, 0, 0.1);
$elevation-3: 0 8px 16px rgba(0, 0, 0, 0.12);

_spacing.scss

// Spacing scale (4px grid)
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-2xl: 48px;
$spacing-3xl: 64px;

_typography.scss

// Typography
$font-family-base: 'Inter', sans-serif;
$font-family-heading: 'Inter', sans-serif;

$font-size-xs: 0.75rem;  // 12px
$font-size-sm: 0.875rem; // 14px
$font-size-md: 1rem;     // 16px
$font-size-lg: 1.125rem; // 18px
$font-size-xl: 1.25rem;  // 20px
$font-size-2xl: 1.5rem;  // 24px

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;

$line-height-tight: 1.2;
$line-height-base: 1.5;
$line-height-loose: 1.75;

_z-index.scss

$z-index-default: 1;
$z-index-dropdown: 100;
$z-index-modal: 1000;
$z-index-toast: 1050;
$z-index-overlay: 1100;

DesignSystemsTemplate.md

Usage Examples (SCSS)

.card {
  background-color: var(--surface);
  color: var(--text);
  border: $border-width $border-style var(--border);
  border-radius: $border-radius-md;
  padding: $spacing-md;
  box-shadow: $elevation-1;
}

.button--primary {
  background-color: var(--primary);
  color: var(--text-inverse);
  &:hover {
    background-color: var(--primary-hover);
  }
}