v1.1 · April 2026 · Internal reference
Design System
Single source of truth for UXDivers visual tokens, components, and Webflow class system. A working tool for designers and developers.
Colors
Dark-only · No light modeBackground Layer — elevation through color, not shadows
--background--primary
#0a0a0a · Page bg
--background--secondary
#181a1f · Cards
--background--tertiary
#2a2d35 · Borders
--background--black
#000 · Footer, CTA
Elevation = background color difference. Secondary (#181a1f) on Primary (#0a0a0a) creates the z-axis. No shadows needed.
Text Layer — three hierarchy levels
Headlines, labels, UI text
Body copy — default text color for all paragraphs
Supporting text, captions, metadata, placeholders
Brand Layer — blue scale
--brand--base
#3479ff · CTAs
--brand--hover
#1f50ad · Hover
--brand--active
#2d73fa · Active
Accent Palette — decorative only · never primary actions
Use for card hover borders (--card-accent) and badge fills only. Never as button backgrounds.
Typography
Geist · Geist Mono · Self-hosted--font--primary · Geist
Design & Build
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Weights: 300 400 500 600 700 · Self-hosted
--font--mono · Geist Mono
--brand--base: #3479ff;
border-radius: 28px;
cross-platform · .NET MAUI
Used for: tokens, labels, eyebrows, code blocks
Weights: 400 500 · Self-hosted
Do NOT load Inter or Manrope. Verify no WebFont.load call is active. Only Geist and Geist Mono site-wide.
H13rem / 48px · wt 500
lh 110% · ls −1.5px
mobile: 2.25rem
Cross-Platform Design
H1
H2 — only 6002.5rem / 40px · wt 600
lh 115% · ls −1.5px
Advanced UI Systems
H2
H32rem / 32px · wt 500
lh 120%
Design & Engineering
H3
H41.75rem / 28px · wt 500
Component Architecture
H4
H51.5rem / 24px · wt 500
Uno Platform · Avalonia
H5
Body Large1.25rem / 20px · wt 400
We design and build advanced cross-platform user interfaces for complex software products.
Body L
Body Medium1rem / 16px · lh 170%
Seamless UX across mobile, desktop, HMI and embedded systems using the full .NET ecosystem.
Body M
Body Small0.875rem / 14px
Supporting text, metadata, descriptions, captions and secondary UI copy.
Body S
Mono / CodeGeist Mono · 13px
--brand--base: #3479ff · cross-platform
Mono
Label / EyebrowGeist Mono · 12px · 500
uppercase · ls +0.08em
Mobile · Cross-Platform · .NET MAUI
Label
Spacing
Section tokens · Component tokens · Max-widthsSection-level tokens — apply via .section-wrap class
| Token | rem | px | Visual | Context |
|---|
| --space-section-v | 8.75rem | 140px | | Vertical padding, desktop sections |
| --space-section-h | 12.5rem | 200px | | Horizontal rail, desktop |
| --space-section-v--tablet | 5rem | 80px | | Vertical, tablet breakpoint |
| --space-section-h--tablet | 3.12rem | ~50px | | Horizontal, tablet |
| --space-section-v--mobile | 3.75rem | 60px | | Vertical, mobile |
| --space-section-h--mobile | 1.25rem | 20px | | Horizontal, mobile |
Component-level tokens
| Token | rem | px | Visual | Context |
|---|
| --space-card-pad | 3.125rem | 50px | | Internal card padding (.card-base) |
| --space-gap-sm | 1rem | 16px | | Small component gap |
| --space-gap-md | 1.5rem | 24px | | Medium component gap |
| --space-gap-lg | 2rem | 32px | | Large component gap |
Max-widths — UXDivers runs wider than standard SaaS
| Token | Value | Context |
|---|
| --max-width--nav | 2000px | Nav container |
| --max-width--hero | 1900px | Hero sections |
| --max-width--section | 1600px | Standard content sections |
UITUI default is 1280px. UXDivers is 1600–1900px. Always replace UITUI max-width:1280px with the appropriate token before layout work.
Border Radius
Large radius is a UXDivers brand signal--radius--card-wrapper
4px
Outer card wrapper (minimal)
--radius--input
8px
Form inputs
--radius--button
1rem / 16px
All buttons
--radius--card
28px
Service cards, .card-base
--radius--card-lg
32px
Large images, carousels
--radius--container
48px
CTA banners, hero containers
--radius--badge
100px
Badges, tags, pills
--radius--circle
50%
Avatars, icon circles
The jump from button (16px) to card (28px) is intentional. Do not homogenize. UITUI card radius (12px) always maps to --radius--card (28px).
Shadows
Functional only · Never decorative--shadow--card
none
Default for all cards. Elevation via background contrast, not shadow.
--shadow--input
0 1px 4px rgba(0,0,0,.24)
Focused form inputs only. Applied on :focus via .input-base.
--shadow--drag
0 11px 20px -7px rgba(0,0,0,.17)
Slider drag handles only. Signals a draggable target.
--shadow--subtle
1px 1px 55px rgba(0,22,50,.08)
Hero images and editorial photo accents.
No decorative shadows. All UITUI shadow-xs through shadow-2xl map to none. Fix visual definition with background color contrast.
Cards
.card-base · CS card · CTA banner.card-base — universal card class · hover to see border state
⚡
UI/UX Design
Full product design for complex cross-platform software — from discovery to high-fidelity specs.
🔧
Implementation
End-to-end development on Uno Platform, Avalonia, .NET MAUI and WPF.
🎯
Strategy & Research
UX research, usability testing and product strategy for complex software domains.
background: --background--secondary · border: 2px solid transparent
border-radius: --radius--card / 28px · padding: --space-card-pad / 50px
transition: border-color 0.3s · :hover → border-color: var(--card-accent, --brand--base)
.cs-card — case study card
card image · 16:9
Cross-PlatformAvalonia
Ambient Weather Station
A complex cross-platform HMI application for embedded and desktop environments.
View case study →.contact_banner — CTA banner · radius--container (48px)
Ready to build something?
Tell us about your project. We’ll figure out if we’re the right team.
Get in touchbg: #000 + optional texture overlay · border-radius: 48px · padding top/bottom: 8.5rem · overflow: hidden
Badges & Tags
.badge-base + modifiers · .cs-tag.badge-base.badge-blue
bg: rgba(52,121,255,0.14) · color: --brand--400
MobileCross-PlatformNew
.badge-base.badge-green
bg: rgba(123,224,145,0.14) · color: --palette--green-base
DesktopStableLive
.badge-base.badge-pink
bg: rgba(253,52,110,0.14) · color: --palette--pink-base
HMIBetaDesign
.badge-base.badge-violet
bg: rgba(173,52,216,0.14) · color: --palette--violet-base
AvaloniaEmbeddedUX
.badge-base.badge-yellow
bg: rgba(252,220,0,0.14) · color: --palette--yellow-base
WPFEnterpriseStrategy
.badge-base.badge-orange
bg: rgba(255,113,52,0.14) · color: --palette--orange-base
Uno PlatformResearchAudit
.cs-tag (neutral)
bg: --background--tertiary · color: --text--tertiary
Mobile.NET MAUIBlazorWPF
Badges need two classes: .badge-base (structure) + .badge-green etc. (color). Base sets radius 100px, padding 3px 10px, mono font. Modifier sets background and text color.
UITUI → UXDivers Token Map
Quick reference for layout migrationFor every UITUI value encountered, replace it with the UXDivers equivalent before placing any element on a page.
| UITUI value | → | UXDivers token |
|---|
| Colors — Backgrounds |
| #FFFFFF (page bg) | → | var(--background--primary) #0a0a0a |
| #FFFFFF (card / surface) | → | var(--background--secondary) #181a1f |
| #F9FAFB · #F2F4F7 (subtle bg) | → | var(--background--tertiary) #2a2d35 |
| Colors — Text |
| #101828 (primary text) | → | var(--text--primary) #f8fafc |
| #344054 (secondary text) | → | var(--text--secondary) #dde1eb |
| #667085 (tertiary / placeholder) | → | var(--text--tertiary) #aab3cd |
| Colors — Brand & Interactive |
| #7F56D9 (brand purple) | → | var(--brand--base) #3479ff |
| #6941C6 (button hover) | → | var(--brand--hover) #1f50ad |
| #F9F5FF (brand tint) | → | var(--brand--100) #dde9ff |
| #D0D5DD (border) | → | var(--background--tertiary) #2a2d35 |
| Colors — Semantic |
| #12B76A (success) | → | var(--palette--green-base) |
| #F04438 (error) | → | var(--palette--red-base) |
| #F79009 (warning) | → | var(--palette--orange-base) |
| Typography |
| font-family: Inter | → | Geist, Arial, sans-serif |
| font-weight: 600 (all headings) | → | 500 (H1, H3–H5) · 600 (H2 only) |
| Display 2XL 72px / XL 60px | → | H1 at 3rem / 48px — do not use UITUI display scale |
| Spacing & Layout |
| Section padding: 96px vertical | → | var(--space-section-v) / 140px |
| Section padding: 80px horizontal | → | var(--space-section-h) / 200px |
| max-width: 1280px | → | 1600px (standard) · 1900px (hero) |
| Card padding: 24px or 32px | → | var(--space-card-pad) / 50px |
| Border Radius |
| Button radius: 8px | → | var(--radius--button) / 1rem / 16px |
| Card radius: 12px · 16px · 20px | → | var(--radius--card) / 28px |
| Tag / chip radius: 9999px | → | var(--radius--badge) / 100px |
| Shadows — all map to none |
| shadow-xs · shadow-sm · shadow-md · shadow-lg · shadow-xl | → | none · use background color contrast instead |
Three UITUI patterns without direct equivalents: (1) Gradient backgrounds → use solid UXDivers palette color or rgba(52,121,255,0.12) radial glow. (2) White-on-white cards → bg=--background--secondary, section bg=--background--primary. (3) Icon container fills → use --background--tertiary as container, icon in --brand--300 or --brand--400.
Pre-Flight Checklist
Complete before any layout work beginsNone of these are optional. Do not import or rebuild a single UITUI layout until every item is confirmed.
EXISTSAll background color tokens in Webflow Variables panel — background--primary, secondary, tertiary
EXISTSBrand color tokens — brand--base, brand--400, brand--300, brand--100
VERIFYNew brand tokens added to Variables panel — brand--hover, brand--active
EXISTSText tokens — text--primary, text--secondary, text--tertiary
EXISTSSpacing section tokens — space-section-v, space-section-h, and all breakpoint variants
CREATEComponent spacing tokens — space-gap-sm (16px), space-gap-md (24px), space-gap-lg (32px)
CREATEAll radius tokens — radius--button, radius--card, radius--card-lg, radius--container, radius--badge, radius--input
CREATEMax-width tokens — max-width--hero (1900px), max-width--section (1600px), max-width--nav (2000px)
CREATEShadow tokens — shadow--card (none), shadow--input, shadow--drag, shadow--subtle
CREATEAccent palette tokens — all 6 pairs: palette--green, pink, violet, yellow, orange, red (base + highlight each)
VERIFYBody tag styles — Geist, --background--primary, --text--secondary, 1rem, 170% line-height
VERIFYH1–H6 tag styles — Geist, correct sizes/weights per type scale, letter-spacing −1.5px on H1/H2
VERIFYLink tag styles — color: brand--base, hover: brand--400, no underline by default
VERIFY.primary-button — confirm border-radius 16px, hover #1f50ad, focus ring 2px solid --brand--400
CREATE.secondary-button — transparent bg, 1px solid tertiary border, hover: tertiary bg + brand--400 border
CREATE.ghost-button — no bg, no border, brand--base text, hover: brand--400
CREATE.card-base — secondary bg, 2px transparent border, 28px radius, 50px pad, hover border-color
CREATE.section-wrap — section-v/h padding + all breakpoint overrides wired to spacing tokens
CREATE.badge-base + 6 palette modifier classes — radius 100px, mono font, per-palette bg/color
CREATE.input-base and .label-base — wired to background/text/radius tokens with focus state
CREATESurface classes — .surface-page, .surface-card, .surface-raised, .surface-banner
VERIFYWebflow Fonts — Geist loaded, Inter NOT loaded, Manrope NOT loaded, no WebFont.load for Lato or DM Mono
Legend:EXISTS Already in CSS/Variables — confirm it’s wired to Webflow panel · VERIFY May exist, needs confirmation · CREATE Does not exist yet — must be built
CSS Variables Reference
All tokens · Complete list| Variable | Value | Preview |
|---|
| Backgrounds |
| --background--primary | #0a0a0a | |
| --background--secondary | #181a1f | |
| --background--tertiary | #2a2d35 | |
| --background--black | #000000 | |
| Text |
| --text--primary | #f8fafc | |
| --text--secondary | #dde1eb | |
| --text--tertiary | #aab3cd | |
| Brand |
| --brand--base | #3479ff | |
| --brand--hover | #1f50ad | |
| --brand--active | #2d73fa | |
| --brand--400 | #78a6ff | |
| --brand--300 | #9abcff | |
| --brand--200 | #bbd2ff | |
| --brand--100 | #dde9ff | |
| Greyscale |
| --greyscale--50 | #eef0f5 | |
| --greyscale--100 | #dde1eb | |
| --greyscale--300 | #bbc2d7 | |
| --greyscale--500 | #64748b | |
| --greyscale--700 | #2a2d35 | |
| --greyscale--900 | #0a0a0a | |
| Accent Palette |
| --palette--green-base | #7be091 | |
| --palette--green-highlight | #adecba | |
| --palette--pink-base | #fd346e | |
| --palette--violet-base | #ad34d8 | |
| --palette--yellow-base | #fcdc00 | |
| --palette--orange-base | #ff7134 | |
| --palette--red-base | #ff2525 | |
| Typography |
| --font--primary | Geist, Arial, sans-serif | — |
| --font--mono | Geist Mono, monospace | — |
| Spacing |
| --space-section-v | 8.75rem / 140px | — |
| --space-section-h | 12.5rem / 200px | — |
| --space-card-pad | 3.125rem / 50px | — |
| --space-gap-sm | 1rem / 16px | — |
| --space-gap-md | 1.5rem / 24px | — |
| --space-gap-lg | 2rem / 32px | — |
| --max-width--hero | 1900px | — |
| --max-width--section | 1600px | — |
| --max-width--nav | 2000px | — |
| Border Radius |
| --radius--button | 1rem / 16px | — |
| --radius--card | 28px | — |
| --radius--card-lg | 32px | — |
| --radius--container | 48px | — |
| --radius--badge | 100px | — |
| --radius--input | 8px | — |
| Shadows |
| --shadow--card | none | — |
| --shadow--input | 0 1px 4px rgba(0,0,0,.24) | — |
| --shadow--drag | 0 11px 20px -7px rgba(0,0,0,.17) | — |
| --shadow--subtle | 1px 1px 55px rgba(0,22,50,.08) | — |