🎨 CNC Lab Style Guide - CNC Lab Documentation

Complete brand guidelines for CNC Lab websites and materials

Last updated: 2025-09-18 (auto-generated)

This comprehensive style guide covers all brand elements including colors, typography, and usage guidelines for consistent implementation across all CNC Lab projects.

Color Palette¶

Below are the official brand colors defined in our design tokens (src/styles/designTokens.ts) and Tailwind configuration. Use these hex values, Tailwind utility classes, or import the design tokens directly.

primary
#0064A4
bg-primary

primary-light
#50C4ED
bg-primary-light

primary-dark
#263A5D
bg-primary-dark

secondary
#20B2AA
bg-secondary

secondary-light
#7B61FF
bg-secondary-light

neutral
#2C3E50
bg-neutral

neutral-light
#F8F9FA
bg-neutral-light

accent
#2563EB
bg-accent

accent-low
#DBEAFE
bg-accent-low

accent-high
#1E40AF
bg-accent-high

success
#10B981
bg-success

warning
#F59E0B
bg-warning

error
#EF4444
bg-error

info
#3B82F6
bg-info

background
#FFFFFF
bg-background

surface
#F8F9FA
bg-surface

border
#E5E7EB
bg-border

text
#2C3E50
bg-text

text-secondary
#6B7280
bg-text-secondary

text-light
#9CA3AF
bg-text-light

Usage in Components¶

Import Design Tokens (Recommended)¶

import { designTokens } from '@/styles/designTokens';

// Use in className with arbitrary values
className={`bg-[${designTokens.colors.primary}] text-[${designTokens.colors.neutralLight}]`}

// Or access nested values
const buttonColor = designTokens.colors.primaryLight;

Tailwind Utility Classes¶

<!-- Semantic color classes (preferred) -->
<div class="bg-primary text-white">Primary button</div>
<div class="bg-secondary-light text-neutral-dark">Secondary button</div>
<div class="text-neutral bg-surface">Body text</div>

<!-- Status colors -->
<div class="bg-success text-white">Success message</div>
<div class="bg-warning text-neutral">Warning message</div>

Usage in Tailwind Configuration¶

// tailwind.config.js automatically imports design tokens
import { designTokens } from './src/styles/designTokens.js';

export default {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: designTokens.colors.primary,
          light: designTokens.colors.primaryLight,
          dark: designTokens.colors.primaryDark,
        },
        // ... other colors
      }
    }
  }
};

Typography¶

Font Families¶

CNC Lab uses two primary typefaces for a clean, modern, and readable experience:

Inter - Primary body font

Usage: Body text, UI components, captions
Tailwind: font-sans
Import: designTokens.fonts.primary

Space Grotesk - Display font

Usage: Headings, titles, display text
Tailwind: font-display
Import: designTokens.fonts.display

Font Scale¶

Our typography scale is designed for optimal readability across devices:

// Font sizes from design tokens
const fontSizes = {
  xs: '0.75rem',  // 
  sm: '0.875rem',  // 
  base: '1rem',  // Default body
  lg: '1.125rem',  // 
  xl: '1.25rem',  // 
  '2xl': '1.5rem',  // 
  '3xl': '1.875rem',  // 
  '4xl': '2.25rem',  // 
  '5xl': '3rem',  // 
  '6xl': '3.75rem',  // 
  '7xl': '4.5rem',  // 
  '8xl': '6rem',  // 
  '9xl': '8rem',  // 
};

Typography Usage Guidelines¶

Headings¶

H1-H6: Use Space Grotesk (font-display)
Weight: Typically 600 (semi-bold) for strong hierarchy
Line height: Tight (1.1-1.3) for display sizes
Import: designTokens.fonts.display

Body Text¶

Default: Inter at 16px (text-base)
Weight: 400 (regular) for body, 500 (medium) for emphasis
Line height: 1.6 for optimal readability
Color: text-neutral or designTokens.colors.text

Small Text¶

Captions/Labels: Inter at 14px (text-sm)
Fine print: Inter at 12px (text-xs)
Weight: 400-500 depending on context

Design Tokens Export¶

Complete TypeScript Export¶

Auto-generated from src/styles/designTokens.ts - Copy-paste ready:

export const designTokens = {
  colors: {
    primary: '#0064A4',
    primaryLight: '#50C4ED',
    primaryDark: '#263A5D',
    secondary: '#20B2AA',
    secondaryLight: '#7B61FF',
    neutral: '#2C3E50',
    neutralLight: '#F8F9FA',
    accent: '#2563EB',
    accentLow: '#DBEAFE',
    accentHigh: '#1E40AF',
    success: '#10B981',
    warning: '#F59E0B',
    error: '#EF4444',
    info: '#3B82F6',
    background: '#FFFFFF',
    surface: '#F8F9FA',
    border: '#E5E7EB',
    text: '#2C3E50',
    textSecondary: '#6B7280',
    textLight: '#9CA3AF',
  },
  fonts: {
    primary: "'Inter', system-ui, -apple-system, sans-serif",
    display: "'Space Grotesk', system-ui, -apple-system, sans-serif",
  },
  fontSizes: {
    xs: '0.75rem',
    sm: '0.875rem',
    base: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
    '2xl': '1.5rem',
    '3xl': '1.875rem',
    '4xl': '2.25rem',
    '5xl': '3rem',
    '6xl': '3.75rem',
    '7xl': '4.5rem',
    '8xl': '6rem',
    '9xl': '8rem',
  },
  lineHeights: {
    tight: 1.1,
    normal: 1.4,
    relaxed: 1.6,
  }
} as const;

Synchronization¶

Note

Automatic Updates: This style guide is automatically synchronized with the design tokens in src/styles/designTokens.ts.

To update the style guide:

npm run sync-style-guide

Or run manually:

node scripts/sync-style-guide.js

Quick Reference¶

Design Tokens: src/styles/designTokens.ts
Tailwind Config: tailwind.config.js (auto-imports tokens)
Global Styles: src/index.css
Self-hosted Fonts: /public/fonts/
Sync Command: npm run sync-style-guide

Resources

📚 How to Edit Documentation