KONIGI

Design System

Tokens, typography, and component patterns for konigi.com.

Colors

paper
#F0F0EE
Page background
bg-paper
paper-2
#F5F5F4
Light tint
bg-paper-2
paper-3
#E5E5E3
Surface / dividers
bg-paper-3
ink
#1A1714
Body text
text-inkbg-ink
ink-soft
#46413A
Secondary text
text-ink-soft
rule
#D8D1C2
Borders, hairlines
border-rulebg-rule
tint
#EAE5D9
Key takeaways bg
bg-tint
muted
#8C857A
Timestamps, labels
text-muted
muted-2
#A7A092
Lighter muted / secondary UI
text-muted-2bg-muted-2
surface
#E7E5E4
Card / callout bg
bg-surface
accent
#D24E2C
Links, active states
text-accentbg-accent
accent-dark
#B23E20
Link hover
text-accent-darkbg-accent-dark

CSS Variables

Defined in global.css with no Tailwind color utility. Use the CSS var directly.

rule-2
#C9C1B0
var(--rule-2)
accent-tint
rgba(210, 78, 44, 0.10)
var(--accent-tint)

Shadows & Elevation

hero-inset
inset 0 -20px 24px -8px rgba(0,0,0,0.18)
shadow-hero-inset

Carousel Color Themes

Accent colors for LinkedIn carousel slide decks and summary images. Each theme sets --accent and the final slide background.

Accent
Brand default
#C4633F
dark: #9c4a2e
TurfGreen
Earthy forest green
#3D754E
dark: #2d5a3b
DustyMauve
Deep dusty red
#AD3D3D
dark: #8a3030
MetallicGold
Warm golden ochre
#D9B027
dark: #a88b1e
FrenchBlue
Deep navy blue
#3A4770
dark: #2b3558

Typography

font-serif — Figtree (weight 800)
Display heading
text-display · clamp(3rem, 7vw, 5rem) · lh 1.05
font-serif — Figtree Headline
Headline heading
text-headline · clamp(2rem, 4.5vw, 3.5rem) · lh 1.1
font-serif — Sizes & weights
text-5xl — Logo / Always Iterating
font-bold text-5xl — Listing titles (md+)
font-bold text-4xl — Listing titles (mobile)
text-4xl — Prose h2
text-3xl — Stats numbers
text-2xl — Prose h3 / sub-headings
italic text-2xl — Article tags
font-sans — Source Sans 3
text-xl — Large body / intros
text-lg — Standard body text (18px)
text-base — Default body (16px)
text-sm text-muted — Secondary body
font-mono — IBM Plex Mono
TEXT-BASE UPPERCASE — Nav labels
TEXT-XS UPPERCASE TRACKING-WIDER — Section labels
text-xs — Timestamps, meta

Buttons

Spacing & Layout

max-w-article 1080px
max-w-prose 1080px
layout 1680px
section px px-5 md:px-8 lg:px-0
section py py-12 (48px)

Breakpoints

sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px

Components

Key Takeaways
  • When execution gets cheap, the bottleneck moves to knowing what to build
  • AI makes the cost of bad decisions go up, not down
  • Design thinking matters more now, not less
Tags
design-thinking ai claude-code

Prose

This is the intro paragraph style — larger, lighter weight, with border top and bottom.

Standard prose paragraph. Font size 1.3125rem, line height 1.65. Links are accented and underlined.

Prose h2 heading

Prose h3 heading

Prose h4 heading

A blockquote in Source Sans 3 with top and bottom borders and a large decorative opening quote mark. Use for pull quotes and cited material.

Inline code uses IBM Plex Mono on a muted background.

// Code block
const color = '#C4633F';
  • Unordered list item one
  • Unordered list item two