Tamra Bedford, Cosmetic RN

Style Kit — Generated 2026-08-03 | Items are numbered — reference by number when requesting changes

1. Color Palette

1.1Logo Gold#FFF27FPrimary accent (background; use black text on it)

1.2Accent Gold#FFF27FSame gold for buttons and accents

1.3Charcoal#262729Body text / dark surfaces

1.4Black#000000Headings / maximum contrast

1.5White#FFFFFFPage background / text on dark

1.6Gray#555555Secondary text (passes AA on white)

1.7Gold Text#8A6D00Accessible gold for text on white (4.9:1)

1.8Light Gray#CCCCCCBorders / dividers only (never body text)

2. Typography

2.1H1 HeadingMerriweather • 700 • 44px desktop • line-height: 1.2em

The quick brown fox jumps over the lazy dog — 0123456789

2.2H2 HeadingMerriweather • 700 • 32px desktop • line-height: 1.25em

The quick brown fox jumps over the lazy dog — 0123456789

2.3H3 HeadingMerriweather • 700 • 24px desktop • line-height: 1.3em

The quick brown fox jumps over the lazy dog — 0123456789

2.4BodyOpen Sans • 400 • 18px desktop • line-height: 1.7em

The quick brown fox jumps over the lazy dog — 0123456789

2.5Small / CaptionOpen Sans • 400 • 16px desktop • line-height: 1.6em

The quick brown fox jumps over the lazy dog — 0123456789

2.6ButtonOpen Sans • 600 • 16px desktop

The quick brown fox jumps over the lazy dog — 0123456789

3. Contrast Matrix

All 9 combinations pass WCAG AA for normal text.

WCAG 2.1 thresholds: AA normal = 4.5:1 • AA large text = 3.0:1 • AAA normal = 7.0:1 • AAA large = 4.5:1 • Large text = 24px+ regular or 18.67px+ bold

ID	Swatches	Combination	Ratio	WCAG
3.1		Charcoal on White #262729 on #FFFFFF	14.95:1	AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.2		Black on White #000000 on #FFFFFF	21.0:1	AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.3		Gray on White #555555 on #FFFFFF	7.46:1	AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.4		Gold Text on White #8A6D00 on #FFFFFF	4.92:1	AA ✓AA Lg ✓AAA ✗AAA Lg ✓
3.5		Black on Logo Gold #000000 on #FFF27F	18.26:1	AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.6		Black on Accent Gold #000000 on #FFF27F	18.26:1	AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.7		White on Charcoal #FFFFFF on #262729	14.95:1	AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.8		White on Black #FFFFFF on #000000	21.0:1	AA ✓AA Lg ✓AAA ✓AAA Lg ✓
3.9		Logo Gold on Charcoal #FFF27F on #262729	8.1:1	AA ✓AA Lg ✓AAA ✓AAA Lg ✓

4. Button Styles

4.1Primary CTA

Default: bg #FFF27F / text #000000
Hover: bg #FFF27F / text #000000
Border: 2px solid #8A6D00
Radius: 4px • Font: Open Sans 600

4.2Secondary

Default: bg #262729 / text #FFFFFF
Hover: bg #000000 / text #FFFFFF
Border: 2px solid #262729
Radius: 4px • Font: Open Sans 600

4.3Outline

Default: bg #FFFFFF / text #262729
Hover: bg #262729 / text #FFFFFF
Border: 2px solid #262729
Radius: 4px • Font: Open Sans 600

5. Form Elements

5.1 — Text input

Placeholder text…

border: #555555 • bg: #FFFFFF • text: #262729 • placeholder: #6C6C6C • radius: 4px • font: Open Sans 16px
Placeholder #6C6C6C = 5.25:1 on white (passes AA).

6. Spacing Scale

ID	Label	Value	Visual
6.1	XS	8px
6.2	S	16px
6.3	M	24px
6.4	L	32px
6.5	XL	48px
6.6	XXL	64px