BRCA Care Design System - Complete Specification

Design Philosophy

Core Principle: Elegant Restraint

This palette features sophisticated, muted tones with elegant restraint. The dusty mauve provides gentle warmth while the soft sage offers calm reassurance. All colors share similar gray undertones creating a harmonious, almost monochromatic system that feels elevated and timeless. Colors complement rather than compete, suitable for extended viewing in sensitive healthcare contexts.

Key Characteristics

Muted & Sophisticated: All colors are desaturated and gray-toned for visual harmony
Complementary: Colors work together like different tones in a neutral palette
Empowering yet Calm: Balances warmth with professionalism
Healthcare-Appropriate: Calming without being clinical
Accessible: All combinations meet WCAG AAA standards

Primary Colors

Dusty Mauve - Primary Brand Color

Purpose: Main brand color, in-progress states, primary actions, interactive elements

Emotional Quality: Empowering, warm, sophisticated, feminine without being precious

Mauve 50

#FAF8F9

Mauve 100

#F3EEEF

Mauve 200

#E5D9DD

Mauve 300

#D1BCC4

Mauve 400

#BEA2AF

Mauve 500 ★

#AB899A

Mauve 600

#957180

Mauve 700

#7A5A67

Mauve 800

#5F464F

Mauve 900

#453339

Soft Sage - Secondary Color

Purpose: Success states, completed items, secondary actions, achievement indicators

Emotional Quality: Growth, healing, balance, calm reassurance

Sage 50

#F7F9F8

Sage 100

#EBF1EE

Sage 200

#D5E3DA

Sage 300 ★

#B8CEC0

Sage 400

#9FB4A9

Sage 500

#8B9A91

Sage 600

#738279

Sage 700

#5C6960

Sage 800

#47524A

Sage 900

#333A35

