Skip to content
Logica SpatiaActive themeSPATIA v1
View
‹ Back to Logica Spatia

Logica Spatia — Theme spec

Every design token and component under the active Logica Spatia theme, rendered live. Download the raw .md / .css / .json from the bar above.

Colours

Background

#f7f9fc · dark #0b0d0f

Foreground

#2c3335 · dark #f7f9fc

Card

#ffffff · dark #1a1f23

Card foreground

#2c3335 · dark #f7f9fc

Popover

#ffffff · dark #1e2429

Popover foreground

#6a727c · dark #9dacbe

Primary

#ffae00 · dark #704900

Primary foreground

#2c3335 · dark #fff4cc

Secondary

#006cd1 · dark #004c94

Secondary foreground

#ffffff · dark #a3e8ff

Muted

#ffffff · dark #1e2429

Muted foreground

#6a727c · dark #a4b1c1

Accent

#ffea9e · dark #472e00

Accent foreground

#2c3335 · dark #ffe8bd

Destructive

#cc0000 · dark #a51212

Destructive foreground

#f7f9fc · dark #ffd1d8

Border

#d1dff0 · dark #31383f

Input

#d1dff0 · dark #31383f

Ring

#ffae00 · dark #d19900

Logica ERP

#2FB77E

Logica Visi

#E72858

Logica Spatia

#ffae00 · dark #EB9900

Logica Flow

#0987f6

Chart 1

#d657bb · dark #c341a7

Chart 2

#1fa1c1 · dark #1899b9

Chart 3

#e6a433 · dark #d4962b

Chart 4

#2EB67D · dark #1c9b66

Chart 5

#9a68bb · dark #7b489d

Radii

Small

Medium

Large

XL

Highlight

Typography

The quick brown fox · Aa 0123456789

Body / sans — the quick brown fox jumps over the lazy dog.

Mono — const rate = 0.815;

Components

The full collection, grouped as on the site — buttons & actions, forms & inputs, data display, overlays, navigation, feedback & status, and charts & KPIs. Every component is rendered under this theme.

Button variants
Button sizes
Icon button
Button group
Split button
Toggle / toggle group

design.md source

The same content as a portable Markdown spec — copy it, or download from the bar above.

logica-spatia-theme.md
# Logica Suite theme preset: SPATIA v1

Design-system token bundle exported from the Logica Suite design admin. Paste the CSS block into your app's global stylesheet, or read token values from the table / JSON below.

## Fonts

- **Sans:** Plus Jakarta Sans
- **Mono:** Follows main font

## Radius

- **Base radius:** `1.000rem`
- **Small (rounded-sm):** `0.8rem`
- **Medium (rounded-md):** `0.8rem`
- **Large (rounded-lg):** `1.5rem`
- **XL (rounded-xl):** `1.9rem`
- **Highlight (accent / nav item):** `0.8rem`

## Sidebar spacing

| Token | CSS variable | Value |
| --- | --- | --- |
| Heading size | `--nav-heading-size` | `0.75rem` |
| Item size | `--nav-item-size` | `0.75rem` |
| Item gap | `--nav-item-gap` | `0.15rem` |
| Group gap | `--nav-group-gap` | `1.5rem` |
| Heading hover zoom | `--nav-heading-hover-scale` | `1.02` |
| Active item bar width | `--nav-item-active-bar-width` | `0` |

## Motion

Transition durations + easing. `base` drives every default transition.

| Token | CSS variable | Value |
| --- | --- | --- |
| Micro | `--motion-micro` | `150ms` |
| Fast | `--motion-fast` | `150ms` |
| Base | `--motion-base` | `150ms` |
| Slow | `--motion-slow` | `150ms` |
| Easing | `--motion-ease` | `cubic-bezier(0, 0, 0.58, 1)` |

## Elevation (shadow)

