Imani

The fresh face of clean

Imani design system

A production-ready technical site for scaling Imani interfaces with exact brand primitives, shadcn/ui source components, 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
Effective cleaning products that protect the environment and customer health.
Pillars
Sustainability, innovation, care, and convenience guide every UI decision.
Voice
Confident, light, witty in marketing, direct in functional UI.
Composition
12-column marketing grids, 8-column product grids, soft radii, flat depth.

Bubbles of clarity

Primitives

Every UI component on this site inherits from the same tokens exposed in CSS and TypeScript for repeatable consumption across 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

The examples below consume shadcn/ui source components customized with Imani token defaults, so downstream projects can copy 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 type rules.

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

Clean handoff

Agent resources

This project includes both repo-local and website-visible resources so future agents can build Imani surfaces 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 visiting imani.company.

/llms.txt

Concise crawlable implementation brief for model context.