LEGACY CO — BRAND SYSTEMColors Gradients Typography Buttons Cards Borders Motion Components Usage

Brand Design System v1.0

Legacy Co
Design System

The complete visual language of Legacy Creative Co — colors, typography, motion, components, and tokens. Everything needed to build on-brand.

01 — Color Palette

Brand built on near-black grounds with a single gold accent tone. All surface layers are dark neutrals. Gold is used exclusively for borders, labels, CTAs, and accent hierarchy — never as a fill on large surfaces.

Gold

--gold · #C9A84C

Primary accent. Borders, CTAs, labels, icons

Gold Light

--gold-light · #E8C97A

Gradient midpoint. Hover shimmer

Cream

--cream · #F5E6C8

Warm white. Headlines, active nav, gradient end

White

--white · #FAFAF8

Primary text. Slightly warm, not pure white

Muted

--muted · #888880

Secondary text. Nav links, meta, body copy

Dark 3

--dark3 · #1E1E1E

Elevated card surface

Dark 2

--dark2 · #161616

Card background. Sidebars. Footer

Dark

--dark · #0F0F0F

Secondary background layer

Black

--black · #080808

Primary page background

02 — Gradients & Shimmer

Gold — Static

--grad-gold
135deg · C9A84C → E8C97A → F5E6C8
Used for decorative fills and gradient text

Gold Hover

--grad-gold-h
Lightened hover overlay on buttons. Applied via ::before pseudo-element

Gold Shimmer — Animated

--grad-shimmer
background-size: 300% 300% + shimmer keyframe at 5s (buttons) or 6s (text)

Radial Glow

--grad-radial-glow
Ambient gold glow behind section headers. Very subtle (5% opacity in production)

Animated Gradient Text

Brand That
Tells the Truth

class="grad-text" — shimmer 6s ease infinite

03 — Typography

Display Font — Archivo Black

The Quick Brown Fox

Google Fonts: Archivo+Black · Used for all headings, CTAs, badges, nav

Prose Font — Lora (Serif)

The strongest brands aren't the loudest — they're the most true. Brand Discipleship is the practice of building something that tells the truth consistently, over time, at every touchpoint.

"Italic is used for pull quotes and emphasis within prose."

Google Fonts: Lora:ital,wght@0,400;0,600;1,400 · Used for blog prose only

UI Font — Helvetica Neue

Navigation · Buttons · Labels · Body copy · Meta text · Form inputs

System font — no import required

Type Scale

Display · clamp(52,7vw,96px)
tracking: -0.03emLegacy

H1 · clamp(40,5.5vw,80px)
tracking: -0.025emBrand Identity

H2 · clamp(28,4vw,52px)
tracking: -0.02emBuilt from Calling

H3 · clamp(18,2.5vw,28px)
tracking: -0.01emImprint Framework

Card Title · 20px
tracking: -0.01emConviction First

Prose · 18px
line-height: 1.85Long-form reading body text at eighteen pixels.

Body · 16px
line-height: 1.6Standard UI body copy at sixteen pixels.

Meta · 13pxApril 18, 2026 · 12 min read · KC Clark

Label · 11px
tracking: 0.18emBrand Discipleship

Micro · 10px
tracking: 0.20emApply the Framework

04 — Buttons

Primary Button Outline Button Primary Small Outline Small Primary Large

/* Primary — animated shimmer gold, black text */
<a href="#" class="btn btn-primary"><span>Book a Call</span></a>

/* Outline — transparent, cream text, gold border */
<a href="#" class="btn btn-outline"><span>Learn More</span></a>

/* Size modifiers: .btn-sm · .btn-lg */
/* Nav button: .btn-primary.btn-sm (padding: 10px 28px, font-size: 12px) */

Shimmer Keyframe