| Token | CSS variable | Elevation | Box-shadow |
| --- | --- | --- | --- |
| Small · cards, inputs, buttons | `--elevation-sm` | 2dp | `0 2px 4px -1px rgba(15, 23, 42, 0.084)` |
| Medium · popovers, menus, dropdowns | `--elevation-md` | 8dp | `0 6px 16px -4px rgba(15, 23, 42, 0.156)` |
| Large · dialogs, sheets, modals | `--elevation-lg` | 16dp | `0 12px 32px -8px rgba(15, 23, 42, 0.240)` |

## Type scale

| Step | CSS variable | Size | Line-height |
| --- | --- | --- | --- |
| Extra small (text-xs) | `--type-xs` | `0.75rem` | `1rem` |
| Small (text-sm) | `--type-sm` | `0.875rem` | `1.25rem` |
| Base (text-base) | `--type-base` | `1rem` | `1.5rem` |
| Large (text-lg) | `--type-lg` | `1.125rem` | `1.75rem` |
| XL (text-xl) | `--type-xl` | `1.25rem` | `1.75rem` |
| 2XL (text-2xl) | `--type-2xl` | `1.5rem` | `2rem` |
| 3XL (text-3xl) | `--type-3xl` | `1.875rem` | `2.25rem` |
| 4XL (text-4xl) | `--type-4xl` | `2.25rem` | `2.5rem` |

## Chrome transparency

Sidebar / header background opacity (100% = opaque; lower = frosted glass).

| Token | CSS variable | Value |
| --- | --- | --- |
| Sidebar | `--sidebar-opacity` | `100%` |
| Header | `--header-opacity` | `45%` |

## Colors

| Token | CSS variable | Light | Dark |
| --- | --- | --- | --- |
| background | `--background` | `#f7f9fc` | `#0b0d0f` |
| foreground | `--foreground` | `#2c3335` | `#f7f9fc` |
| card | `--card` | `#ffffff` | `#1a1f23` |
| cardForeground | `--card-foreground` | `#2c3335` | `#f7f9fc` |
| popover | `--popover` | `#ffffff` | `#1e2429` |
| popoverForeground | `--popover-foreground` | `#6a727c` | `#9dacbe` |
| primary | `--primary` | `#ffae00` | `#704900` |
| primaryForeground | `--primary-foreground` | `#2c3335` | `#fff4cc` |
| secondary | `--secondary` | `#006cd1` | `#004c94` |
| secondaryForeground | `--secondary-foreground` | `#ffffff` | `#a3e8ff` |
| muted | `--muted` | `#ffffff` | `#1e2429` |
| mutedForeground | `--muted-foreground` | `#6a727c` | `#a4b1c1` |
| accent | `--accent` | `#ffea9e` | `#472e00` |
| accentForeground | `--accent-foreground` | `#2c3335` | `#ffe8bd` |
| destructive | `--destructive` | `#cc0000` | `#a51212` |
| destructiveForeground | `--destructive-foreground` | `#f7f9fc` | `#ffd1d8` |
| border | `--border` | `#d1dff0` | `#31383f` |
| input | `--input` | `#d1dff0` | `#31383f` |
| ring | `--ring` | `#ffae00` | `#d19900` |
| accentErp | `--accent-erp` | `#2FB77E` | `#2FB77E` |
| accentVisi | `--accent-visi` | `#E72858` | `#E72858` |
| accentSpatia | `--accent-spatia` | `#ffae00` | `#EB9900` |
| accentFlow | `--accent-flow` | `#0987f6` | `#0987f6` |
| chart1 | `--chart-1` | `#d657bb` | `#c341a7` |
| chart2 | `--chart-2` | `#1fa1c1` | `#1899b9` |
| chart3 | `--chart-3` | `#e6a433` | `#d4962b` |
| chart4 | `--chart-4` | `#2EB67D` | `#1c9b66` |
| chart5 | `--chart-5` | `#9a68bb` | `#7b489d` |

## Interactive states

Hover / pressed colours for the solid buttons. `auto` = derived from the base.

| Token | CSS variable | Light | Dark |
| --- | --- | --- | --- |
| primaryHover | `--primary-hover` | `#ffe770` | `#d19900` |
| primaryActive | `--primary-active` | `#d68b00` | `#8a5a00` |
| secondaryHover | `--secondary-hover` | `#4cbff0` | `#0b8fd0` |
| secondaryActive | `--secondary-active` | `auto` | `#02325f` |
| destructiveHover | `--destructive-hover` | `#fd5858` | `#ed5050` |
| destructiveActive | `--destructive-active` | `auto` | `#510101` |

