KEWAZO Design System
Guideline
GuidelineOverview
The KEWAZO Design System (KDS) is the single source of truth for all digital products across KEWAZO's brand — kewazo.com, the LIFTBOT data platform, internal tooling, and marketing materials. It provides reusable design tokens, components, and patterns that ensure visual consistency and accelerate development.
KDS is structured in three tiers: Base tokens (raw palette values), Semantic tokens (purpose-bound aliases), and Component tokens (component-specific overrides). Always reference the highest-level token available.
AI Coding Instruction
When implementing KDS with AI coding tools (Claude, Cursor, Copilot), follow these rules to ensure token compliance and visual fidelity.
--kds-sem-* semantic tokens in components. Never reference base tokens directly.var(--kds-font-family-display) (LIFTBOT Medium). All other text uses var(--kds-font-family) (Barlow). Never use a third typeface.-0.32px body, -0.64px h2, -0.96px h1. Never use positive tracking in UI text.--kds-base-color-dark-300.--kds-base-color-turquoise-400, padding adjusted to maintain alignment./* ✅ Correct */
color: var(--kds-sem-color-text-primary);
border-bottom: 1px solid var(--kds-base-color-dark-300);
/* ❌ Wrong */
color: #1B1F24;
border-bottom: 1px solid #D7DEE6;Design Token Names
All token names follow a strict anatomy. The system prefix is always kds. Never use shortened or custom prefixes.
/* Base token */
--kds-base-color-turquoise-400: #40C0C0;
--kds-base-color-dark-300: #D7DEE6;
/* Semantic token */
--kds-sem-color-text-primary: #1B1F24; /* → dark-900 */
--kds-sem-color-action-primary: #40C0C0; /* → turquoise-400 */
--kds-sem-color-border-primary: #D7DEE6; /* → dark-300 */Color
FoundationOverview
A solid foundation in a design system streamlines both the design and development processes, enabling businesses to scale efficiently while maintaining a cohesive and effective user experience.
Design Token Names
Please use the design tokens below as CSS variables. Do not use hard-coded hex colours in components.
/* Base token */
--kds-base-color-turquoise-400: #40C0C0;
--kds-base-color-dark-900: #1B1F24;
/* Semantic colour tokens */
--kds-sem-color-text-primary: #1B1F24; /* → dark-900 */
--kds-sem-color-text-highlight: #40C0C0; /* → turquoise-400 */
--kds-sem-color-action-primary: #40C0C0; /* → turquoise-400 */
--kds-sem-color-border-primary: #D7DEE6; /* → dark-300 */
--kds-sem-color-ico-primary: #1B1F24; /* → dark-900 */
/* Shadow tokens */
--kds-sem-shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
--kds-sem-shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
--kds-sem-shadow-display: 0 24px 64px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07);Base Color Palette
Please use the design tokens below as CSS variables. Do not use hard-coded hex colours in components. All token names in a design system start with the system name, KDS (KEWAZO Design System). Hover over a swatch to see its WCAG contrast rating. Click to copy the hex code.
M0%
Y38%
K0%
M27%
Y45%
K4%
M0%
Y29%
K0%
Semantic Colours
Please use the design tokens below as CSS variables. Do not use hard-coded hex colours in components.
| CSS Variable | Category | Light Mode | Dark Mode | Base Token |
|---|---|---|---|---|
| Text | ||||
| --kds-sem-color-text-primary | Text | #1B1F24 | #FFFFFF | dark-900 |
| --kds-sem-color-text-secondary | Text | #414C59 | #EAEDF3 | dark-700 |
| --kds-sem-color-text-teriary | Text | #7A899C | #7A899C | dark-500 |
| --kds-sem-color-text-highlight | Text | #058B8C | #40C0C0 | turquoise-600 / 400 |
| --kds-sem-color-text-red | Text | #BA1315 | #FEF3F3 | red-700 / 200 |
| --kds-sem-color-text-blue | Text | #4347CB | #DDEAFF | blue-500 / 200 |
| --kds-sem-color-text-green | Text | #0E5908 | #E1F4DF | green-700 / 200 |
| --kds-sem-color-text-yellow | Text | #9A7400 | #FBF8E4 | yellow-700 / 200 |
| Background | ||||
| --kds-sem-color-bg-primary | Background | #FFFFFF | #1B1F24 | mono-100 |
| --kds-sem-color-bg-secondary | Background | #F5F7FB | #2B3037 | dark-100 |
| --kds-sem-color-bg-teriary | Background | #EAEDF3 | #414C59 | dark-200 |
| --kds-sem-color-bg-red | Background | #FEF3F3 | #2D0A0A | red-200 |
| --kds-sem-color-bg-blue | Background | #DDEAFF | #0A0D2D | blue-200 |
| --kds-sem-color-bg-green | Background | #E1F4DF | #081A07 | green-200 |
| --kds-sem-color-bg-yellow | Background | #FBF8E4 | #1A1700 | yellow-200 |
| Border | ||||
| --kds-sem-color-border-primary | Border | #D7DEE6 | #414C59 | dark-300 |
| --kds-sem-color-border-secondary | Border | #E6E8EB | #576779 | custom |
| --kds-sem-color-border-error | Border | #EC1010 | #EC1010 | red-500 |
| Icon | ||||
| --kds-sem-color-ico-primary | Icon | #1B1F24 | #FFFFFF | dark-900 |
| --kds-sem-color-ico-secondary | Icon | #414C59 | #EAEDF3 | dark-700 |
| --kds-sem-color-ico-teriary | Icon | #7A899C | #7A899C | dark-500 |
| Shadow | ||||
| --kds-sem-shadow-display | Shadow | 0 24px 64px rgba(0,0,0,.12), 0 8px 24px rgba(0,0,0,.07) | display / overlay | |
| --kds-sem-shadow-lg | Shadow | 0 12px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06) | cards / panels | |
| --kds-sem-shadow-xs | Shadow | 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04) | subtle elements | |
| Action | ||||
| --kds-sem-color-action-primary | Action | #40C0C0 | #40C0C0 | turquoise-400 |
| --kds-sem-color-action-primary-hover | Action | #1EA7A6 | #1EA7A6 | turquoise-500 |
| --kds-sem-color-action-secondary | Action | #1B1F24 | #FFFFFF | dark-900 |
| --kds-sem-color-error | Error | #EC1010 | #EC1010 | accent-red-500 |
Light/Dark Mode Rules
Please use the design tokens below as CSS variables. Do not use hard-coded hex colours in components.
bg-primary is #FFFFFF in light, #1B1F24 in dark.turquoise-400 (#40C0C0) is identical in both modes.data-theme="dark" on <html> and rebind all semantic tokens in that selector.:root {
--kds-sem-color-bg-primary: #FFFFFF;
--kds-sem-color-text-primary: #1B1F24;
--kds-sem-color-border-primary: #D7DEE6;
}
[data-theme="dark"] {
--kds-sem-color-bg-primary: #1B1F24;
--kds-sem-color-text-primary: #FFFFFF;
--kds-sem-color-border-primary: #414C59;
}Typography
FoundationOverview
KDS uses two typefaces: LIFTBOT Medium for Display-level text (hero headings and brand statements) and Barlow for all other UI text. Both typefaces reflect KEWAZO's industrial precision. Letter-spacing defaults to −2% throughout (except Display which uses 0%) to maintain the brand's tight, confident voice. There are 24 type roles across 5 categories.
Type Scale
UI Text Styles
All text roles actively used across the KDS Design System interface — page structure, navigation, body content, and labels.
Interactive Text
Button labels use Barlow SemiBold, all-caps, with tight negative letter-spacing. Size scales with the button variant.
Design Token Names
/* Typeface */
--kds-font-family-display: 'LIFTBOT', 'Barlow', sans-serif; /* Display only */
--kds-font-family: 'Barlow', -apple-system, sans-serif; /* All other text */
/* Display — LIFTBOT Medium, LS 0% */
--kds-sem-typography-display-2xl: 4.5rem / 100%; /* 72px — fluid: clamp(3rem, 2.2rem+4vw, 4.5rem) */
--kds-sem-typography-display-xl: 3.75rem / 100%; /* 60px — fluid: clamp(2.5rem, 1.9rem+3vw, 3.75rem) */
--kds-sem-typography-display-lg: 3rem / 110%; /* 48px — fluid: clamp(2rem, 1.6rem+2vw, 3rem) */
/* Heading — Barlow Bold/SemiBold, LS −2% */
--kds-sem-typography-heading-h1: 2.5rem / 110%; /* 40px Bold */
--kds-sem-typography-heading-h2: 2rem / 120%; /* 32px Bold */
--kds-sem-typography-heading-h3: 1.75rem / 120%; /* 28px SemiBold */
--kds-sem-typography-heading-h4: 1.5rem / 130%; /* 24px SemiBold */
--kds-sem-typography-heading-h5: 1.25rem / 130%; /* 20px SemiBold */
--kds-sem-typography-heading-h6: 1.125rem / 140%; /* 18px SemiBold */
/* Body — Barlow Regular, LS −2% */
--kds-sem-typography-body-lg: 1.125rem / 160%; /* 18px */
--kds-sem-typography-body-md: 1rem / 160%; /* 16px */
--kds-sem-typography-body-sm: 0.875rem / 150%; /* 14px */
--kds-sem-typography-body-xs: 0.75rem / 150%; /* 12px */
/* Label — Barlow Medium, LS −2% */
--kds-sem-typography-label-lg: 1rem / 140%; /* 16px */
--kds-sem-typography-label-md: 0.875rem / 140%; /* 14px */
--kds-sem-typography-label-sm: 0.75rem / 140%; /* 12px */
/* Button — Barlow SemiBold, LS −2%, LH 100% */
--kds-sem-typography-button-lg: 1rem / 100%; /* 16px */
--kds-sem-typography-button-md: 0.875rem / 100%; /* 14px */
--kds-sem-typography-button-sm: 0.75rem / 100%; /* 12px */
/* Utility */
--kds-sem-typography-caption: 0.75rem / 140%; /* 12px Regular, LS −2% */
--kds-sem-typography-overline: 0.75rem / 100%; /* 12px Bold, LS −1.2%, UPPERCASE */Layout
FoundationOverview
KDS uses a fixed 1440px canvas with 40px horizontal margins, giving a 1360px content area. The interior 3-column layout divides that into: 213px side nav + 16px gap + flexible body (≥902px) + 16px gap + 213px sticky nav.
Breakpoint for responsive web
| Breakpoint | Width | Columns | Gutter | Margin | Max container |
|---|---|---|---|---|---|
| Mobile | |||||
| Mobile (dense 1-col) | < 768px | 1 | 0px | 16px (1rem) | 393px |
| Mobile (dense 4-col) | < 768px | 4 | 8px (0.5rem) | 16px (1rem) | 393px |
| Tablet | |||||
| Tablet (standard 8-col) | 768–1279px | 8 | 8px (0.5rem) | 24px (1.5rem) | 834px |
| Desktop | |||||
| Desktop (standard 12-col) | ≥ 1280px | 12 | 16px (1rem) | 80px (5rem) | 1280px |
| Desktop (dense 16-col) | ≥ 1280px | 16 | 20px (1.25rem) | 80px (5rem) | 1280px |
| Presentation | |||||
| Presentation (1920×1080) | 1920px | 12 | 16px (1rem) | 80px (5rem) | — |
Grid
Base unit: 1rem = 16px. The KDS web UI uses a standard 12-column desktop grid with 16px gutters and 80px margins. The body column is fluid between the two fixed sidebars. On mobile, padding reduces to 16px.
Spacing
4px base unit — all spacing values are multiples of 4. Spacing/1 through Spacing/11 cover the full scale from micro to macro.
Radius
FoundationOverview
KDS keeps border-radius intentionally minimal. Round corners are used only in exceptional cases. The system defines just three values — no rounding by default, a 4px XS for rare UI accents, and a full 99px pill for truly circular elements. Never apply radius without explicit design justification.
Design Token Names
--kds-sem-radius-none: 0px; /* Default — sharp corners */
--kds-sem-radius-xs: 4px; /* Exceptional use only */
--kds-sem-radius-full: 99px; /* Circular / pill elements */Radius
Iconography
FoundationOverview
KDS uses a curated icon set aligned to the brand's industrial, precise visual language. Icon graphic is always 24×24px with a 40×40px touch area. Colour follows semantic tokens — default icons use --kds-sem-color-ico-primary. Click any icon to download the SVG file.
Icon set
Formative anatomy
KDS icons are drawn on a 40×40px artboard using filled paths (no stroke). The effective graphic area follows the KDS icon bounds. Below, ico_hamburger is shown at 5× scale with construction guides.
The drawable canvas. All strokes and shapes are constrained within this boundary. Stroke weight: 1.5px.
Outer interaction target. Ensures minimum touch accessibility (WCAG 2.5.5). The icon is always centered within this area.
8px major grid, 4px minor grid. Construction industry icons may scale up to 64×64px while keeping the 40×40 touch area standard.
--kds-icon-md: 24px; /* graphic size */
--kds-icon-touch: 40px; /* touch target */
--kds-icon-stroke: 1.5px;Card
ComponentOverview
KDS cards are sharp-edged containers with a 1px border. They group related content — image, body copy, metadata, and actions — in a consistent structure. Cards never use border-radius by default.
Content Card
Standard card with cover image, eyebrow, title, description, and a footer row.
<div class="kcard">
<div class="kcard-img-ph">...</div>
<div class="kcard-body">
<div class="kcard-eyebrow">Category</div>
<div class="kcard-title">Title</div>
<div class="kcard-desc">Description</div>
</div>
<div class="kcard-footer">
<span class="kcard-tag">Tag</span>
<button class="kbtn kbtn-sm">CTA</button>
</div>
</div>Stat Card
Highlight KPIs and metrics. Use the .up / .dn modifier for trend direction.
Feature Card
Icon + title + description. Use for product features, capabilities, or technical highlights.
Modal
ComponentOverview
KDS provides two modal patterns: a centered overlay for confirmations and forms, and a contact widget fixed to the bottom-right viewport corner — matching the interaction on the KEWAZO.com landing page. The close icon uses ico_close from the KDS icon set.
Centered Overlay
Full-screen backdrop with a centered panel. Click the button to trigger. Close with the X icon or press Escape.
<div class="kmod-backdrop" id="myModal">
<div class="kmod-sheet">
<div class="kmod-head">
<div class="kmod-title">Modal Title</div>
<button class="kmod-close" onclick="kdsCloseModal('myModal')">
[ico_close svg]
</button>
</div>
<div class="kmod-body">Content</div>
<div class="kmod-actions">
<button class="kbtn kbtn-sm">Confirm</button>
</div>
</div>
</div>Contact Widget
Fixed bottom-right panel. References the kewazo.com landing page CTA widget — a compact floating button that expands into a contact form. Active on this page only.
Are you sure you want to proceed? This action cannot be undone. Please review the details before confirming.
Button
ComponentOverview
KEWAZO buttons are zero-radius, SemiBold uppercase, and precision-spaced. They come in three sizes — SM, MD, LG — with a Shadow variant for high-emphasis hero placements, and icon variants for directional CTAs. The Display button extends this system with a teal border-sweep animation for primary landing page actions.
Basic
Four configurations. Hover directly on each button to see the state change — fill shifts from Midnight #1B1F24 to Slate #414C59.
.kbtn { background: #1B1F24; color: #fff; font-weight: 600; text-transform: uppercase; }
.kbtn:hover { background: #414C59; }
.kbtn.kbtn-lg { height: 56px; padding: 12px 24px; font-size: 1.125rem; }
.kbtn.kbtn-md { height: 40px; padding: 12px 20px; font-size: 1rem; }
.kbtn.kbtn-sm { height: 36px; padding: 12px 16px; font-size: 0.875rem; }
.kbtn.kbtn-shd { box-shadow: 0 8px 10px rgba(38,61,66,.16); }Icon
Arrow icon naturally rotates 45° from ↗ to → on hover. Available in Icon Left (icon before text) and Icon Right (icon after text) layouts. Hover to interact.
Icon Left
Icon Right
<!-- Icon Left: icon before text —— rotates ↗→→ on hover -->
<button class="kbtn kbtn-lg kbtn-iconl">
<span class="kbi kbi-24">[arrow-right svg]</span>
Button text
</button>
<!-- Icon Right: icon after text -->
<button class="kbtn kbtn-lg kbtn-iconr">
Button text
<span class="kbi kbi-24">[arrow-right svg]</span>
</button>Display
High-emphasis CTA for hero sections. A soft teal light sweeps around the border using a rotating conic-gradient layer clipped by overflow:hidden. A pulsing teal glow dot anchors the bottom edge.
<a class="kbtn-disp" href="#">
<span class="kbtn-disp-glow"></span> <!-- pulsing bottom glow -->
<span class="kbtn-disp-in">Request a quote</span>
</a>
/* ::before on .kbtn-disp handles the rotating conic-gradient sweep.
overflow:hidden on .kbtn-disp clips the 200%×200% rotating layer.
.kbtn-disp-in sits at z-index:1 above both animated layers. */ProfileMenuButton
A compact account control for the top navigation — avatar, name and role with a chevron that flips when open. Clicking toggles a dropdown (Profile, Settings, Sign out). Click outside or press Esc to close. Built on KDS tokens (Barlow, --r-sm/--r-md, turquoise focus ring).
<div class="pmb" data-pmb>
<button class="pmb-trigger" aria-haspopup="true" aria-expanded="false">
<span class="pmb-avatar">DK</span>
<span class="pmb-meta">
<span class="pmb-name">Damiree Kim</span>
<span class="pmb-role">Design Lead</span>
</span>
<span class="pmb-chev">[chevron svg]</span>
</button>
<div class="pmb-menu" role="menu">
<div class="pmb-menu-head">…avatar · name · email…</div>
<button class="pmb-item">[icon] Profile</button>
<button class="pmb-item">[icon] Settings</button>
<div class="pmb-sep"></div>
<button class="pmb-item pmb-item-danger">[icon] Sign out</button>
</div>
</div>
/* .pmb.open toggles the menu; JS wires click-to-open,
click-outside + Esc to close, and aria-expanded. */KEWAZO Corporate Identity
ResourcesOverview
Official KEWAZO corporate identity assets — the signature wordmark, brand symbol, LIFTBOT typelogo, and motion intro/outro. Use these source files in all KEWAZO communications and never redraw, recolour, or distort the marks. Preview tiles show each asset in white on KEWAZO Dark; click Download to save the original vector or media file.
Signature
The KEWAZO signature (wordmark) and symbol. The wordmark is the primary lockup; the symbol is used where space is limited or where the brand is already established in context.
LIFTBOT Typelogo
The LIFTBOT product typelogo. Use for the LIFTBOT robotic scaffolding system and the LIFTBOT data platform — always alongside, never replacing, the KEWAZO signature.
Video Intro and Outtro
Animated signature for video intros and the branded outro clip. Use as the opening / closing frames of KEWAZO video content and presentations.
Etc.
Favicon for web properties — derived from the KEWAZO symbol at 16–32px.
Clients' Logo
ResourcesOverview
Approved client logos for use in KEWAZO materials. Each logo is provided in four mono variants — Full Colour, Dark, White, and Grey — to ensure correct application across digital and print surfaces. Click any tile to download the SVG.
Asset owners' logo
Logos of KEWAZO's asset owner clients — refineries, chemical plants, and industrial operators. Used in case studies, proposals, and presentations with client approval.
Service providers' logo
Logos of scaffolding contractors and service providers. Files will be added as assets are collected and approved.