Skip to main content

Customization

Tailor Apex to match your brand and project requirements.

CSS Variables

Apex uses CSS custom properties (variables) for easy customization.

Custom Colors

Override the default color palette:

CSS
:root {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-error: #ef4444;
}

Custom Spacing

Define your own spacing scale:

CSS
:root {
  --space-unit: 0.25rem;
  --space-1: calc(var(--space-unit) * 1);
  --space-2: calc(var(--space-unit) * 2);
  --space-4: calc(var(--space-unit) * 4);
  --space-8: calc(var(--space-unit) * 8);
}

Custom Typography

Customize font families and sizes:

CSS
:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Fira Code', monospace;

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