Design language

This is the visual source of truth for kifuliiru.com. Use it when adding pages, components, or illustrations. Prefer these tokens over default Tailwind blues, cool grays, or one-off hex values.

Personality

The site should feel like land, paper, and voice: the homeland of Ibufuliiru, cream paper for reading, and clay for action. It is editorial, not a tech-blue SaaS dashboard.

• Quiet white canvas
• Soft cream surfaces
• Light sage heroes with dark ink type
• Clay for primary actions
• Forest and ochre as supporting color, not decoration noise

Core palette

| Token | Light | Dark | Role | | --- | --- | --- | --- | | Ink | #14231c | #f6f2e4 | Headings, primary text, icon color on light | | Canvas | #ffffff | #15110d | Page background | | Sage | #f2f6f3 | #24382e | Hero / landing band | | Cream / surface | #fcfbf9 | #1c1814 | Cards, panels, muted wells | | Clay | #a8442e | #c97860 | Primary buttons, key CTAs, marquee, user chat | | Leaf | #3f6b4a | #87a56f | Secondary accent, hero orbs, success | | Ochre | #c08a2e | #d4b27a | Highlights, hover on clay bands, warm emphasis | | Dusk | #2b4c5c | #7ea0aa | Rare supporting accent (maps, water, night) | | Cream text | #f6f2e4 | — | Text on clay, forest, or ink bands | | Body on sage | #3e4b42 | #e3d5bf | Hero supporting copy |

CSS variables live in src/app/globals.css (--ink, --canvas, --clay, --leaf, --ochre, --dusk, --sage, --surface, --text-secondary, …). Tailwind aliases: ink, canvas, clay, leaf, ochre, dusk, sage, cream.

Default Tailwind blue-* is remapped to the forest/sage scale so leftover bg-blue-500 / text-blue-600 classes stay on-brand. Default gray-* is warmed toward parchment/ink so body copy is not cool slate.

Type

• Display / headings: Fraunces (font-serif / font-heading), weight 500, tight line-height.
• UI / body: Work Sans (font-sans).
• Labels / codes: IBM Plex Mono (font-mono), small, uppercase, wide tracking.

Hero titles are ink (#14231c) on sage. Do not use cream or white type on the light hero.

Surfaces

| Element | Recipe | | --- | --- | | Page | bg-canvas / page-shell | | Card | rounded-xl or rounded-2xl + border border-ink/6 bg-surface (or .surface-card) | | Tablet / data panel | .surface-tablet-panel | | Header | .theme-site-header — frosted white, light border | | Hero | bg-sage text-ink + BrandBlueAtmosphere (moving sage gradient, not a grid) | | Dark hero | dark:bg-sage-dark dark:text-cream | | Clay band (marquee) | bg-clay text-cream, ochre hover |

Corner radius: rounded-xl / rounded-2xl. Avoid square rounded-md cards on marketing pages.

Buttons and links

| Kind | Light | Notes | | --- | --- | --- | | Primary | bg-clay text-[#f6f2e4] hover:bg-accent-600 | Shared Button default variant | | Secondary | Surface card, ink text, hover:border-clay/20 | | | Ghost | Transparent, ink, surface hover | | | On clay / ink bands | Cream fill (#f6f2e4) with ink text | Never cream text on cream | | Focus ring | Clay (ring-clay) | |

Do not use #3b82f6 or bg-blue-600 for new work. Those were the old brand blue.

Heroes

1. Full-width sage band (bg-[#f2f6f3] / dark:bg-[#24382e]).
2. BrandBlueAtmosphere for the slow gradient (name is historical; it is sage/forest, not blue).
3. Title and badge in ink. Body in #3e4b42.
4. Primary CTA clay; secondary is a surface chip.
5. No dotted grid. No white or cream headline on the light gradient.

Dark mode

• Page: #15110d
• Surface: #1c1814
• Text: cream #f6f2e4 / #f4ead9
• Clay lightens to #c97860; leaf to #87a56f; ochre to #d4b27a
• Hero: forest #24382e with cream type

Keep contrast. If a control sits on sage, type is ink in light mode and cream in dark mode.

Accent variety

When a grid needs more than one color (Discover, Academy hub, AI platforms), rotate only this set:

1. Clay #a8442e
2. Leaf #3f6b4a
3. Ochre #c08a2e
4. Dusk #2b4c5c
5. Ink #14231c

Do not introduce Tailwind sky, fuchsia, lime, indigo, or violet for new catalog chips.

Do / don't

Do

• Use CSS variables or Tailwind brand tokens (clay, leaf, ink, sage).
• Put primary actions in clay.
• Keep cards cream on a white canvas.
• Test type on sage: if it disappears, it is too light.

Don't

• Use default Tailwind blue (#3b82f6) or cool gray chrome.
• Put white/cream text on the light sage hero.
• Mix more than one loud accent on a single card.
• Add new hex values that are not in this document without updating this file.

File map

| What | Where | | --- | --- | | Tokens | src/app/globals.css (:root and .dark) | | Tailwind aliases | tailwind.config.ts | | Hero atmosphere | src/components/ui/BrandBlueAtmosphere.tsx | | Shared button | src/app/components/ui/button.tsx | | This document | docs/DESIGN_LANGUAGE.md |