Cortlet color
Cream
#f4f1e8
Primary warm background used across Cortlet pages.
HEX
#f4f1e8
Tailwind
bg-[#f4f1e8]
CSS
--cortlet-cream: #f4f1e8;
Cortlet brand colors
Color with
intent.
Cortlet uses a small, high-contrast palette built around warm neutrals and bold editorial accents.
Core palette
Six colors.
One system.
Use these colors consistently across Cortlet interfaces, product pages, documentation, and approved brand materials.
Cortlet color
Black
#111111
Primary dark surface and text color.
HEX
#111111
Tailwind
bg-[#111111]
CSS
--cortlet-black: #111111;
Cortlet color
Acid Lime
#dfff52
High-energy accent used for emphasis and feature sections.
HEX
#dfff52
Tailwind
bg-[#dfff52]
CSS
--cortlet-lime: #dfff52;
Cortlet color
Blue
#c9d6ff
Soft supporting color for editorial sections and examples.
HEX
#c9d6ff
Tailwind
bg-[#c9d6ff]
CSS
--cortlet-blue: #c9d6ff;
Cortlet color
Lavender
#e2d7ff
Secondary supporting color for visual separation.
HEX
#e2d7ff
Tailwind
bg-[#e2d7ff]
CSS
--cortlet-lavender: #e2d7ff;
Cortlet color
Coral
#ff765f
Warm accent used for calls to action and final sections.
HEX
#ff765f
Tailwind
bg-[#ff765f]
CSS
--cortlet-coral: #ff765f;
Recommended combinations
Keep contrast
obvious.
Recommended
Cream + Black
The default Cortlet pairing for readable, neutral editorial layouts.
Recommended
Black + White
Use for high-contrast dark sections, product surfaces, and technical content.
Recommended
Acid Lime + Black
Best for high-emphasis sections where the message should feel immediate.
Recommended
Coral + Black
Works well for strong calls to action and closing sections.
Usage guidance
Bold doesn't mean
random.
01
Use contrast
Text, logos, and controls should remain clearly readable against every surface.
02
Use accents selectively
Lime, blue, lavender, and coral work best as large editorial blocks or purposeful highlights.
03
Stay consistent
Avoid introducing near-match colors when an official Cortlet palette color already serves the purpose.
Color rhythm
Large blocks.
Clean transitions.
Cortlet's visual system works best when colors are used confidently as full sections rather than scattered as decorative noise.
Black
Blue
Lavender
Coral
Quick reference
Keep it
recognizable.
Use the official HEX values when matching Cortlet colors.
Prefer black text on the light accent colors.
Use cream and black as the primary neutral foundation.
Treat accent colors as structural parts of the layout, not random decoration.