## Sidebar states

Hover / selected / pressed colours for the sidebar nav. A blank value falls back to the token shown.

| Token | CSS variable | Light | Dark |
| --- | --- | --- | --- |
| navItemHoverBg | `--nav-item-hover-bg` | `#fddd68` | `#ca8f21` |
| navItemHoverFg | `--nav-item-hover-fg` | `accent-foreground` | `accent-foreground` |
| navItemSelectedBg | `--nav-item-selected-bg` | `#ffae00` | `#855600` |
| navItemSelectedFg | `--nav-item-selected-fg` | `#2c3335` | `accent-foreground` |
| navItemPressedBg | `--nav-item-pressed-bg` | `#b87700` | `#472e00` |
| navItemPressedFg | `--nav-item-pressed-fg` | `nav-item-hover-fg` | `nav-item-hover-fg` |
| navItemActiveBar | `--nav-item-active-bar` | `nav-item-selected-fg` | `nav-item-selected-fg` |
| navHeadingColor | `--nav-heading-color` | `#d68b00` | `#ca8f21` |

## App shell

Sidebar / header surface + border colours. A blank value falls back to the token shown.

| Token | CSS variable | Light | Dark |
| --- | --- | --- | --- |
| sidebar | `--sidebar` | `card` | `#1e2429` |
| sidebarForeground | `--sidebar-foreground` | `#2c3335` | `muted-foreground` |
| sidebarBorder | `--sidebar-border` | `#d0d9e1` | `border` |
| header | `--header` | `card` | `#1e2429` |
| headerForeground | `--header-foreground` | `foreground` | `foreground` |
| headerBorder | `--header-border` | `#EB9900` | `#ca8f21` |

## Data card

Title / value / icon + badge / trend colours for data cards. A blank value falls back to the token shown.

| Token | CSS variable | Light | Dark |
| --- | --- | --- | --- |
| cardTitle | `--card-title` | `muted-foreground` | `muted-foreground` |
| cardValue | `--card-value` | `card-foreground` | `card-foreground` |
| cardIcon | `--card-icon` | `primary` | `#ffe8bd` |
| cardIconBg | `--card-icon-bg` | `#fff3db` | `#855600` |
| trendUp | `--trend-up` | `#2EB67D` | `#2FB77E` |
| trendDown | `--trend-down` | `destructive` | `#8f0000` |

## Input & popover

Input field surface and popover title colour. A blank value falls back to the token shown.

| Token | CSS variable | Light | Dark |
| --- | --- | --- | --- |
| inputBackground | `--input-background` | `background` | `background` |
| popoverTitle | `--popover-title` | `#2c3335` | `#f7f9fc` |
| accentSurface | `--accent-surface` | `popover` | `popover` |
| iconColor | `--icon-color` | `currentColor` | `currentColor` |
| iconColorHover | `--icon-color-hover` | `icon-color` | `icon-color` |
| iconColorActive | `--icon-color-active` | `icon-color-hover` | `icon-color-hover` |
| chartText | `--chart-text` | `muted-foreground` | `muted-foreground` |
| loadingBar | `--loading-bar` | `primary` | `#704900` |
| toggleSun | `--toggle-sun` | `#fbbf24` | `#fbbf24` |
| toggleMoon | `--toggle-moon` | `#38bdf8` | `#38bdf8` |
| tabActiveBg | `--tab-active-bg` | `#ffffff` | `background` |
| tabBg | `--tab-bg` | `#f7f9fc` | `#31383f` |
| tabBorder | `--tab-border` | `#d1dff0` | `transparent` |
| tabText | `--tab-text` | `muted-foreground` | `muted-foreground` |
| tabActiveText | `--tab-active-text` | `foreground` | `foreground` |
| switchChecked | `--switch-checked` | `#2FB77E` | `#009e5c` |
| switchTrack | `--switch-track` | `#a4b1c1` | `#0b0d0f` |
| switchThumb | `--switch-thumb` | `background` | `#f7f9fc` |
| switchBorder | `--switch-border` | `transparent` | `transparent` |
| calloutBg | `--callout-bg` | `muted` | `muted` |
| calloutBorder | `--callout-border` | `border` | `border` |
| calloutIcon | `--callout-icon` | `primary` | `primary` |

