Handloom cream and temple gold, from the Kerala kasavu saree and mundu. Elegant and festive.
Kasavu is the cream handloom cloth of Kerala, edged with a band of gold zari and worn for Onam, weddings and temple festivals. This palette keeps that restraint: an unbleached cream page, deep ink text, and gold used only as a border. The gold is darkened for links so it stays readable, and a temple-lamp maroon is the second accent. Cormorant Garamond’s delicate serifs suit the occasion.
Click any swatch to copy its hex code.
Worked out when the site is built, using the WCAG 2 formula.
AAA ≥ 7:1 and AA ≥ 4.5:1 for normal text. AA Large ≥ 3:1 is enough for large headings, icons and button shapes.
Every font is self-hosted, so pages load without calling a third-party font service.
Small rooms full of light
Good body type disappears: you stop noticing letters and start reading the story they carry.
const palette = "kasavu"; // 0O 1lI =>
Headings, links, quotes, code, buttons and cards together.
Colour is never just decoration. A background sets the temperature of a room before a single word is read, and an accent tells the eye where to go next. Choose them together and a site starts to feel like a place.
A palette is a promise about how a page will feel.
// apply the palette const root = document.querySelector("html"); root.dataset.lbTheme = "kasavu";
Paste into your own project. The font names match the files listed on the Credits page.
/* Kasavu: Handloom cream and temple gold, from the Kerala kasavu saree and mundu. Elegant and festive. */
:root {
--color-bg: #FBF6EA;
--color-bg-alt: #FFFDF7;
--color-surface: #F3EAD3;
--color-text: #2B2418;
--color-heading: #1E180E;
--color-muted: #695B42;
--color-accent: #A47719;
--color-accent-2: #7A1F1F;
--color-link: #7F5A12;
--color-border: #E6D6AE;
--color-on-accent: #110C04;
--font-heading: 'Cormorant Garamond', Garamond, Georgia, serif;
--font-body: 'Lora', Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}/* Kasavu for Tailwind CSS 4. Use as bg-canvas, text-ink, border-line, font-heading ... */
@import "tailwindcss";
@theme {
--color-canvas: #FBF6EA;
--color-canvas-alt: #FFFDF7;
--color-surface: #F3EAD3;
--color-ink: #2B2418;
--color-heading: #1E180E;
--color-muted: #695B42;
--color-accent: #A47719;
--color-accent-2: #7A1F1F;
--color-link: #7F5A12;
--color-line: #E6D6AE;
--color-on-accent: #110C04;
--font-heading: 'Cormorant Garamond', Garamond, Georgia, serif;
--font-body: 'Lora', Georgia, serif;
--font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}{
"colors": {
"accent": "#A47719",
"accent2": "#7A1F1F",
"bg": "#FBF6EA",
"bgAlt": "#FFFDF7",
"border": "#E6D6AE",
"heading": "#1E180E",
"link": "#7F5A12",
"muted": "#695B42",
"onAccent": "#110C04",
"surface": "#F3EAD3",
"text": "#2B2418"
},
"fonts": {
"body": "Lora",
"heading": "Cormorant Garamond",
"mono": "JetBrains Mono"
},
"mode": "light",
"name": "Kasavu"
}<!-- Apply Kasavu to a Lightbi site -->
<html data-lb-theme="kasavu">
<!-- Or link to this page wearing it -->
https://lightbi-palettes.netlify.app/?palette=kasavu