Design System
Showcase
Everything you need to review the new visual direction — colour palette, Liquid Glass components, typography, and full page patterns. Use the theme toggle (top right) to compare dark and light modes.
01 — Colour Palette
research/COLOUR_STRATEGY.mdElectric Teal replaces the previous sage mint (#58C29F → #00E5D4). The new accent is 3× more saturated, providing 10.2:1 contrast ratio (WCAG AAA) against the dark background — from 3.8:1 before.
Dark Theme
Brand Dark
#001220
Background
Brand Panel
#00262A
Panels, cards
Brand Accent ✦
#00E5D4
CTAs, highlights
Brand Mint
#E0F8F6
Body text
Light Theme
Brand Dark
#F0FAFF
Background
Brand Panel
#D2EEFA
Panels, cards
Brand Accent ✦
#00A091
CTAs, highlights
Brand Mint
#05283C
Body text
Gradient (text-gradient class)
The Machine That Builds Machines
02 — Typography
Space Grotesk — all weightsFont: Space Grotesk (300–700). All headings use tight tracking; body uses relaxed leading.
Display (text-5xl, font-bold, tracking-tight)
AI Development Teams
H1 (text-4xl, font-bold)
From idea to MVP through conversation
H2 (text-2xl, font-bold)
How the platform works
H3 (text-xl, font-semibold)
AI worker orchestration
Body (text-base, text-brand-mint/65)
Kaidera orchestrates specialised AI workers — each with a defined role, memory, and skill set — to plan, build, test, and ship software autonomously. You guide the outcomes. They do the work.
Small / Caption (text-xs, uppercase, tracking-widest)
Enterprise-grade platform
03 — Liquid Glass
research/LIQUID_GLASS_GUIDE.mdLiquid Glass requires colourful backgrounds to blur through. The bg-mesh-dark class (applied to every page body) provides radial gradient colour variation — giving the glass material something vivid to reveal. Glass-blur increased from 12px → 20px; border opacity from 0.12 → 0.18.
Glass variants — shown on mesh background
.glass
Standard glass. Used for cards, panels, info blocks.
.glass-deep
Deep glass. Used for navigation bar, modal overlays.
.glass-panel
Panel glass. Used for sidebars, section containers.
.glass + inner glow mesh (CTA block pattern)
Inner radial gradient behind the glass surface simulates the "lensing" effect — the glass appears to gather and concentrate the surrounding light. This is the TechPageCTA and pricing bottom-CTA pattern.
05 — UI Patterns
badges · tags · trust signals · FAQReusable micro-patterns used across the site.
Status Badges
Trust Micro-copy (FOWD pattern)
No commitment required · SOC 2 aligned infrastructure · EU data residency
30-minute walkthrough · Real codebase demo · Cancel anytime
Custom contracts · Annual billing · Dedicated support
Research: 74% of enterprise buyers cite "fear of wrong decision" as primary hesitation. These micro-copy lines remove that friction below every CTA.
Feature List Items
- Steering Floor (org-level policy locks)
- Multi-LLM provider configuration
- EU data residency available
- SLA: 99.9% uptime guarantee
FAQ Accordion (details/summary)
Can I bring my own LLM API keys?
Yes. Pro and Enterprise plans support multi-LLM configuration. You control the keys; Kaidera orchestrates the AI workers.
06 — Page Pattern Examples
hero · trust bar · CTA blockPreview key full-width page sections at reduced scale.
Hero Section Pattern (Z-pattern — CTAs top-right in GlobalNav)
AI-Native Development Platform
From idea to MVP
through conversation.
Your AI worker team. No code. No co-founder. No compromise.
No commitment required · SOC 2 aligned infrastructure · EU data residency
Trust / Social Proof Bar (neurodesign: logos processed pre-cognitively)
Building for teams in
TechPageCTA.astro — Bottom of all 16 technology deep-dive pages
Ready to go deeper?
See AI worker orchestration in a live demonstration
Watch Kaidera apply AI worker orchestration to a real enterprise codebase — live, with your team's questions answered.
No commitment required · 30 minutes · Real codebase walkthrough
07 — Research Summary
research/ folder — 6 documentsKey findings from the design research that informed every decision on this page. Full documents are in Kaidera_marketing/research/.
The 8-Second Rule
NEURODESIGN_PSYCHOLOGY.md- →94% of first impressions based on design in 50ms
- →57% of viewing time above the fold only
- →Hero must communicate ONE outcome in <7 words
Z-Pattern Scanning
NEURODESIGN_PSYCHOLOGY.md- →Sparse visual pages = Z-pattern (not F-pattern)
- →Z endpoint = top-right → "Book a Demo" in GlobalNav
- →CTAs at Z endpoint get 2-3× more clicks
Electric Teal vs Sage Mint
COLOUR_STRATEGY.md- →Old accent: 45% saturation → calm, wellness, low energy
- →New accent: 98% saturation → electric, intelligent, urgent
- →Contrast ratio: 3.8:1 → 10.2:1 (WCAG AA → AAA)
Liquid Glass Requirements
LIQUID_GLASS_GUIDE.md- →Glass needs colourful backgrounds to blur through
- →bg-mesh-dark adds radial gradients behind every page
- →blur: 12px → 20px; border opacity: 0.12 → 0.18
Fear of Wrong Decision (FOWD)
CONVERSION_OPTIMIZATION.md- →74% of enterprise buyers cite FOWD as primary hesitation
- →Fix: risk-removal micro-copy below every CTA
- →"No commitment · SOC 2 · EU data residency" removes objections
Hick's Law — Navigation
NEURODESIGN_PSYCHOLOGY.md- →More choices = slower decisions = more abandonment
- →GlobalNav: max 4 items (Technology, For Enterprise, Login, Book a Demo)
- →One primary CTA per page section — no competing actions
Team Feedback
Questions or feedback?
Review complete? Share your thoughts via the contact form, or annotate directly in the team portal.