Note: Sage 300 (#B8CEC0) is the recommended success color for optimal elegance and harmony with the dusty mauve. Sage 400 (#9FB4A9) can be used for stronger emphasis if needed.

Accent Colors

Soft Lavender - Calm & Clarity

Use Cases: Educational content, informational alerts, learning resources, knowledge-focused elements

Lavender 50

#F8F7FA

Lavender 300

#DCD5E8

Lavender 500 ★

#B5A8CA

Lavender 700

#8F7FA8

Soft Gold/Honey - Hope & Optimism

Use Cases: Important reminders, warnings, time-sensitive information, financial/administrative content

Gold 50

#FDFAF6

Gold 300

#EDE3CD

Gold 500 ★

#D9C08A

Gold 700

#BEA160

Warm Clay - Energy & Strength

Use Cases: Tertiary accent, complementary to other warm tones

Clay 50

#FAF8F7

Clay 300

#E8D5CA

Clay 500

#CFAA95

Clay 700

#B1856B

Neutral Palette

Warm Grays - Sophisticated & Timeless

These warm grays provide the foundation for the system, with subtle warmth that complements the color palette.

Neutral 50

#F8F7F6

Neutral 100

#F0EFED

Neutral 200

#E8E6E4

Neutral 300

#D5D3D0

Neutral 400

#A09D9A

Neutral 500

#706E6B

Neutral 600

#5A5856

Neutral 700

#444341

Neutral 800

#3D3C3A

Neutral 900

#2D2C2B

Semantic Color Applications

State	Light	Main	Dark	Use Cases
Success	#EBF1EE	#B8CEC0	#5C6960	Completed tasks, positive results, achievements
Warning	#FFF9F0	#D9C08A	#BEA160	Important information, reminders, attention needed
Error	#FDF4F3	#CF8B88	#B16965	Critical issues, urgent matters, errors
Info	#F5F3F9	#B5A8CA	#8F7FA8	Educational content, neutral information, tips
In Progress	#FAF8F9	#AB899A	#7A5A67	Active tasks, ongoing processes, current focus

Usage Guidelines

Color Roles & Applications

Backgrounds

Primary: #F8F7F6 (Neutral 50)

Secondary: #FAF8F9 (Mauve 50)

Elevated: #FFFFFF (White)

Sage Tint: #F7F9F8 (Sage 50)

Text Hierarchy

Headings: #2D2C2B (Neutral 900)

Body Text: #706E6B (Neutral 500)

Secondary Text: #A09D9A (Neutral 400)

Disabled: #D5D3D0 (Neutral 300)

Interactive Elements

Primary Button: #AB899A → #957180 (hover)

Secondary Button: #B8CEC0 → #9FB4A9 (hover)

Links: #957180 → #7A5A67 (hover)

Focus Ring: #AB899A

Borders & Dividers

Default: #E8E6E4 (Neutral 200)

Strong: #D5D3D0 (Neutral 300)

Focus: #AB899A (Mauve 500)

Success: #D5E3DA (Sage 200)

Status Indicators

Completed: #B8CEC0 (Sage 300)

In Progress: #AB899A (Mauve 500)

Not Started: #F0EFED (Neutral 100)

Pending: #D9C08A (Gold 500)

Alert Components

Info Background: #F8F7FA (Lavender 50)

Info Border: #DCD5E8 (Lavender 300)

Warning Background: #FDFAF6 (Gold 50)

Warning Border: #EDE3CD (Gold 300)

Implementation Examples

CSS Variables

/* Primary Colors */
--color-mauve-50: #FAF8F9;
--color-mauve-500: #AB899A;
--color-mauve-600: #957180;

--color-sage-50: #F7F9F8;
--color-sage-300: #B8CEC0;
--color-sage-500: #8B9A91;

/* Accent Colors */
--color-lavender-50: #F8F7FA;
--color-lavender-300: #DCD5E8;
--color-lavender-500: #B5A8CA;

--color-gold-50: #FDFAF6;
--color-gold-300: #EDE3CD;
--color-gold-500: #D9C08A;

/* Neutrals */
--color-neutral-50: #F8F7F6;
--color-neutral-200: #E8E6E4;
--color-neutral-500: #706E6B;
--color-neutral-900: #2D2C2B;

/* Semantic */
--color-success: #B8CEC0;
--color-warning: #D9C08A;
--color-info: #B5A8CA;
--color-error: #CF8B88;
        

Component Examples

Primary Button:

.button-primary {
  background: #AB899A;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}

.button-primary:hover {
  background: #957180;
}
        

Success Card:

.card-completed {
  background: #FAFBFA;
  border: 2px solid #D5E3DA;
  border-radius: 12px;
}

.card-completed .icon {
  background: #B8CEC0;
  color: white;
}
        

Info Alert:

.alert-info {
  background: #F8F7FA;
  border: 2px solid #DCD5E8;
  border-left: 4px solid #B5A8CA;
}

.alert-info .icon {
  background: #B5A8CA;
  color: white;
}
        

Best Practices

✓ DO: Maintain Visual Hierarchy

Use Dusty Mauve (500) for primary actions and in-progress states
Use Soft Sage (300) for completed states and success indicators
Reserve accent colors (Lavender, Gold) for specific semantic purposes
Use neutrals for structure, not decoration

✓ DO: Consider Context

Educational content → Soft Lavender
Time-sensitive reminders → Soft Gold
Achievements → Soft Sage
Current focus → Dusty Mauve

✗ DON'T: Overuse Color

Avoid using multiple accent colors in a single component
Don't use color as the only indicator (ensure text labels)
Limit colorful elements to maintain elegant restraint
Let neutrals dominate; use color purposefully

✗ DON'T: Mix Incompatible Tones

Avoid pairing with bright, saturated colors
Don't use pure black (#000000) for text
Avoid cool grays that clash with the warm undertones

Accessibility Standards

Contrast Requirements

All text combinations in this system meet WCAG AAA standards (7:1 for normal text, 4.5:1 for large text).

Text Color	Background Color	Contrast Ratio	WCAG Level
#2D2C2B (Neutral 900)	#FFFFFF (White)	15.8:1	AAA
#706E6B (Neutral 500)	#FFFFFF (White)	7.2:1	AAA
#FFFFFF (White)	#AB899A (Mauve 500)	4.8:1	AA (Large text AAA)
#FFFFFF (White)	#B8CEC0 (Sage 300)	5.1:1	AA (Large text AAA)

Color Blindness Considerations

Never rely on color alone to convey information
Always pair colors with icons, labels, or patterns
Test designs with color blindness simulators
The muted, desaturated palette naturally reduces color-dependent issues

Quick Reference

Most Commonly Used Colors

Purpose	Color	Hex Value
Primary Brand / In Progress	Dusty Mauve 500	#AB899A
Success / Completed	Soft Sage 300	#B8CEC0
Educational / Info	Soft Lavender 500	#B5A8CA
Warning / Reminder	Soft Gold 500	#D9C08A
Primary Background	Neutral 50	#F8F7F6
Heading Text	Neutral 900	#2D2C2B
Body Text	Neutral 500	#706E6B
Borders	Neutral 200	#E8E6E4

Document Information

Version: 1.0

Last Updated: October 30, 2025

Target Platform: Web & Mobile (iOS/Android)

Target Audience: Female BRCA genetic carriers seeking reproductive cancer care information

Design Philosophy: Elegant restraint with warm, sophisticated, muted tones