Design

Design System Manager

Manage design tokens and maintain design consistency.

Design Token Formats

CSS Variables

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-secondary: #64748b;
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

JSON Tokens

{
  "color": {
    "primary": { "value": "#3b82f6" },
    "primary-dark": { "value": "#2563eb" },
    "secondary": { "value": "#64748b" }
  },
  "font": {
    "family": {
      "sans": { "value": "'Inter', system-ui, sans-serif" },
      "mono": { "value": "'JetBrains Mono', monospace" }
    },
    "size": {
      "xs": { "value": "0.75rem" },
      "sm": { "value": "0.875rem" },
      "base": { "value": "1rem" },
      "lg": { "value": "1.125rem" }
    }
  },
  "spacing": {
    "1": { "value": "0.25rem" },
    "2": { "value": "0.5rem" },
    "4": { "value": "1rem" }
  }
}

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#3b82f6',
          dark: '#2563eb',
        },
        secondary: '#64748b',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
    },
  },
};

Color Operations

Generate Color Palette

gemini -m pro -o text -e "" "Generate a color palette for:

Base color: #3b82f6 (blue)
Purpose: SaaS dashboard

Provide:
1. 10-step shade scale (50-900)
2. Semantic colors (success, warning, error)
3. Neutral grays
4. CSS custom properties format
5. Ensure WCAG AA contrast ratios"

Check Color Contrast

gemini -m pro -o text -e "" "Check contrast ratios:

Foreground: #ffffff
Backgrounds:
- #3b82f6
- #2563eb
- #1d4ed8

For each:
1. Calculate contrast ratio
2. WCAG AA compliance (4.5:1 normal, 3:1 large)
3. WCAG AAA compliance (7:1 normal, 4.5:1 large)
4. Suggest adjustments if needed"

Convert Color Formats

gemini -m pro -o text -e "" "Convert this color to all formats:

Input: #3b82f6

Output:
- HEX
- RGB
- RGBA
- HSL
- HSLA
- CSS custom property"

Typography

Type Scale

gemini -m pro -o text -e "" "Generate a type scale:

Base: 16px
Ratio: 1.25 (major third)
Steps: 8 (xs to 4xl)

Provide:
1. Sizes in rem
2. Corresponding line-heights
3. Letter-spacing recommendations
4. CSS custom properties"

Font Pairing

gemini -m pro -o text -e "" "Suggest font pairings for:

Style: Modern, professional SaaS
Needs: Headings, body text, code

For each pairing:
1. Heading font
2. Body font
3. Code font
4. Google Fonts links
5. Fallback stack"

Spacing System

Generate Scale

gemini -m pro -o text -e "" "Generate a spacing scale:

Base: 4px
Approach: 4-point grid

Provide:
1. Scale from 0 to 96
2. Named tokens (xs, sm, md, lg, etc.)
3. Use cases for each size
4. CSS custom properties"

Component Tokens

Button Tokens

:root {
  /* Button Base */
  --btn-padding-x: var(--space-4);
  --btn-padding-y: var(--space-2);
  --btn-font-size: var(--text-sm);
  --btn-font-weight: 500;
  --btn-border-radius: var(--radius-md);

  /* Button Primary */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: white;
  --btn-primary-hover-bg: var(--color-primary-dark);

  /* Button Secondary */
  --btn-secondary-bg: transparent;
  --btn-secondary-text: var(--color-primary);
  --btn-secondary-border: var(--color-primary);
}

Input Tokens

:root {
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-2);
  --input-font-size: var(--text-base);
  --input-border-width: 1px;
  --input-border-color: var(--color-gray-300);
  --input-border-radius: var(--radius-md);
  --input-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

Exporting Tokens

To CSS

cat tokens.json | jq -r '
  to_entries | .[] |
  "--\(.key): \(.value.value);"
' > tokens.css

To JavaScript

cat tokens.json | jq '
  to_entries | map({(.key): .value.value}) | add
' > tokens.js

To SCSS Variables

cat tokens.json | jq -r '
  to_entries | .[] |
  "$\(.key): \(.value.value);"
' > _tokens.scss

Design Review

Audit Colors

gemini -m pro -o text -e "" "Audit this color system:

$(cat src/styles/tokens.css)

Check:
1. Sufficient contrast ratios
2. Consistent naming
3. Complete semantic colors
4. Dark mode compatibility
5. Accessibility issues"

Audit Typography

gemini -m pro -o text -e "" "Audit this typography system:

$(cat src/styles/typography.css)

Check:
1. Readable line heights
2. Appropriate scale ratio
3. Responsive considerations
4. Font loading strategy
5. Accessibility"

Best Practices

1. Use semantic names - --color-error not --color-red
2. Document tokens - Explain when to use each
3. Maintain consistency - Don't create one-offs
4. Test accessibility - Check all contrast ratios
5. Version tokens - Track changes
6. Single source of truth - Generate from one file
7. Review regularly - Audit for drift