Spacing Inventory
Generated: Phase 1 - Read-only inventory
Sources: sageox-mono, ox-cli
Status: Draft - Do not consume
Spacing Scale
Based on 4px baseline grid.
| Token |
Value |
Use Case |
Source |
--space-0 |
0 |
Reset |
sageox-mono/apps/web/src/styles/tokens.css:712 |
--space-1 |
2px |
Micro |
sageox-mono/apps/web/src/styles/tokens.css:713 |
--space-2 |
4px |
Tight |
sageox-mono/apps/web/src/styles/tokens.css:714 |
--space-3 |
8px |
Related elements |
sageox-mono/apps/web/src/styles/tokens.css:715 |
--space-4 |
12px |
Component padding |
sageox-mono/apps/web/src/styles/tokens.css:716 |
--space-5 |
16px |
Card padding |
sageox-mono/apps/web/src/styles/tokens.css:717 |
--space-6 |
24px |
Section gap |
sageox-mono/apps/web/src/styles/tokens.css:718 |
--space-7 |
32px |
Large gap |
sageox-mono/apps/web/src/styles/tokens.css:719 |
--space-8 |
48px |
Page sections |
sageox-mono/apps/web/src/styles/tokens.css:720 |
--space-9 |
64px |
Hero sections |
sageox-mono/apps/web/src/styles/tokens.css:721 |
--space-10 |
80px |
Major breaks |
sageox-mono/apps/web/src/styles/tokens.css:722 |
--space-11 |
96px |
Extra large |
sageox-mono/apps/web/src/styles/tokens.css:723 |
--space-12 |
128px |
Maximum |
sageox-mono/apps/web/src/styles/tokens.css:724 |
TYPOGRAPHY.md Spacing Scale
| Token |
Value |
Use Case |
Source |
--space-1 |
4px |
Icon padding, badge spacing |
sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:241 |
--space-2 |
8px |
Gap between related elements |
sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:242 |
--space-3 |
12px |
Component padding (buttons, inputs) |
sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:243 |
--space-4 |
16px |
Card padding, list items |
sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:244 |
--space-5 |
24px |
Section gap, card spacing |
sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:245 |
--space-6 |
32px |
Large section gap |
sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:246 |
--space-8 |
48px |
Page sections, hero |
sageox-mono/apps/web/src/styles/TYPOGRAPHY.md:247 |
Note: TYPOGRAPHY.md uses different values for some tokens (--space-1 = 4px vs 2px in tokens.css).
Border Radius
| Token |
Value |
Use Case |
Source |
--radius-none |
0 |
Sharp corners |
sageox-mono/apps/web/src/styles/tokens.css:730 |
--radius-xs |
2px |
Subtle rounding |
sageox-mono/apps/web/src/styles/tokens.css:731 |
--radius-sm |
4px |
Small components |
sageox-mono/apps/web/src/styles/tokens.css:732 |
--radius-md |
6px |
Default |
sageox-mono/apps/web/src/styles/tokens.css:733 |
--radius-lg |
8px |
Cards |
sageox-mono/apps/web/src/styles/tokens.css:734 |
--radius-xl |
12px |
Large cards |
sageox-mono/apps/web/src/styles/tokens.css:735 |
--radius-2xl |
16px |
Modals |
sageox-mono/apps/web/src/styles/tokens.css:736 |
--radius-3xl |
24px |
Hero sections |
sageox-mono/apps/web/src/styles/tokens.css:737 |
--radius-full |
9999px |
Pills, avatars |
sageox-mono/apps/web/src/styles/tokens.css:738 |
Shadow System
| Token |
Value |
Use Case |
Source |
--shadow-xs |
0 1px 2px rgba(0, 0, 0, 0.04) |
Hover states |
sageox-mono/apps/web/src/styles/tokens.css:687 |
--shadow-sm |
0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04) |
Cards, dropdowns |
sageox-mono/apps/web/src/styles/tokens.css:690 |
--shadow-md |
0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04) |
Floating panels |
sageox-mono/apps/web/src/styles/tokens.css:693 |
--shadow-lg |
0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06) |
Modals, popovers |
sageox-mono/apps/web/src/styles/tokens.css:696 |
--shadow-xl |
0 16px 32px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08) |
Command palettes |
sageox-mono/apps/web/src/styles/tokens.css:699 |
--shadow-2xl |
0 24px 48px rgba(0, 0, 0, 0.16), 0 12px 24px rgba(0, 0, 0, 0.1) |
Hero elements |
sageox-mono/apps/web/src/styles/tokens.css:702 |
--shadow-inset |
inset 0 2px 4px rgba(0, 0, 0, 0.06) |
Pressed states |
sageox-mono/apps/web/src/styles/tokens.css:705 |
Dark Mode Shadows
| Token |
Value |
Source |
--shadow-xs |
0 1px 2px rgba(0, 0, 0, 0.3) |
sageox-mono/apps/web/src/styles/tokens.css:1253 |
--shadow-sm |
0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) |
sageox-mono/apps/web/src/styles/tokens.css:1255 |
--shadow-md |
0 4px 8px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4) |
sageox-mono/apps/web/src/styles/tokens.css:1257 |
--shadow-lg |
0 8px 16px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.5) |
sageox-mono/apps/web/src/styles/tokens.css:1259 |
--shadow-xl |
0 16px 32px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.6) |
sageox-mono/apps/web/src/styles/tokens.css:1261 |
--shadow-2xl |
0 24px 48px rgba(0, 0, 0, 0.8), 0 12px 24px rgba(0, 0, 0, 0.7) |
sageox-mono/apps/web/src/styles/tokens.css:1263 |
--shadow-inset |
inset 0 2px 4px rgba(0, 0, 0, 0.4) |
sageox-mono/apps/web/src/styles/tokens.css:1265 |
Z-Index System
| Token |
Value |
Use Case |
Source |
--z-base |
0 |
Default |
sageox-mono/apps/web/src/styles/tokens.css:815 |
--z-dropdown |
1000 |
Dropdowns |
sageox-mono/apps/web/src/styles/tokens.css:816 |
--z-sticky |
1100 |
Sticky elements |
sageox-mono/apps/web/src/styles/tokens.css:817 |
--z-fixed |
1200 |
Fixed elements |
sageox-mono/apps/web/src/styles/tokens.css:818 |
--z-modal-backdrop |
1300 |
Modal backdrop |
sageox-mono/apps/web/src/styles/tokens.css:819 |
--z-modal |
1400 |
Modals |
sageox-mono/apps/web/src/styles/tokens.css:820 |
--z-popover |
1500 |
Popovers |
sageox-mono/apps/web/src/styles/tokens.css:821 |
--z-tooltip |
1600 |
Tooltips |
sageox-mono/apps/web/src/styles/tokens.css:822 |
--z-toast |
1700 |
Toast notifications |
sageox-mono/apps/web/src/styles/tokens.css:823 |
Layout Dimensions
| Token |
Value |
Use Case |
Source |
--container-xs |
420px |
Small container |
sageox-mono/apps/web/src/styles/tokens.css:829 |
--container-sm |
640px |
Mobile breakpoint |
sageox-mono/apps/web/src/styles/tokens.css:830 |
--container-md |
768px |
Tablet |
sageox-mono/apps/web/src/styles/tokens.css:831 |
--container-lg |
1024px |
Desktop |
sageox-mono/apps/web/src/styles/tokens.css:832 |
--container-xl |
1280px |
Large desktop |
sageox-mono/apps/web/src/styles/tokens.css:833 |
--container-2xl |
1536px |
Maximum |
sageox-mono/apps/web/src/styles/tokens.css:834 |
--header-height |
64px |
Fixed header |
sageox-mono/apps/web/src/styles/tokens.css:836 |
--sidebar-width |
240px |
Expanded sidebar |
sageox-mono/apps/web/src/styles/tokens.css:837 |
--sidebar-width-collapsed |
64px |
Collapsed sidebar |
sageox-mono/apps/web/src/styles/tokens.css:838 |
Diagram Structural Tokens
| Token |
Value |
Use Case |
Source |
--ox-diagram-node-radius |
8px |
Node corners |
sageox-mono/apps/web/src/styles/tokens.css:470 |
--ox-diagram-node-min-width |
160px |
Minimum node width |
sageox-mono/apps/web/src/styles/tokens.css:471 |
--ox-diagram-node-padding |
12px |
Node padding |
sageox-mono/apps/web/src/styles/tokens.css:472 |
--ox-diagram-stroke-width |
2px |
Border stroke |
sageox-mono/apps/web/src/styles/tokens.css:475 |
--ox-diagram-edge-width |
2px |
Edge lines |
sageox-mono/apps/web/src/styles/tokens.css:476 |
--ox-diagram-edge-width-thick |
3px |
Emphasized edges |
sageox-mono/apps/web/src/styles/tokens.css:477 |
--ox-diagram-glow-blur |
12px |
Glow blur |
sageox-mono/apps/web/src/styles/tokens.css:480 |
--ox-diagram-glow-spread |
4px |
Glow spread |
sageox-mono/apps/web/src/styles/tokens.css:481 |
--ox-diagram-glow-opacity |
0.4 |
Glow opacity |
sageox-mono/apps/web/src/styles/tokens.css:482 |
--ox-diagram-arrow-size |
8px |
Arrow markers |
sageox-mono/apps/web/src/styles/tokens.css:485 |
--ox-diagram-marker-radius |
4px |
Marker radius |
sageox-mono/apps/web/src/styles/tokens.css:486 |
--ox-diagram-node-gap |
24px |
Node spacing |
sageox-mono/apps/web/src/styles/tokens.css:489 |
--ox-diagram-level-gap |
80px |
Level spacing |
sageox-mono/apps/web/src/styles/tokens.css:490 |
Animation & Transitions
Timing Functions
| Token |
Value |
Source |
--ease-in-out |
cubic-bezier(0.4, 0, 0.2, 1) |
sageox-mono/apps/web/src/styles/tokens.css:790 |
--ease-out |
cubic-bezier(0, 0, 0.2, 1) |
sageox-mono/apps/web/src/styles/tokens.css:791 |
--ease-in |
cubic-bezier(0.4, 0, 1, 1) |
sageox-mono/apps/web/src/styles/tokens.css:792 |
--ease-spring |
cubic-bezier(0.175, 0.885, 0.32, 1.275) |
sageox-mono/apps/web/src/styles/tokens.css:793 |
Durations
| Token |
Value |
Source |
--duration-instant |
50ms |
sageox-mono/apps/web/src/styles/tokens.css:796 |
--duration-fast |
150ms |
sageox-mono/apps/web/src/styles/tokens.css:797 |
--duration-normal |
250ms |
sageox-mono/apps/web/src/styles/tokens.css:798 |
--duration-slow |
350ms |
sageox-mono/apps/web/src/styles/tokens.css:799 |
--duration-slower |
500ms |
sageox-mono/apps/web/src/styles/tokens.css:800 |
Transition Shortcuts
| Token |
Value |
Source |
--transition-fast |
all 150ms cubic-bezier(0, 0, 0.2, 1) |
sageox-mono/apps/web/src/styles/tokens.css:803 |
--transition-normal |
all 250ms cubic-bezier(0, 0, 0.2, 1) |
sageox-mono/apps/web/src/styles/tokens.css:804 |
--transition-slow |
all 350ms cubic-bezier(0, 0, 0.2, 1) |
sageox-mono/apps/web/src/styles/tokens.css:805 |
--transition-colors |
color/bg/border 150ms ease-out |
sageox-mono/apps/web/src/styles/tokens.css:806-808 |
Reduced Motion
All durations set to 0ms when prefers-reduced-motion: reduce is active.
Source: sageox-mono/apps/web/src/styles/tokens.css:1308-1320
Opacity System
| Token |
Value |
Source |
--opacity-0 |
0 |
sageox-mono/apps/web/src/styles/tokens.css:844 |
--opacity-10 |
0.1 |
sageox-mono/apps/web/src/styles/tokens.css:845 |
--opacity-20 |
0.2 |
sageox-mono/apps/web/src/styles/tokens.css:846 |
--opacity-30 |
0.3 |
sageox-mono/apps/web/src/styles/tokens.css:847 |
--opacity-40 |
0.4 |
sageox-mono/apps/web/src/styles/tokens.css:848 |
--opacity-50 |
0.5 |
sageox-mono/apps/web/src/styles/tokens.css:849 |
--opacity-60 |
0.6 |
sageox-mono/apps/web/src/styles/tokens.css:850 |
--opacity-70 |
0.7 |
sageox-mono/apps/web/src/styles/tokens.css:851 |
--opacity-80 |
0.8 |
sageox-mono/apps/web/src/styles/tokens.css:852 |
--opacity-90 |
0.9 |
sageox-mono/apps/web/src/styles/tokens.css:853 |
--opacity-100 |
1 |
sageox-mono/apps/web/src/styles/tokens.css:854 |
Glass Morphism Effects
| Token |
Value |
Source |
--glass-bg |
rgba(255, 255, 255, 0.8) |
sageox-mono/apps/web/src/styles/tokens.css:862 |
--glass-border |
rgba(255, 255, 255, 0.2) |
sageox-mono/apps/web/src/styles/tokens.css:863 |
--glass-blur |
blur(12px) |
sageox-mono/apps/web/src/styles/tokens.css:864 |
--backdrop-blur-sm |
blur(8px) |
sageox-mono/apps/web/src/styles/tokens.css:878 |
--backdrop-blur-md |
blur(12px) |
sageox-mono/apps/web/src/styles/tokens.css:879 |
--backdrop-blur-lg |
blur(16px) |
sageox-mono/apps/web/src/styles/tokens.css:880 |
--backdrop-blur-xl |
blur(24px) |
sageox-mono/apps/web/src/styles/tokens.css:881 |
Dark Mode Glass
| Token |
Value |
Source |
--glass-bg |
rgba(23, 25, 29, 0.8) |
sageox-mono/apps/web/src/styles/tokens.css:1268 |
--glass-border |
rgba(255, 255, 255, 0.1) |
sageox-mono/apps/web/src/styles/tokens.css:1269 |
CLI Spacing (ox-cli)
HTML Transcript CSS Variables
| Variable |
Value |
Source |
--spacing-xs |
0.25rem |
ox-cli/internal/transcript/html/assets/styles.css |
--spacing-sm |
0.5rem |
ox-cli/internal/transcript/html/assets/styles.css |
--spacing-md |
1rem |
ox-cli/internal/transcript/html/assets/styles.css |
--spacing-lg |
1.5rem |
ox-cli/internal/transcript/html/assets/styles.css |
--spacing-xl |
2rem |
ox-cli/internal/transcript/html/assets/styles.css |
--border-radius |
0.5rem |
ox-cli/internal/transcript/html/assets/styles.css |
--border-width |
3px |
ox-cli/internal/transcript/html/assets/styles.css |
--shadow-sm |
0 1px 2px rgba(0, 0, 0, 0.3) |
ox-cli/internal/transcript/html/assets/styles.css |
--shadow-md |
0 4px 6px rgba(0, 0, 0, 0.4) |
ox-cli/internal/transcript/html/assets/styles.css |
--shadow-lg |
0 10px 15px rgba(0, 0, 0, 0.5) |
ox-cli/internal/transcript/html/assets/styles.css |
Terminal Box Styling
| Component |
Value |
Source |
| Confirm box padding |
1 vertical, 2 horizontal |
ox-cli/internal/cli/confirm.go:23-28 |
| Tree indent |
2 spaces |
ox-cli/internal/ui/styles.go:73 |
| Separator length |
42 characters |
ox-cli/internal/ui/styles.go:77-78 |
Notes
-
Spacing Scale Discrepancy: tokens.css uses --space-1: 2px while TYPOGRAPHY.md uses --space-1: 4px. Needs reconciliation.
-
4px Baseline Grid: Web design follows 4px grid, but some tokens break this (e.g., --space-4: 12px is not divisible by 4).
-
Dark Mode Shadows: Significantly higher opacity values for visibility on dark backgrounds.
-
Motion Philosophy: "Subtle fade + 2-4px Y-translate, 80-120ms, no bouncy transitions" per tokens.css header.
-
CLI vs Web: CLI uses rem-based spacing for HTML export but terminal output relies on character/space-based positioning.