2026

Using Flux

2.0 — With feeling. The design system guide, reimagined with personality.

Flux Design System — Internal

Colors, type, spacing, and more

Foundations

The System

🧱 One source of truth
for everything
we build.

Flux defines the colors, type, spacing, components, and patterns used across all Kaptio products — so everything feels intentionally ours.

Tokens

Colors, fonts, spacing, shadows — the shared building blocks.

Components

Buttons, inputs, modals — reusable pieces that follow the system.

Patterns

Layouts, flows, and interaction patterns for assembled experiences.

4

Principles

🧭 Four things we believe.

Professional & Approachable

Business sophistication with warmth. Travel is personal.

Clean & Purposeful

Every element earns its place. If it's on screen, it serves a function.

Data-Driven

Dense information made scannable, comparable, and actionable.

Modern

Contemporary aesthetics with smooth, intentional interactions.

Interactive

Touch a color

Hover the swatches to see Flux tokens respond in real time.

Category

Sample Card

This card's accent responds to the selected token. The background, border, and label all update.

border: 1px solid --flux-primary-400;

Foundations

🌗 Neutral palette

Black

--flux-black

#212121

Grey 300

--flux-grey-300

#878787

Grey 100

--flux-grey-100

#EBEBEB

Background

--flux-background

#F9FAF8

Aa

Aa

Typography

Lexend Bold

weight: 700 · headings, emphasis, labels

Lexend Light for body text at every size.

weight: 300 · body, descriptions, captions

JetBrains Mono for code.

Two weights. That's it. Bold for structure, Light for content. Constraint creates consistency.

Foundations

✏️ Iconography — Streamline

100,000+ icons. Two weights. One consistent system across every Kaptio product.

Regular

Default UI
Search
User
Settings
Calendar
Location
Flight

Bold

Emphasis / Active
Search
User
Settings
Calendar
Location
Flight
16px
20px
24px
32px

All sizes on the 4px grid

One icon set. Two weights. Regular for default UI, Bold for active states and emphasis. Icons inherit currentColor — no hardcoded fills.

From tokens to production

Implementation

Foundations

📐 Spacing & border radius

4px Base Grid

All spacing derives from a 4px unit. The bars grow on slide entry.

--flux-space-1 · 4px

--flux-space-2 · 8px

--flux-space-4 · 16px

--flux-space-8 · 32px

--flux-space-16 · 64px

Border Radius: 4px

One radius for everything. Circles for avatars. Nothing else.

4px

full

Product Identity

🎨 Each product has its own accent

Products share the Flux foundation but use a unique accent color for identity.

C

Core

--flux-layer-core

E

Edge

--flux-layer-edge

A

Agents

--flux-layer-agents

P

PEX

--flux-layer-pex

Implementation

💻 Using tokens in code

Do

color: var(--flux-primary-400);
background: var(--flux-surface);
border: 1px solid var(--flux-grey-100);
border-radius: var(--flux-radius-sm);
font-family: var(--flux-font-sans);

Avoid

color: #056F82;
background: #F9FAF8;
border: 1px solid #EBEBEB;
border-radius: 4px;
font-family: 'Lexend';

Tokens update everywhere at once. Hard-coded values create drift.

Components

🔧 A card builds itself

Watch the component anatomy assemble piece by piece.

Category

Card Title

Description text uses Light weight, body color, and relaxed line height.

Action
Secondary
01

Container

--flux-surface bg, --flux-grey-100 border, 4px radius

02

Label

xs, bold, uppercase, accent color

03

Title

lg+, bold, --flux-heading

04

Actions

Primary filled, secondary outlined

Putting it all together

Build with Flux

Every pixel should
feel like Kaptio.

Not generic. Not safe. Not average.
Intentional, warm, and unmistakably ours.

flux.kaptio.com

flux.kaptio.com/foundations/tokens

#team-platform-and-services