Foundations

Colors

Logo greens anchor the brand. Warm neutrals, sage surfaces, and a clear text hierarchy give the interface room to breathe.

Usage & approach

Insurance green (#006838) is the primary action color in both themes, paired with white text. Leaf green remains a brand accent. Dark mode uses charcoal and grey surfaces, with soft white links and supporting text for readability.

Color palette

Every swatch includes its exact Tailwind utility. Choose text and surface pairings deliberately; a listed text utility is a reference, not approval for every background.

Insurance green

#006838

bg-[#006838]
text-[#006838]

Primary actions and brand anchors.

Leaf green

#559e45

bg-[#559e45]
text-[#559e45]

Decorative brand accents; avoid small white text on this color.

Soft sage

#d0e3c8

bg-[#d0e3c8]
text-[#d0e3c8]

Subtle fills and supporting shapes.

Sage canvas

#f1f2f0

bg-[#f1f2f0]
text-[#f1f2f0]

Quiet section and status backgrounds.

Off-white canvas

#fcfdfb

bg-[#fcfdfb]
text-[#fcfdfb]

Default page background and inverse text.

Dark charcoal

#183d2c

bg-[#183d2c]
text-[#183d2c]

Primary headings and body emphasis.

Secondary text

#333

bg-[#333]
text-[#333]

Paragraphs, hints, and supporting labels.

Muted text

#808080

bg-[#808080]
text-[#808080]

Secondary metadata on light surfaces.

White

#ffffff

bg-white
text-white

Cards and inverse text on primary green.

Border

#dfe7df

bg-[#dfe7df]
border-[#dfe7df]

Subtle light-mode separators.

Dark canvas

#1c1e1e

bg-[#1c1e1e]
dark:bg-[#1c1e1e]

Neutral charcoal page background.

Dark surface

#262828

bg-[#262828]
dark:bg-[#262828]

Layered grey cards and panels.

Raised surface

#303232

bg-[#303232]
dark:bg-[#303232]

Selected tabs, nested content, and subtle highlights.

Dark border

#3d4140

bg-[#3d4140]
dark:border-[#3d4140]

Dark-mode separators.

Dark secondary

#c4c7c5

bg-[#c4c7c5]
dark:text-[#c4c7c5]

Supporting text on dark surfaces.

Dark muted

#b2b7b4

bg-[#b2b7b4]
dark:text-[#b2b7b4]

Metadata on dark surfaces.

Soft white text

#f4f5f2

bg-[#f4f5f2]
dark:text-[#f4f5f2]

Dark-mode headings and primary text.

Primary action · both themes

#006838

bg-[#006838]
text-white

Insurance green stays the primary action color in light and dark mode.

Primary action hover

#00552e

bg-[#00552e]
hover:bg-[#00552e]

A deeper Insurance green for primary action hover in both themes.

Control border

#565c58

bg-[#565c58]
dark:border-[#565c58]

Stronger outlines for inputs and controls.

Inset surface

#171919

bg-[#171919]
dark:bg-[#171919]

Preview surround and code-panel background.

Specifications

Primary action: bg-[#006838] text-white; dark:bg-[#006838] dark:text-white.
Page canvas: bg-[#fcfdfb]; dark:bg-[#1c1e1e].
Text hierarchy: text-[#183d2c], text-[#333], text-[#808080].
Dark surfaces: dark:bg-[#262828], dark:border-[#3d4140], dark:text-[#f4f5f2].

Surface and text pairing

The same content hierarchy in light and dark mode.

<article class="rounded-lg border border-[#dfe7df] bg-white p-6 dark:border-[#3d4140] dark:bg-[#262828]">
  <h3 class="text-xl font-semibold text-[#183d2c] dark:text-[#f4f5f2]">A clear view of your coverage</h3>
  <p class="mt-3 text-base leading-7 text-[#333] dark:text-[#c4c7c5]">Use secondary text for explanations and supporting details.</p>
  <p class="mt-3 text-xs text-[#808080] dark:text-[#b2b7b4]">Last reviewed 16 October 2026</p>
</article>

HTML + Tailwind CSS · fit to panel

Bring this into your project

Copy the HTML from the code panel. Keep complete utility names in files scanned by Tailwind, retain accessible labels and focus styles, and connect actions to your own application. Preview controls belong to this documentation and are not part of the copied example.