CFTV Style Guide

Brand colors, typography, and design tokens for the Community Foundation of Teton Valley.

Color Palette

Primary

Dusk

--color-dusk

#3d3454

Plum

--color-plum

#644b62

Poppy

--color-poppy

#dd8b88

Cirrus

--color-cirrus

#bdc8d2

Neutral

Clay

--color-clay

#a8886c

Graphite

--color-graphite

#1d292e

Fog

--color-fog

#dbdcdd

Sand

--color-sand

#e5cec3

Accent

Dark Pine

--color-dark-pine

#164154

Pine

--color-pine

#415e68

Nimbus

--color-nimbus

#415e68

Typography

Company Name — DM Serif Display

Community Foundation of Teton Valley

font-family: 'DM Serif Display', serif | --font-display

Tagline — DM Serif Text Italic

Connecting generosity to the causes, nonprofits, and people who make Teton Valley thrive.

font-family: 'DM Serif Text', serif; font-style: italic | --font-tagline

Headings — Barlow Condensed

Heading One — 700

Heading Two — 600

Heading Three — 500

font-family: 'Barlow Condensed', sans-serif | --font-heading

Body — Karla

Regular 400 — The Community Foundation of Teton Valley works to elevate lives through the power of generosity.

Semi-Bold 600 — Supporting nonprofits, donors, and community initiatives since 2007.

font-family: 'Karla', sans-serif | --font-body

Buttons

On Light Backgrounds

Primary Button Secondary Button

.theme_btn .theme_btn_bg | .theme_btn .theme_btn3

On Dark / Colored Backgrounds

Default on Dark

Light Button

.theme_btn .theme_btn_bg .theme_btn--light

Usage Guidelines

Variant	Class	Use On	Usage
Primary	.theme_btn .theme_btn_bg	Light backgrounds, dark backgrounds	Main CTAs, form submissions
Secondary	.theme_btn .theme_btn3	Light backgrounds	Secondary actions alongside primary
Light	.theme_btn .theme_btn_bg .theme_btn--light	Colored backgrounds (Poppy, Dark Pine, etc.)	CTAs on sections where primary won't contrast