## Outline button

Outline button border / text / fill (rest) and hover / pressed. A blank value falls back to the token shown.

| Token | CSS variable | Light | Dark |
| --- | --- | --- | --- |
| outlineBorder | `--outline-border` | `#d1dff0` | `#31383f` |
| outlineForeground | `--outline-foreground` | `#6a727c` | `foreground` |
| outlineBackground | `--outline-background` | `background` | `background` |
| outlineHoverBg | `--outline-hover-bg` | `#ffffff` | `#495869` |
| outlineHoverFg | `--outline-hover-fg` | `#6a727c` | `#f7f9fc` |
| outlineActiveBg | `--outline-active-bg` | `#d2d9e5` | `#212a35` |
| outlineActiveFg | `--outline-active-fg` | `#6a727c` | `#f7f9fc` |

## CSS

```css
/* Logica Suite preset: SPATIA v1 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

:root {
  --radius: 1.000rem;
  --radius-sm-token: 0.8rem;
  --radius-md-token: 0.8rem;
  --radius-lg-token: 1.5rem;
  --radius-xl-token: 1.9rem;
  --radius-highlight-token: 0.8rem;
  --background: #f7f9fc;
  --foreground: #2c3335;
  --card: #ffffff;
  --card-foreground: #2c3335;
  --popover: #ffffff;
  --popover-foreground: #6a727c;
  --primary: #ffae00;
  --primary-foreground: #2c3335;
  --secondary: #006cd1;
  --secondary-foreground: #ffffff;
  --muted: #ffffff;
  --muted-foreground: #6a727c;
  --accent: #ffea9e;
  --accent-foreground: #2c3335;
  --destructive: #cc0000;
  --destructive-foreground: #f7f9fc;
  --border: #d1dff0;
  --input: #d1dff0;
  --ring: #ffae00;
  --accent-erp: #2FB77E;
  --accent-visi: #E72858;
  --accent-spatia: #ffae00;
  --accent-flow: #0987f6;
  --chart-1: #d657bb;
  --chart-2: #1fa1c1;
  --chart-3: #e6a433;
  --chart-4: #2EB67D;
  --chart-5: #9a68bb;
  --primary-hover: #ffe770;
  --primary-active: #d68b00;
  --secondary-hover: #4cbff0;
  --secondary-active: color-mix(in oklab, var(--secondary), black 16%);
  --destructive-hover: #fd5858;
  --destructive-active: color-mix(in oklab, var(--destructive), black 16%);
  --nav-item-hover-bg: #fddd68;
  --nav-item-hover-fg: var(--accent-foreground);
  --nav-item-selected-bg: #ffae00;
  --nav-item-selected-fg: #2c3335;
  --nav-item-pressed-bg: #b87700;
  --nav-item-pressed-fg: var(--nav-item-hover-fg);
  --nav-item-active-bar: var(--nav-item-selected-fg);
  --nav-heading-color: #d68b00;
  --sidebar: var(--card);
  --sidebar-foreground: #2c3335;
  --sidebar-border: #d0d9e1;
  --header: var(--card);
  --header-foreground: var(--foreground);
  --header-border: #EB9900;
  --card-title: var(--muted-foreground);
  --card-value: var(--card-foreground);
  --card-icon: var(--primary);
  --card-icon-bg: #fff3db;
  --trend-up: #2EB67D;
  --trend-down: var(--destructive);
  --input-background: var(--background);
  --popover-title: #2c3335;
  --accent-surface: var(--popover);
  --icon-color: currentColor;
  --icon-color-hover: var(--icon-color);
  --icon-color-active: var(--icon-color-hover);
  --chart-text: var(--muted-foreground);
  --loading-bar: var(--primary);
  --toggle-sun: #fbbf24;
  --toggle-moon: #38bdf8;
  --tab-active-bg: #ffffff;
  --tab-bg: #f7f9fc;
  --tab-border: #d1dff0;
  --tab-text: var(--muted-foreground);
  --tab-active-text: var(--foreground);
  --switch-checked: #2FB77E;
  --switch-track: #a4b1c1;
  --switch-thumb: var(--background);
  --switch-border: transparent;
  --callout-bg: var(--muted);
  --callout-border: var(--border);
  --callout-icon: var(--primary);
  --outline-border: #d1dff0;
  --outline-foreground: #6a727c;
  --outline-background: var(--background);
  --outline-hover-bg: #ffffff;
  --outline-hover-fg: #6a727c;
  --outline-active-bg: #d2d9e5;
  --outline-active-fg: #6a727c;
  --sidebar-opacity: 100%;
  --header-opacity: 45%;
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: var(--font-sans);
  --nav-heading-size: 0.75rem;
  --nav-item-size: 0.75rem;
  --nav-item-gap: 0.15rem;
  --nav-group-gap: 1.5rem;
  --nav-heading-hover-scale: 1.02;
  --nav-item-active-bar-width: 0;
}
.dark {
  --background: #0b0d0f;
  --foreground: #f7f9fc;
  --card: #1a1f23;
  --card-foreground: #f7f9fc;
  --popover: #1e2429;
  --popover-foreground: #9dacbe;
  --primary: #704900;
  --primary-foreground: #fff4cc;
  --secondary: #004c94;
  --secondary-foreground: #a3e8ff;
  --muted: #1e2429;
  --muted-foreground: #a4b1c1;
  --accent: #472e00;
  --accent-foreground: #ffe8bd;
  --destructive: #a51212;
  --destructive-foreground: #ffd1d8;
  --border: #31383f;
  --input: #31383f;
  --ring: #d19900;
  --accent-erp: #2FB77E;
  --accent-visi: #E72858;
  --accent-spatia: #EB9900;
  --accent-flow: #0987f6;
  --chart-1: #c341a7;
  --chart-2: #1899b9;
  --chart-3: #d4962b;
  --chart-4: #1c9b66;
  --chart-5: #7b489d;
  --primary-hover: #d19900;
  --primary-active: #8a5a00;
  --secondary-hover: #0b8fd0;
  --secondary-active: #02325f;
  --destructive-hover: #ed5050;
  --destructive-active: #510101;
  --nav-item-hover-bg: #ca8f21;
  --nav-item-hover-fg: var(--accent-foreground);
  --nav-item-selected-bg: #855600;
  --nav-item-selected-fg: var(--accent-foreground);
  --nav-item-pressed-bg: #472e00;
  --nav-item-pressed-fg: var(--nav-item-hover-fg);
  --nav-item-active-bar: var(--nav-item-selected-fg);
  --nav-heading-color: #ca8f21;
  --sidebar: #1e2429;
  --sidebar-foreground: var(--muted-foreground);
  --sidebar-border: var(--border);
  --header: #1e2429;
  --header-foreground: var(--foreground);
  --header-border: #ca8f21;
  --card-title: var(--muted-foreground);
  --card-value: var(--card-foreground);
  --card-icon: #ffe8bd;
  --card-icon-bg: #855600;
  --trend-up: #2FB77E;
  --trend-down: #8f0000;
  --input-background: var(--background);
  --popover-title: #f7f9fc;
  --accent-surface: var(--popover);
  --icon-color: currentColor;
  --icon-color-hover: var(--icon-color);
  --icon-color-active: var(--icon-color-hover);
  --chart-text: var(--muted-foreground);
  --loading-bar: #704900;
  --toggle-sun: #fbbf24;
  --toggle-moon: #38bdf8;
  --tab-active-bg: var(--background);
  --tab-bg: #31383f;
  --tab-border: transparent;
  --tab-text: var(--muted-foreground);
  --tab-active-text: var(--foreground);
  --switch-checked: #009e5c;
  --switch-track: #0b0d0f;
  --switch-thumb: #f7f9fc;
  --switch-border: transparent;
  --callout-bg: var(--muted);
  --callout-border: var(--border);
  --callout-icon: var(--primary);
  --outline-border: #31383f;
  --outline-foreground: var(--foreground);
  --outline-background: var(--background);
  --outline-hover-bg: #495869;
  --outline-hover-fg: #f7f9fc;
  --outline-active-bg: #212a35;
  --outline-active-fg: #f7f9fc;
}
:root {
  --motion-micro: 150ms;
  --motion-fast: 150ms;
  --motion-base: 150ms;
  --motion-slow: 150ms;
  --motion-ease: cubic-bezier(0, 0, 0.58, 1);
}
:root {
  --elevation-sm: 0 2px 4px -1px rgba(15, 23, 42, 0.084);
  --elevation-md: 0 6px 16px -4px rgba(15, 23, 42, 0.156);
  --elevation-lg: 0 12px 32px -8px rgba(15, 23, 42, 0.240);
}
:root {
  --type-xs: 0.75rem;
  --type-xs-lh: 1rem;
  --type-sm: 0.875rem;
  --type-sm-lh: 1.25rem;
  --type-base: 1rem;
  --type-base-lh: 1.5rem;
  --type-lg: 1.125rem;
  --type-lg-lh: 1.75rem;
  --type-xl: 1.25rem;
  --type-xl-lh: 1.75rem;
  --type-2xl: 1.5rem;
  --type-2xl-lh: 2rem;
  --type-3xl: 1.875rem;
  --type-3xl-lh: 2.25rem;
  --type-4xl: 2.25rem;
  --type-4xl-lh: 2.5rem;
}
```

