Color

The IKN color palette focuses on the three IKN brand colors, uses specific grays/blacks for text hierarchy, and incorporates essential semantic colors, resulting in a manageable set of defined colors.

1. Core Brand Palette (3 Colors):

These colors are foundational to the IKN brand identity and should be used consistently across InsureKidsNow.gov.

#0D76AD

IKN Blue

Primary color for branding. Used for default state of primary buttons, major links and key navigation.

#661466

IKN Plum

Secondary brand color. Used for some headings, secondary button borders and branding accents.

#FF913D

IKN Burnt Orange

Accent color, used sparingly for specific UI elements or borders.

2. Neutral Palette (6 Colors)

This neutral color ramp replaces multiple variations of whites, grays and blacks found throughout IKN.

#1B1B1B

Ink
Body/Headings

Primary text color for maximum contrast (Typography H1-H6, Body copy). Consolidates various dark grays/blacks like #333333 and #000000 for text use.

#565C65

Dark Gray
(UI/Secondary Text)

Secondary text in complex UI elements, borders for input fields, and organizational dividers.

#757575

Medium Gray
(Placeholder/Mid-Text)

Placeholder text in search fields and forms. Also used for certain medium contrast UI text and text placeholders.

#DFE1E2

Light Gray
(Borders/Divider)

Default color for borders for containers, tables, and form elements.

#F0F0F0

Off White
(Shaded Background)

Subtle background color for card elements, shaded table rows, or UI areas that need slight visual separation.

#FFFFFF

White
(Base Background)

Main page background, also used for fill colors and light text on dark backgrounds.

3. Interaction and System Colors (8 Colors)

This category defines colors for interactive states and system feedback, ensuring clear communication of success, errors, warnings and links.

#17415F

IKN Dark Blue
(Hover)

Used for the hover and active states of primary buttons and key links. Also known as Medicaid Navy.

#EEFAFE

IKN Light Blue
(Info/Background)

Background shade for informational messages or light blue containers. Can be used as the "Info" UI background color.

#00A91C

Success Green
(Core)

Primary color for successful actions and validation (e.g., success messages, icons) straight from USWDS.

#ECF3EC

Light Success
(backgrounds)

Light background color for success alert containers (USWDS)

#D54309

Error Red
(Cover)

Primary color for critical errors and validation feedback (e.g., error messages, icons)

#F4E3DB

Light Error
(Background)

Light background color for error alert containers

#FFBE2E

Warning Yellow
(Core)

Primary color for warning messages and cautionary indicators, aligned with USWDS guidance.

#FAF3D1

Light Warning
(Background)

Light background color for warning alert containers.

Accessibility Requirements

Contrast Ratios: To meet accessibility standards, text and background color combinations must maintain minimum contrast ratio of 4.5:1 for normal text. When deviating from the default text color or background, always ensure this minimum contrast.

Color Use: Never use color alone to convey information; ensure adequate font sizes and maintain sufficient contrast.

Usage Rules (Do's and Don'ts)

Consistency is Key: Stick to the documented colors! Using multiple arbitrary variations of the same hue (like different plums or blues) weakens brand recognition.

Purpose-Driven Colors: Every color in the palette must have a defined purpose (e.g., Error Red is reserved strictly for error states).

Deprecation: Any color currently used on IKN that is not included in this consolidated style guide palette is deprecated and must be replaced during future development efforts.