@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Apply to any element: */
.shimmer-element {
  background: linear-gradient(135deg, #C9A84C, #F5E6C8, #E8C97A, #C9A84C);
  background-size: 300% 300%;
  animation: shimmer 5s ease infinite;  /* 5s buttons / 6s text */
}

05 — Cards

Standard Card

Conviction First

The card that appears in most multi-column grids across the site. Dark2 background, subtle gold border that brightens on hover.

Feature Card

Active at Rest

Used for highlighted or selected items. Gold border is visible at rest (0.25 opacity), no hover required.

Large Card

Expanded Surface

More padding for premium content blocks. Dark3 background for slight elevation from Dark2 sections.

Step Block Card

Two-column layout with a large gold step number on the left. Used for process steps and framework pillars.

/* Standard card */
<div class="card">...</div>

/* Feature card (active border at rest) */
<div class="card-feature">...</div>

/* Large card */
<div class="card-lg">...</div>

/* Step / pillar card */
<div class="step-block">
  <span class="step-num">01</span>
  <div class="step-content">
    <h3>Step Title</h3>
    <p>Step description.</p>
  </div>
</div>

06 — Borders & Radius

Border Radius

0px

None

8px

Pull quote right

14px

--radius-card

100px

--radius-button

Border Styles

Card Default

1px solid rgba(201,168,76,0.10)

Card Hover

1px solid rgba(201,168,76,0.28)

Active / Featured

1px solid rgba(201,168,76,0.25)

Default / Footer

1px solid rgba(201,168,76,0.18) — --border

Nav / Hairline

1px solid rgba(201,168,76,0.08)

Pull Quote Left Accent

2px solid #C9A84C · left edge only

07 — Motion & Transitions

--dur-fast200msColor and opacity transitions — hover states, link colors

--dur-default300msStandard element transitions — cards, overlays, nav

--ease-springcubic-bezier(0.16, 1, 0.3, 1)Spring-like ease-out — used for transform transitions

shimmer (buttons)5s ease infinitePrimary button and sidebar button shimmer loop

shimmer (text)6s ease infiniteHero gradient text shimmer — slightly slower than buttons

button lifttranslateY(-2px)All buttons lift 2px on hover — no more

card borderborder-color 250ms easeCards transition border opacity on hover — never transform

Reduced Motion Rule

All shimmer animations and transitions are disabled via @media (prefers-reduced-motion: reduce). Never rely on animation to convey meaning.

08 — Components

Pull Quote

The strongest brands aren't the loudest — they're the most true.

class="pull-quote" · Lora title font · Cream color · Gold left border

Badges & Labels

Brand DiscipleshipFrameworkFoundationDeep Dive

Eyebrow Label Above Heading

Section Title Here

.badge · .eyebrow · .sidebar-label

Sidebar Card

Grid Patterns

/* 3-column card grid (standard) */
<div class="grid-3">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

/* Article layout (prose + sticky sidebar) */
<div class="layout-article">
  <div class="article-prose">...</div>
  <aside class="article-sidebar">...</aside>
</div>

/* IMPORTANT: Never use gap:1px + background:var(--border) for grid separators. */
/* This breaks when cards have border-radius. Always use gap:24px + per-card border. */

09 — Usage & Import

CSS File

<!-- In <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lora:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/brand/legacy-co.css">

The CSS file contains all custom properties, resets, component classes, and responsive rules. Import once at the top level — all pages inherit.

Design Tokens JSON (Figma / Style Dictionary)

/* design-tokens.json — import to: */
/* · Figma Tokens plugin (Sync → Local) */
/* · Style Dictionary (build pipeline) */
/* · Token Studio */
/* · Any W3C Design Token-compatible tool */

/* Contains: */
/* color · gradient · typography · spacing */
/* border · shadow · motion · component */
/* animation · z-index · breakpoint */

The token file is not published here yet. Ask KC for the current copy.

Brand Files

/brand— This visual brand guide (shareable URL). Live now.
legacy-co.css— Full design system CSS. Not published yet. Ask KC.
design-tokens.json— W3C tokens for Figma and Style Dictionary. Not published yet.

Legacy CoDesign System