## JSON

```json
{
  "name": "SPATIA v1",
  "colors": {
    "light": {
      "background": "#f7f9fc",
      "foreground": "#2c3335",
      "card": "#ffffff",
      "cardForeground": "#2c3335",
      "popover": "#ffffff",
      "popoverForeground": "#6a727c",
      "primary": "#ffae00",
      "primaryForeground": "#2c3335",
      "secondary": "#006cd1",
      "secondaryForeground": "#ffffff",
      "muted": "#ffffff",
      "mutedForeground": "#6a727c",
      "accent": "#ffea9e",
      "accentForeground": "#2c3335",
      "destructive": "#cc0000",
      "destructiveForeground": "#f7f9fc",
      "border": "#d1dff0",
      "input": "#d1dff0",
      "ring": "#ffae00",
      "accentErp": "#2FB77E",
      "accentVisi": "#E72858",
      "accentSpatia": "#ffae00",
      "accentFlow": "#0987f6",
      "chart1": "#d657bb",
      "chart2": "#1fa1c1",
      "chart3": "#e6a433",
      "chart4": "#2EB67D",
      "chart5": "#9a68bb",
      "tabActiveBg": "#ffffff",
      "popoverTitle": "#2c3335",
      "outlineBorder": "#d1dff0",
      "outlineForeground": "#6a727c",
      "primaryHover": "#ffe770",
      "primaryActive": "#d68b00",
      "secondaryHover": "#4cbff0",
      "destructiveHover": "#fd5858",
      "outlineHoverBg": "#ffffff",
      "outlineHoverFg": "#6a727c",
      "outlineActiveBg": "#d2d9e5",
      "outlineActiveFg": "#6a727c",
      "navItemHoverBg": "#fddd68",
      "navItemPressedBg": "#b87700",
      "navItemSelectedBg": "#ffae00",
      "sidebarForeground": "#2c3335",
      "sidebarBorder": "#d0d9e1",
      "headerBorder": "#EB9900",
      "cardIconBg": "#fff3db",
      "trendUp": "#2EB67D",
      "tabBg": "#f7f9fc",
      "tabBorder": "#d1dff0",
      "navItemSelectedFg": "#2c3335",
      "navHeadingColor": "#d68b00",
      "switchChecked": "#2FB77E",
      "switchTrack": "#a4b1c1"
    },
    "dark": {
      "background": "#0b0d0f",
      "foreground": "#f7f9fc",
      "card": "#1a1f23",
      "cardForeground": "#f7f9fc",
      "popover": "#1e2429",
      "popoverForeground": "#9dacbe",
      "primary": "#704900",
      "primaryForeground": "#fff4cc",
      "secondary": "#004c94",
      "secondaryForeground": "#a3e8ff",
      "muted": "#1e2429",
      "mutedForeground": "#a4b1c1",
      "accent": "#472e00",
      "accentForeground": "#ffe8bd",
      "destructive": "#a51212",
      "destructiveForeground": "#ffd1d8",
      "border": "#31383f",
      "input": "#31383f",
      "ring": "#d19900",
      "accentErp": "#2FB77E",
      "accentVisi": "#E72858",
      "accentSpatia": "#EB9900",
      "accentFlow": "#0987f6",
      "chart1": "#c341a7",
      "chart2": "#1899b9",
      "chart3": "#d4962b",
      "chart4": "#1c9b66",
      "chart5": "#7b489d",
      "popoverTitle": "#f7f9fc",
      "outlineBorder": "#31383f",
      "primaryHover": "#d19900",
      "primaryActive": "#8a5a00",
      "secondaryHover": "#0b8fd0",
      "secondaryActive": "#02325f",
      "destructiveHover": "#ed5050",
      "destructiveActive": "#510101",
      "outlineHoverBg": "#495869",
      "outlineHoverFg": "#f7f9fc",
      "outlineActiveBg": "#212a35",
      "outlineActiveFg": "#f7f9fc",
      "navItemHoverBg": "#ca8f21",
      "navItemSelectedBg": "#855600",
      "navItemPressedBg": "#472e00",
      "navHeadingColor": "#ca8f21",
      "sidebar": "#1e2429",
      "header": "#1e2429",
      "headerBorder": "#ca8f21",
      "cardIcon": "#ffe8bd",
      "cardIconBg": "#855600",
      "trendUp": "#2FB77E",
      "trendDown": "#8f0000",
      "tabBg": "#31383f",
      "loadingBar": "#704900",
      "switchChecked": "#009e5c",
      "switchThumb": "#f7f9fc",
      "switchTrack": "#0b0d0f"
    }
  },
  "radii": {
    "base": "1.000rem",
    "sm": "0.8rem",
    "md": "0.8rem",
    "lg": "1.5rem",
    "xl": "1.9rem",
    "highlight": "0.8rem"
  },
  "fonts": {
    "sans": {
      "presetId": "google:Plus Jakarta Sans"
    },
    "mono": {
      "presetId": "follow-sans"
    }
  },
  "nav": {
    "headingSize": "0.75rem",
    "itemSize": "0.75rem",
    "itemGap": "0.15rem",
    "groupGap": "1.5rem",
    "headingHoverScale": "1.02",
    "activeItemBarWidth": "0"
  },
  "opacity": {
    "sidebar": "100%",
    "header": "45%"
  },
  "motion": {
    "micro": "150ms",
    "fast": "150ms",
    "base": "150ms",
    "slow": "150ms",
    "ease": "cubic-bezier(0, 0, 0.58, 1)"
  },
  "elevation": {
    "shadowSm": 2,
    "shadowMd": 8,
    "shadowLg": 16
  },
  "typeScale": {
    "xs": {
      "size": "0.75rem",
      "lineHeight": "1rem"
    },
    "sm": {
      "size": "0.875rem",
      "lineHeight": "1.25rem"
    },
    "base": {
      "size": "1rem",
      "lineHeight": "1.5rem"
    },
    "lg": {
      "size": "1.125rem",
      "lineHeight": "1.75rem"
    },
    "xl": {
      "size": "1.25rem",
      "lineHeight": "1.75rem"
    },
    "2xl": {
      "size": "1.5rem",
      "lineHeight": "2rem"
    },
    "3xl": {
      "size": "1.875rem",
      "lineHeight": "2.25rem"
    },
    "4xl": {
      "size": "2.25rem",
      "lineHeight": "2.5rem"
    }
  }
}
```