One system.
Every detail.
The foundations and components behind the Vadersoft experience. Light and dark palettes follow your system, with an appearance control in the footer.
A considered palette.
White space, precise blues, and quiet neutrals.
blue-500
#0077B6blue-700
#014F86blue-900
#013A63blue-50
#F2F7FBblue-100
#E3EEF6white
#FFFFFFgray-50
#F6F8F9gray-950
#15232EType with clarity.
Manrope headlines. Geist body. Locally hosted and responsive.
Limitless Engineering.
Built together. Built to go further.
Make intelligence useful.
Clear ideas deserve clear expression. Body text is set at 16px with a generous line height.
Supporting text / 14pxActions with purpose.
Consistent geometry and visible keyboard focus.
The same foundations.
Shared primitives, semantic roles, and component tokens.
| Token | Value | Layer |
|---|---|---|
--blue-500 | #0077b6 | primitive |
--blue-700 | #014f86 | primitive |
--blue-900 | #013a63 | primitive |
--blue-50 | #f2f7fb | primitive |
--blue-100 | #e3eef6 | primitive |
--white | #ffffff | primitive |
--gray-50 | #f6f8f9 | primitive |
--gray-100 | #edf1f3 | primitive |
--gray-200 | #d9e0e5 | primitive |
--gray-500 | #5d6b76 | primitive |
--gray-600 | #475661 | primitive |
--gray-950 | #15232e | primitive |
--graphite-600 | #4b5054 | primitive |
--red-700 | #a62435 | primitive |
--space-1 | 4px | primitive |
--space-2 | 8px | primitive |
--space-3 | 12px | primitive |
--space-4 | 16px | primitive |
--space-6 | 24px | primitive |
--space-8 | 32px | primitive |
--space-12 | 48px | primitive |
--space-16 | 64px | primitive |
--space-24 | 96px | primitive |
--font-sans | Geist, Arial, Helvetica, sans-serif | primitive |
--font-mono | ui-monospace, SFMono-Regular, Consolas, monospace | primitive |
--weight-regular | 400 | primitive |
--weight-medium | 500 | primitive |
--weight-semibold | 600 | primitive |
--text-xs | 13px | primitive |
--text-sm | 14px | primitive |
--text-base | 16px | primitive |
--text-lg | 18px | primitive |
--text-xl | 24px | primitive |
--text-title | clamp(26px, 2.6vw, 36px) | primitive |
--text-section | clamp(36px, 4.5vw, 64px) | primitive |
--text-display | clamp(48px, 7.8vw, 108px) | primitive |
--leading-tight | 1.04 | primitive |
--leading-title | 1.12 | primitive |
--leading-body | 1.6 | primitive |
--tracking-heading | -0.045em | primitive |
--radius-sm | 2px | primitive |
--radius-md | 2px | primitive |
--radius-lg | 0px | primitive |
--radius-xl | 0px | primitive |
--duration-fast | 150ms | primitive |
--duration-normal | 250ms | primitive |
--ease-standard | cubic-bezier(.2, .7, .2, 1) | primitive |
--space-0 | 0px | primitive |
--space-5 | 20px | primitive |
--space-10 | 40px | primitive |
--space-20 | 80px | primitive |
--space-32 | 128px | primitive |
--space-40 | 160px | primitive |
--font-display | Manrope, Arial, Helvetica, sans-serif | primitive |
--text-hero | clamp(64px, 14.3vw, 206px) | primitive |
--color-canvas | var(--white) | semantic |
--color-surface | var(--gray-50) | semantic |
--color-surface-raised | var(--white) | semantic |
--color-surface-brand | var(--blue-50) | semantic |
--color-text | var(--gray-950) | semantic |
--color-text-secondary | var(--gray-600) | semantic |
--color-text-muted | var(--gray-500) | semantic |
--color-text-inverse | var(--white) | semantic |
--color-border | var(--gray-200) | semantic |
--color-action-primary | var(--blue-700) | semantic |
--color-action-hover | var(--blue-900) | semantic |
--color-accent | var(--blue-500) | semantic |
--color-hero-graphite | var(--graphite-600) | semantic |
--color-selected | var(--blue-100) | semantic |
--color-focus | var(--blue-500) | semantic |
--color-control-focus | var(--color-text) | semantic |
--color-error | var(--red-700) | semantic |
--shadow-subtle | none | semantic |
--shadow-panel | 0 12px 30px var(--color-shadow) | semantic |
--shadow-focus | none | semantic |
--content-width | 1360px | semantic |
--reading-width | 720px | semantic |
--page-gutter | clamp(20px, 4.8vw, 80px) | semantic |
--section-space | clamp(80px, 9.5vw, 144px) | semantic |
--layout-gap | var(--space-8) | semantic |
--color-clear | transparent | semantic |
--color-accent-ink | var(--white) | semantic |
--color-rule-strong | #abbac5 | semantic |
--color-cool-field | #e8f0f6 | semantic |
--color-shadow | rgb(21 35 46 / 8%) | semantic |
--font-body | var(--font-sans) | semantic |
--color-paper | var(--color-canvas) | semantic |
--color-ink | var(--color-text) | semantic |
--color-muted | var(--color-text-muted) | semantic |
--color-technical-line | #9eb9cc | semantic |
--color-technical-fill | #edf4f8 | semantic |
--color-pixel | #253b4b | semantic |
--color-brand-ink | var(--blue-900) | semantic |
--color-logo-surface | var(--white) | semantic |
--color-logo-ink | var(--gray-950) | semantic |
--weight-body | var(--weight-regular) | semantic |
--theme-color-scheme | light | semantic |
--theme-light-display | block | semantic |
--theme-dark-display | none | semantic |
--color-country-gh | #edf5fa | semantic |
--color-country-us | #eff6f1 | semantic |
--color-country-au | #faf3e8 | semantic |
--color-country-za | #f8edf0 | semantic |
--color-country-ke | #f1eff8 | semantic |
--color-work-academia | var(--blue-50) | semantic |
--color-work-government | var(--blue-100) | semantic |
--color-work-industry | var(--blue-900) | semantic |
--color-work-industry-ink | var(--white) | semantic |
--color-country-in | #f8f1e7 | semantic |
--color-country-ca | #f8ecec | semantic |
--color-country-ae | #edf5f1 | semantic |
--color-country-sg | #f7edf3 | semantic |
--color-country-et | #f3f5e8 | semantic |
--color-country-gb | #edf0f8 | semantic |
--color-country-my | #eaf5f6 | semantic |
--radius-control | var(--radius-sm) | component |
--radius-button | var(--radius-md) | component |
--radius-card | var(--radius-lg) | component |
--radius-panel | var(--radius-xl) | component |
--button-height | 48px | component |
--input-height | 48px | component |
--header-height | 96px | component |
--card-padding | var(--space-8) | component |
--button-background | var(--color-action-primary) | component |
--button-foreground | var(--color-text-inverse) | component |
--card-background | var(--color-surface) | component |
--card-border | var(--color-border) | component |
--color-canvas | #10171d | Dark theme |
--color-surface | #17232c | Dark theme |
--color-surface-raised | #1d2b36 | Dark theme |
--color-surface-brand | #162735 | Dark theme |
--color-text | #e8eff4 | Dark theme |
--color-text-secondary | #becbd6 | Dark theme |
--color-text-muted | #9aafbe | Dark theme |
--color-text-inverse | #10232f | Dark theme |
--color-border | #354957 | Dark theme |
--color-action-primary | #8bc9ed | Dark theme |
--color-action-hover | #b3def5 | Dark theme |
--color-accent | #78bee7 | Dark theme |
--color-hero-graphite | #9b9fa3 | Dark theme |
--color-selected | #25465b | Dark theme |
--color-focus | #a3d9f5 | Dark theme |
--color-error | #ff9eaa | Dark theme |
--color-accent-ink | #10232f | Dark theme |
--color-rule-strong | #637c8e | Dark theme |
--color-cool-field | #1c3141 | Dark theme |
--color-shadow | transparent | Dark theme |
--color-technical-line | #5c829a | Dark theme |
--color-technical-fill | #1e3443 | Dark theme |
--color-pixel | #b4c5d0 | Dark theme |
--color-brand-ink | #b3d8ed | Dark theme |
--shadow-panel | none | Dark theme |
--weight-body | 350 | Dark theme |
--theme-color-scheme | dark | Dark theme |
--theme-light-display | none | Dark theme |
--theme-dark-display | block | Dark theme |
--color-country-gh | #1b2e3b | Dark theme |
--color-country-us | #1c302a | Dark theme |
--color-country-au | #332d20 | Dark theme |
--color-country-za | #35262d | Dark theme |
--color-country-ke | #28283c | Dark theme |
--color-work-academia | #152c3d | Dark theme |
--color-work-government | #1c394d | Dark theme |
--color-work-industry | #244c66 | Dark theme |
--color-work-industry-ink | #f0f7fb | Dark theme |
--color-country-in | #352c21 | Dark theme |
--color-country-ca | #35262a | Dark theme |
--color-country-ae | #20352e | Dark theme |
--color-country-sg | #332736 | Dark theme |
--color-country-et | #2c3322 | Dark theme |
--color-country-gb | #252e40 | Dark theme |
--color-country-my | #20353b | Dark theme |