Brand Guidelines

Kaizen Visual Identity

The single source of truth for colors, typography, spacing, components, and tone. Reference this page when building anything under the Kaizen brand.

Palette

Colors

Brand gradient

Kaizen Orange

#e85325

Deep Orange

#d14820

Dark Rust

#8f391f

Deep Brown

#50261b

Near Black

#2a1b18

Light mode

Background

#f5ece8

--background

Foreground

#1d1717

--foreground

Accent

#e85325

--accent

Accent Hover

#d14820

--accent-hover

Surface

#efe5df

--surface

Card

#efe5df

--card

Border

#d5cbc5

--border

Muted

#7d6665

--muted

Muted Foreground

#a39290

--muted-foreground

Text Secondary

#5a4a49

--text-secondary

Label

#1d1717

--label

Warm

#282221

--warm

Warm Subtle

#fff6d9

--warm-subtle

Dark mode

Background

#1d1717

--background

Foreground

#f5ece8

--foreground

Accent

#e85325

--accent

Accent Hover

#f06030

--accent-hover

Surface

#282221

--surface

Card

#282221

--card

Border

#3a3332

--border

Muted

#7d6665

--muted

Muted Foreground

#dac6bd

--muted-foreground

Text Secondary

#dac6bd

--text-secondary

Label

#f0efed

--label

Warm

#fff6d9

--warm

Warm Subtle

#fff6d9

--warm-subtle

Developer note

All colors are defined as CSS custom properties in globals.css and exposed as Tailwind utilities via @theme inline. Use bg-background, text-foreground, bg-accent etc. in Tailwind classes. Dark mode switches automatically via prefers-color-scheme and data-theme attribute.

Type

Typography

Aspekta is the primary typeface, self-hosted as a variable font. Headings use weight 450, body text uses 350. The system font stack serves as fallback.

Displayclamp(3rem, 5vw, 4.5rem) / 450 / 1.1 / -0.02em

Speed is the strategy

Heading 2clamp(2.25rem, 3vw, 3rem) / 450 / 1.2 / 0

Working software in days

Heading 3clamp(1.25rem, 2vw, 1.625rem) / 450 / 1.2 / 0

AI-native development

Body1.125rem / 350 / 1.5 / 0

We build production-ready web apps, SaaS platforms, and AI tools. Delivered in days, not months.

Small / Caption0.875rem / 350 / 1.5 / 0

Last updated March 2026

Section Label0.875rem / 500 / 1.5 / 0.05em

WHAT WE BUILD

Font loading

Aspekta is loaded via @font-face from /fonts/AspektaVF.woff2 as a variable font (weight 100-1000). CSS variable: --font-aspekta. Tailwind: font-sans and font-heading.

Layout

Spacing

All spacing is rem-based (1rem = 16px). Section padding uses fluid clamped values. Component gaps follow the scale below.

xs
0.25rem (4px)
sm
0.5rem (8px)
md
0.75rem (12px)
base
1rem (16px)
lg
1.5rem (24px)
xl
2rem (32px)
2xl
3rem (48px)
3xl
5rem (80px)
section
clamp(4rem, 8vw, 8rem) (64-128px)

Page layout

  • Max content width: 80rem (1280px)
  • Horizontal padding: 5vw
  • Section padding: clamp(4rem, 8vw, 8rem)
  • Border radius: 0.625rem (--radius)

Component gaps

  • Grid gap: 0.75rem to 1rem
  • Card padding: 1.5rem to 2rem
  • Button padding: 0.75rem 1.5rem
  • Input padding: 0.75rem

UI

Components

Buttons

.btn .btn-primary .rounded-[0.625rem]
.btn .btn-secondary .rounded-[0.625rem]
.btn .bg-transparent .border .border-border (ghost)

Cards

Default card

Uses bg-card with border-border. Standard padding of 1.5rem.

Surface card

Uses bg-surface without a visible border. For subtle grouping.

Interactive card

Adds hover:shadow-lg for clickable card patterns.

Form inputs

Badges

DefaultAccentOutlineWarm

Voice

Tone of Voice

We are

  • Direct. Say what we do, not what we aspire to.
  • Professional. Expert tone, never stiff or corporate.
  • Concrete. Specifics over buzzwords. “3 days” over “fast.”
  • Approachable. Write like talking to a smart colleague.

We avoid

  • Hype language (“revolutionary,” “game-changing”)
  • Vague promises (“we help you succeed”)
  • Em dashes. Use commas, colons, or periods instead.
  • Exclamation marks (except in truly exceptional contexts)
  • Passive voice when active is clearer

Good

  • “Your MVP, live in 5 days.”
  • “We build with Next.js, Tailwind, and AI agents.”
  • “Fixed-price. No hourly billing.”
  • “Production-ready code, not prototypes.”

Avoid

  • “We leverage cutting-edge AI to deliver transformative solutions.”
  • “Our revolutionary platform empowers businesses.”
  • “We're passionate about helping you grow!”
  • “Contact us to learn more about our offerings.”

Language

Default language is English. Swedish is used when addressing Swedish clients directly or in legal/compliance contexts. Never mix languages within a single page or section.