Brand Colors

Salmon

#E66162

Primary

Text: white

bg-salmon

Navy

#282948

Primary

Text: white or cream

bg-navy

Cream

#FFF4EE

Text: navy or olive

bg-cream

Olive

#81805A

Text: white or cream

bg-olive

White

#FFFFFF

Text: navy or olive

bg-white

Logos

Logo files located in /imgs/logos/

Primary Logo - Light Background

primary-light-bg.svg

SVG - Use on cream/white backgrounds

primary-light-bg.png

PNG - Use on cream/white backgrounds

Primary Logo - Dark Background

primary-dark-bg.svg

SVG - Use on navy/dark backgrounds

primary-dark-bg.png

PNG - Use on navy/dark backgrounds

Square Logo - Light Background

square-light-bg.svg

SVG - Square format for social, icons

square-light-bg.png

PNG - Square format for social, icons

Typography

Font Families

Core Circus

h1 headings (display font)

Local (Self-hosted)

Usage: font-circus

The quick brown fox jumps over the lazy dog

Playfair Display

h2, h3, h4 headings

Google Fonts

Usage: font-playfair

The quick brown fox jumps over the lazy dog (Regular - 400)

The quick brown fox jumps over the lazy dog (Medium - 500)

The quick brown fox jumps over the lazy dog (Bold - 700)

Karla

h5, h6, body text, UI elements, buttons

Google Fonts

Usage: font-karla

The quick brown fox jumps over the lazy dog (Regular - 400)

The quick brown fox jumps over the lazy dog (Medium - 500)

The quick brown fox jumps over the lazy dog (Semibold - 600)

The quick brown fox jumps over the lazy dog (Bold - 700)

Semantic HTML Typography (Auto-Styled)

These styles apply automatically to semantic HTML tags via Tailwind config tokens.

Element	Example	Typeface	Color	Desktop	Mobile	Weight	Line Height	Other
`h1`	Aa	Core Circus	navy	72px	42px	400	1.1	LS: -1px
`h2`	Aa	Playfair Display	navy	48px	32px	400	1.15	LS: -0.5px
`h3`	Aa	Playfair Display	navy	36px	26px	500	1.2	LS: -0.25px
`h4`	Aa	Playfair Display	navy	24px	20px	500	1.3	—
`h5`	Aa	Karla	navy	18px	16px	600	1.4	uppercase
`h6`	Aa	Karla	olive	14px	13px	700	1.4	uppercase, LS: 1.5px
`p`	Aa	Karla	olive	18px	16px	400	1.6	—
`p a`	Aa	Karla	salmon	18px	16px	400	1.6	underline

Heading Examples

Live examples of all heading styles. Verify sizing, weight, and spacing are correct.

Heading One Example

Used for: Page titles, hero headlines

Heading Two Example

Used for: Section titles, major content divisions

Heading Three Example

Used for: Subsection titles, card headings

Heading Four Example

Used for: Component labels, feature titles

Heading Five Example

Used for: Eyebrows, category labels

Heading Six Example

Used for: Meta info, captions, fine print labels

Paragraph Examples

Live examples of paragraph styles with links and bold text.

Base Paragraph (18px desktop / 16px mobile)

Coneflower Creamery has been serving small-batch, artisanal ice cream in Omaha since 2015. We source local ingredients whenever possible and craft unique flavors that celebrate the seasons. Our pies and cakes are made fresh daily in our kitchen.

Visit our shop in the Blackstone District to try our rotating selection of flavors. Bold text appears like this and this is also bold to verify the semibold weight is applying correctly throughout the paragraph.

Paragraph with Links

Coneflower Creamery has been serving small-batch ice cream in Omaha since 2015. Check out our full menu or place an order online for pickup.

Interactive Elements

Buttons & CTAs

All buttons: Karla 16px Semibold | px-8 (32px) py-3 (12px) | rounded-btn (12px)

Class	Fill	Use On	Purpose
`.btn`	Salmon	Any background	Primary site CTA (default)
`.btn-sm`	—	Any (modifier)	Compact size for header/nav
`.btn-dark`	Navy	Light backgrounds	Filled button
`.btn-light`	Cream	Dark backgrounds	Filled button
`.btn-outline`	Salmon border	Light backgrounds	Secondary action
`.btn-outline-light`	White border	Dark backgrounds	Secondary action

Default Button `.btn`

Primary site CTA | Salmon fill | Used for header, hero, main CTAs

background: salmon (#E66162) → navy (#282948)

color: white (#FFFFFF)

Small Button Modifier `.btn-sm`

Compact size for header, nav, and tight spaces | Adds to any button class

px-5 py-2 (20px x 8px) vs default px-8 py-3 (32px x 12px)

text-sm (14px) vs default text-base (16px)

Light Background Buttons

Use these button variants on cream or white backgrounds

Dark Button `.btn-dark`

Filled button for light backgrounds | Navy fill

background: navy (#282948) → salmon (#E66162)

color: white (#FFFFFF)

Outline Button `.btn-outline`

Secondary actions on light backgrounds | Salmon border

border: salmon (#E66162) → salmon (#E66162)

background: transparent → salmon (#E66162)

color: salmon (#E66162) → white (#FFFFFF)

Dark Background Buttons

Use these button variants on navy or dark backgrounds

Light Button `.btn-light`

Filled button for dark backgrounds | Cream fill

background: cream (#FFF4EE) → salmon (#E66162)

color: navy (#282948) → white (#FFFFFF)

Outline Light Button `.btn-outline-light`

Secondary actions on dark backgrounds | White border

border: white (#FFFFFF) → white (#FFFFFF)

background: transparent → white (#FFFFFF)

color: white (#FFFFFF) → navy (#282948)

Transition Utilities

All interactive elements must use one of these transition classes. Default to .easy unless you need a specific timing.

.easy

Default | 200ms ease-out

transition-all 200ms ease-out

.easy-slow

Dramatic | 300ms ease-out

transition-all 300ms ease-out

.easy-fast

Snappy | 150ms ease-out

transition-all 150ms ease-out

Links

Paragraph Links (Auto-styled)

Links inside <p> tags are automatically styled via CSS.

This is a paragraph with a link inside it that automatically gets the underline and hover color change to navy.

Default: text-salmon, underline

Hover: text-navy

No classes needed - automatic via p a selector

Standalone Links (Light Background)

Links outside paragraphs need manual classes.

Underlined link No underline link

Class: text-salmon hover:text-navy easy

Add underline if needed

Standalone Links (Dark Background)

On dark backgrounds, use white text with salmon hover.