Customization
CSS Variables
Override Frame styles using CSS custom properties.
Override Variables
:root {--frame-color-primary: #FF6B6B;--frame-color-background: #1A1A2E;--frame-radius-md: 12px;}
Colors
| Variable | Default | Description |
|---|---|---|
| --frame-color-primary | #4FD1FF | Primary accent color |
| --frame-color-secondary | #8B5CF6 | Secondary color |
| --frame-color-background | #0A0D14 | Page background |
| --frame-color-surface | #1A1D24 | Card/surface background |
| --frame-color-text | #E5E5E5 | Primary text color |
| --frame-color-muted | #586674 | Muted/secondary text |
Spacing
| Variable | Default | Description |
|---|---|---|
| --frame-space-1 | 4px | Extra small spacing |
| --frame-space-2 | 8px | Small spacing |
| --frame-space-3 | 12px | Medium spacing |
| --frame-space-4 | 16px | Default spacing |
| --frame-space-6 | 24px | Large spacing |
| --frame-space-8 | 32px | Extra large spacing |
Border Radius
| Variable | Default | Description |
|---|---|---|
| --frame-radius-sm | 4px | Small radius |
| --frame-radius-md | 8px | Default radius |
| --frame-radius-lg | 12px | Large radius |
| --frame-radius-xl | 16px | Extra large radius |
| --frame-radius-full | 9999px | Full/pill radius |