Imani

The fresh face of clean

Imani design system

The canonical technical system for building Imani interfaces with brand primitives, shadcn/ui source components, reusable tokens, and agent-readable implementation rules.

View componentsRead the build rules
Imani
shadcn/ui
Use Tunic Green for primary actions and brand highlights.
Use Fence Green for headings on light surfaces and dark brand bands.
Use DM Sans for body, UI labels, forms, tables, and extended reading.
Use Agency for h1, h2, display numerals, and short editorial subheads.

Wiping the slate clean

Foundation

The system turns the brand book into implementation primitives: colors, type, space, radii, shadows, logo behavior, and shadcn component defaults.

Mission
Build interfaces for cleaning products that are effective, sustainable, and easy to understand.
Pillars
Sustainability, innovation, care, and convenience guide product decisions and interface behavior.
Voice
Marketing can be light and witty; product UI stays direct, specific, and task-oriented.
Composition
Marketing uses 12-column grids; product UI uses denser 8-column layouts with restrained depth.

Bubbles of clarity

Primitives

Every component on this site inherits from tokens exposed as CSS variables, TypeScript constants, and Tailwind utilities for repeatable use across Imani projects.

--color-brand-tunic-greenTunic Green

#00CA00

Primary brand, CTAs, active states, highlight accents

--color-brand-fence-greenFence Green

#073C2B

Brand text, headings on light, and dark brand anchor

--color-brand-aqua-blissAqua Bliss

#B8E0D9

Secondary accent, focus ring, soft callout fill

--color-brand-cloud-bleachCloud Bleach

#F2F2F2

Light neutral surface and card fill

--color-brand-black-featherBlack Feather

#101C23

Deep neutral for body type and occasional dark surfaces

--color-brand-whiteWhite

#FFFFFF

Page surface and type on dark

Type Scale
Display type uses Agency; body and UI use DM Sans.
TokenSize / lineFamilyUse
display-xl160px / 0.95Display 700Editorial numerals
display-lg96px / 1.05Display 700Hero headings
h164px / 1.1Display 700Page titles
h244px / 1.15Display 700Section titles
h328px / 1.25Body 700Card titles
subtitle22px / 1.3Body 500Eyebrows and label-style subheads
body16px / 1.55Body 400Default paragraph
body-sm14px / 1.5Body 400Secondary and meta
caption12px / 1.4Body 500Token labels and footnotes
Spacing
4px base scale for layouts and controls.
--spacing-14px
--spacing-28px
--spacing-312px
--spacing-416px
--spacing-524px
--spacing-632px
--spacing-848px
--spacing-1064px
--spacing-1296px
--spacing-16128px
Radii

--radius-sm

6px · Inputs and tags

--radius-md

12px · Buttons and small controls

--radius-lg

20px · Cards and modals

--radius-xl

32px · Feature panels

--radius-pill

999px · Capsules and marketing CTAs

A font as fresh as our suds

Components

These examples use shadcn/ui source components wired to Imani token defaults, so downstream projects can reuse patterns without reinterpreting the brand.

Button System
Primary actions are Tunic Green. Secondary dark actions are Fence Green.

Stains? Not on our palette.

Layouts

Marketing pages use a 12-column grid with generous margins. Product UI can tighten to 8 columns while keeping the same color, spacing, and typography rules.

01
02
03
04
05
06
07
08
09
10
11
12

Clean handoff

Agent resources

This project publishes repo-local and website-visible resources so future agents can build Imani interfaces consistently.

Repeatable Build Contract
Root AGENTS.md documents stack, design constraints, token sources, shadcn usage, and Vercel deployment target.

/agents.md

Website-visible guide for agents building Imani interfaces.

/llms.txt

Concise crawlable implementation brief for model context and retrieval.