№ A · 09 / Design System

Anatomy of a kiwi. Tokens, type, components.

Every color maps to a part of the kiwi fruit. Three font families, each with a clear role. Two logo variants. A spacing scale. The full set of CSS custom properties used across the KiwiStack site and product. Use this page as the single source of truth.

Color System

Every color maps to a part of the kiwi fruit. The palette is structured in layers: fruit anatomy, seed services, and UI accents.

Fruit Anatomy

Core

#F5F5EE

--kiwi-core

Flesh

#7CB342

--kiwi-green

Flesh Light

#9CCC65

--kiwi-bright

Flesh Pale

#C5E1A5

--kiwi-light

Skin

#795548

--kiwi-skin

Skin Light

#A1887F

--kiwi-skin-light

Seed

#1A1A1A

--seed-black

Vine Dark

#33691E

--kiwi-dark

Vine Green

#558B2F

--vine-green

Seed Services (Pop Colors)

Mail

#FF7043

--pop-coral

Chat

#26A69A

--pop-teal

Meet

#42A5F5

--pop-blue

Work

#AB47BC

--pop-purple

Docs

#EC407A

--pop-pink

Amber

#FFA726

--pop-amber

Backgrounds

Cream

#FAFFF5

--bg-cream

Accent Lime

#CDDC39

--accent-lime

Typography

Three font families, each with a clear role. Quicksand for headings and brand, Nunito for body, JetBrains Mono for code and technical labels.

Anatomy of a Kiwi

Quicksand 700 / 2.2rem · Section titles, brand name, headings

Seeds · Services

Quicksand 700 / 1.15rem · Card headers, sub-headings

KiwiStack®

Quicksand 700 / 4.2rem / -1px tracking · Brand wordmark

Every part of the fruit maps to a layer of the platform, from skin to core. The kiwi grows on a vine that supports, connects, and nourishes every fruit.

Nunito 400 / 1.05rem / 1.6 line-height · Body text, subtitles

rmcp SDK · Rust · Apache 2.0

JetBrains Mono 600 / 0.75rem · Badges, tech labels, code references

Logo Assets

Two logo variants: full (many seeds, for large/hero usage) and small (4 seeds, for compact/icon contexts like the vine nodes).

Full Logo

kiwi-logo-full.svg · 22 seeds, 2 rings

Small Logo

kiwi-logo-small.svg · 4 seeds

Full on Dark

No modification needed

Small on Green

Works on brand gradients

Logo Variations

The wordmark paired with the kiwi icon, shown across different backgrounds. These are kept as inline SVG for color adaptation.

KiwiStack®

Components

Reusable UI elements used across the brand site and product.

Badges

Rust-first AI-native Self-hosted MCP-powered

JetBrains Mono 600 / 0.75rem / 20px radius / 6px 14px padding

Seed Indicators

Mail Chat Meet Work Docs

10px circle + service name. Used in the tech stack cards.

Legend Dot + Connector

Skin

16px dot + 3px white border + 40px dashed connector. Used in anatomy section.

Spacing

Consistent spacing scale used throughout the design.

4px

Tight gaps (tool tags)

8px

Icon margins, fine spacing

12px

Badge gaps, title margins

16px

Grid gaps, card inner padding

20px

Card padding, grid gaps

24px

Section inner margins

40px

Section horizontal padding

60px

Subtitle bottom margin

100px

Section vertical padding

Design Tokens

All CSS custom properties at a glance. Copy the variable name to use in your styles.

Token	Value	Usage
`--kiwi-green`	#7CB342	Primary green, flesh
`--kiwi-bright`	#9CCC65	Lighter flesh, highlights
`--kiwi-light`	#C5E1A5	Pale green, tag backgrounds
`--kiwi-core`	#F5F5EE	Core layer, card backgrounds
`--kiwi-skin`	#795548	Skin layer, brown accent
`--kiwi-skin-light`	#A1887F	Light skin, hover states
`--kiwi-dark`	#33691E	Headings, brand text
`--seed-black`	#1A1A1A	Body text, dark backgrounds
`--bg-cream`	#FAFFF5	Page background
`--accent-lime`	#CDDC39	Progress bars, accents
`--pop-coral`	#FF7043	Kiwi Mail
`--pop-teal`	#26A69A	Kiwi Chat
`--pop-blue`	#42A5F5	Kiwi Meet
`--pop-purple`	#AB47BC	Kiwi Work
`--pop-pink`	#EC407A	Kiwi Docs
`--pop-amber`	#FFA726	Core layer accents
`--vine-green`	#558B2F	Vine section
`--vine-brown`	#5D4037	Vine section dark