Crème Collective — Branding Reference

Color Palette

Extracted from cremecollective.com. The palette is warm, editorial, and intentionally restrained — just three core colors plus white and black for utility.

Primary Colors

Cream

Page background, light text on dark

#FDF0E6 rgb(253, 240, 230)

Burgundy

Primary text, headings, nav, dark backgrounds

#61132B rgb(97, 19, 43)

Red

Accent, CTAs, footer, highlights

#D32C29 rgb(211, 44, 41)

Secondary / Utility Colors

Coral

Secondary accent, sparse highlights

#EF475E rgb(239, 71, 94)

White

Cards, inputs, overlays

#FFFFFF rgb(255, 255, 255)

Cream Dark

Card wells, hover states, depth (derived)

#E8D5C4 rgb(232, 213, 196)

Color on Color

Burgundy Background

Cream text on burgundy. Used sparingly for hero sections and high-impact areas. The site uses this for the nav bar overlay on the homepage hero image.

Red Background

Cream text on red. Used for the footer and "What We Do" section. Creates energy and urgency — use for CTAs, banners, and key callouts in the portal.

Typography

The site uses SuisseIntl as its primary typeface (a premium commercial font). For the portal, we use Figtree — the site's declared fallback — which is a free Google Font with a similar clean, modern sans-serif feel.

Font stack: SuisseIntl, Figtree, Helvetica, Arial, sans-serif

H1 — Page Title 72–120px Weight 400 Uppercase

Built for Beauty

H2 — Section Title 48px Weight 400 Uppercase

Executive Snapshot

H3 — Subsection 32px Weight 400 Sentence case

Revenue & Financial Overview

Body 16px Weight 400 Line-height 1.6

CRÈME delivers omnichannel brand building through an integrated team of creative, marketing, sales, and fulfillment experts — designed to grow beauty and wellness brands with precision and measurable impact.

Label / Caption 13px Weight 400–600 Uppercase Tracking 0.08em

Monthly Sales Report • March 2026 • Wonder Valley

Navigation 16px Weight 400 Uppercase

Services Work About Contact

UI Elements

Button styles, borders, and interactive patterns derived from the site. The Crème aesthetic is square-cornered, clean, and minimal — no rounded pills or heavy shadows.

Buttons

Primary Action Secondary Accent / CTA

Borders & Dividers

1px rgba(218,218,218,0.4) — on cream bg

1px rgba(253,240,230,0.5) — on dark bg

1px solid #FDF0E6 — full cream divider

Key Characteristics

No border-radius on buttons — square corners throughout
No box shadows — depth via color contrast, not elevation
Generous padding — 14–16px vertical on buttons, 32px+ horizontal
Uppercase labels — small caps with wide letter-spacing for metadata
Minimal borders — translucent, never heavy or dark
Large headings — oversized display type creates editorial drama

Spacing Scale

The site uses generous, breathing whitespace. Recommended spacing for the portal:

8px

16px

24px

32px

48px

2XL

64px

3XL

80px

Design Principles for the Portal

How the Crème brand translates into a data-rich client portal.

(01)

Board-Ready, Not Dashboard-y

Think editorial layout with data, not a SaaS analytics tool. Reports should feel like something you'd hand to a CFO or investor.

(02)

Warm & Premium

The cream background and burgundy text create warmth. Avoid cold grays and blues. Data visualizations should use the brand palette.

(03)

Breathing Room

Generous whitespace between sections. Let each data point have room to breathe. Dense ≠ valuable. The site uses massive margins — the portal should too.

(04)

Red = Action

Use the red accent intentionally: alerts, key metrics, CTAs, and status indicators. It's the brand's energy color — don't dilute it.

(05)

Type Does the Work

Large, confident headings. Uppercase section labels. The typography hierarchy creates structure without heavy UI chrome.

(06)

Numbered Sections

The site uses (01), (02), (03) numbering for services. Apply the same pattern to report sections for consistency and wayfinding.

CSS Variables Reference

Copy-paste ready for the portal codebase:

:root {
  /* Core Palette */
  --cream:          #FDF0E6;
  --burgundy:       #61132B;
  --red:            #D32C29;
  --coral:          #EF475E;
  --white:          #FFFFFF;

  /* Derived */
  --cream-dark:     #E8D5C4;
  --burgundy-light: #8A2040;
  --red-light:      #E85550;

  /* Borders */
  --border-light:   rgba(218, 218, 218, 0.4);
  --border-cream:   rgba(253, 240, 230, 0.5);

  /* Typography */
  --font-primary:   'Figtree', Helvetica, Arial, sans-serif;

  /* Spacing */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 80px;
}

Extracted from cremecollective.com on March 12, 2026
For use in the Crème Client Portal client mockup