THE ABUNDANCE BRAND SYSTEM

One source of truth

Every color, gradient, font, section archetype, component, motion behavior, content format, and rule that makes something feel like Abundance. If it's not on this page, it doesn't belong on a page.

01 · IDENTITY

Logo, palette, gradients

The foundation. Tiger's-blood crimson on cream, one accent only, never combined with a second color family.

Logo wordmark

Font: --font-logo (Neo Contact LT Pro) · used only for the wordmark, nowhere else.

Abundance.

When to use what · backgrounds

Background choice signals what the section is doing. Get this wrong and the whole page reads off.

CREAM (#F5F0E8)

The editorial default

Page background. Light sections: declaration, process, ladder, beliefs, social proof, achromatic patterns, final CTA.

When the section is teaching, comparing, or reading.

As a card background INSIDE a cream section — use --cream-soft instead.

MATTE BLACK (#0A0A0A)

The dramatic stage

Dark rounded stages for: hero, empathy, hub-and-spoke, thesis-after card, editorial dot-period, stats moment, pricing, FAQ, footer.

When the section is declaring, showcasing, or pricing.

As the whole page background. The page is cream; sections are stages.

CREAM SOFT (#FAF6EF)

Subtle card lift

Cards / containers sitting inside cream sections — gives subtle separation without a hard border.

As page background. Too close to white to hold the brand warmth.

SURFACE 1/2/3

Nested dark layers

Cards inside dark stages step up through --surface-1, --surface-2, --surface-3 for depth.

As a section background — always use --bg for stages.

Foundation · cream & matte black

Use as page background and stage background. Cream is the editorial default; matte black is the dramatic stage.

Cream

#F5F0E8

--cream

Cream soft

#FAF6EF

--cream-soft

Cream deep

#ECE5D8

--cream-deep

Matte black

#0A0A0A

--bg

Surface 1

#141414

--surface-1

Surface 2

#1B1B1B

--surface-2

Surface 3

#242424

--surface-3

Ink — text colors

Four ink levels for hierarchy. Body copy is always one tier softer than its container.

Cream ink (on dark)

#F5F0E8

--ink

Body ink (on dark)

#C9C2B5

--ink-body

Muted ink (on dark)

#807A70

--ink-muted

Dark ink (on cream)

#0A0A0A

--ink-dark

Dark soft (on cream)

#3A3530

--ink-dark-soft

Dark muted (on cream)

#6A645B

--ink-dark-muted

Tiger's blood — the only accent

Four stops, used as a system. Never paired with a second hue family. Primary --sig is the crimson, not the orange.

Highlight

#FF5733

--sig-highlight

Primary

#ED1C24

--sig

Deep

#B30E14

--sig-deep

Anchor

#7A0712

--sig-anchor

Gradients — three tiers mapped to typographic hierarchy

The signature gradient comes in three flavors, each tied to a specific role. The right gradient depends on what's wearing it. Same hues, different stop distributions.

A · HERO · specular peak--grad-sig-hero · h1, .display em, animated borders

#B30E14 · 0–7%#ED1C24 · 28%#FF5733 · 67%#B30E14 · 88%#7A0712 · 93–100%

B · DEFAULT · full sweep--grad-sig · CTAs, pills, badges, decorative surfaces

#FF5733 · 0–7%#ED1C24 · 40%#B30E14 · 72%#7A0712 · 93–100%

C · TIGHT · compressed red--grad-sig-tight · h2 em, h3 em, sub-headline emphasis

#ED1C24 · 0–12%#B30E14 · 60%#7A0712 · 88–100%

Graphite · STANDARD--grad-graphite · achromatic, light → dark

#DCD8D2 · 0–7%#B5B0A8 · 35%#7A7670 · 70%#4A4845 · 93–100%

Graphite · SHINE--grad-graphite-shine · brushed metal specular

#7A7670 · 0–7%#B5B0A8 · 30%#DCD8D2 · 60%#7A7670 · 85%#4A4845 · 93–100%

Horizon glow--grad-horizon · radial, bottom-center

Depth (dark-on-dark)--grad-depth-strong · for nested cards inside dark stages

When to use which gradient

The signature gradient is the brand's heart. The other three are for restraint — when the brand should fade out so content can lead.

SIGNATURE · TIER A (HERO)

--grad-sig-hero · specular peak @ 67%

Every h1 em + .display em (auto-applied by the global rule).

Animated border shine (C10 container).

Brand-mark glyphs: hub-core, orbital core, glass cube.

On h2 / h3 emphasis — the mid-word peak disrupts reading at smaller sizes.

SIGNATURE · TIER B (DEFAULT)

--grad-sig · full sweep

Decorative surfaces — primary CTAs, pills, badges, checkmarks.

MOST POPULAR labels, BEST badges, hover halos.

Anywhere the gradient IS the surface, not the text fill.

Section backgrounds at full bleed. Too loud.

SIGNATURE · TIER C (TIGHT)

--grad-sig-tight · readable compressed

Every h2 em + h3 em (auto-applied by the global rule).

Sub-headline emphasis, card titles, mid-page beats.

On h1 — too quiet for the dramatic hero moment.

On CTAs — too narrow a range to read as a surface accent.

HORIZON GLOW

Atmospheric lighting

Bottom-up radial glow inside dark stages — feels like a sunrise.

Hero, hub-and-spoke, stats moment, empathy section.

Top-center halos — that's a 2018 pattern. We light from below.

GRAPHITE (achromatic)

When the brand recedes

Sections that need to be present but quiet — pricing fine print, FAQ overflow, footer body, secondary cards.

Achromatic register sections that want texture but no color.

As a primary CTA or brand mark — gray-on-gray reads as "draft."

DEPTH (dark-on-dark)

Nested surfaces

Cards sitting inside a dark stage that need subtle elevation without color.

Sankey-style flow charts, glass panels, depth cards.

On a cream background — the depth disappears entirely.

02 · TYPOGRAPHY

Three fonts, three roles

Greycliff CF is the core voice. Neo Contact is reserved for the logo wordmark. DM Serif Display italic exists only as the gradient-filled emphasis accent inside headings.

The three fonts

Abundance

FAMILYNeo Contact LT Pro

TOKEN--font-logo

USE FORLogo wordmark only. Never headings, body, or UI.

Most founders are running a junk drawer.

FAMILYGreycliff CF (Typekit · bxi7koh)

TOKEN--font-sans

USE FOREvery h1/h2/h3, body copy, pills, buttons, UI labels. The brand's main voice. Headlines use weight 800.

in stable orbit.

FAMILYDM Serif Display Italic

TOKEN--font-display

USE FOR<em> emphasis inside headings only. Always with the gradient text fill. Never as a standalone block of copy.

Type ramp

Seven sizes, no exceptions. Floor is --t-micro at 13px — never go smaller.

--t-hero56–112pxHero

--t-h144–80pxSection h1

--t-h236–56pxSection h2

--t-h320–26pxCard title

--t-body17pxBody paragraph copy with comfortable reading rhythm.

--t-small15pxSecondary body, meta text, captions.

--t-micro13px · FLOOREYEBROW & TAGS

Headline alignment · left vs centered

Alignment is a content classifier, not a preference. Left-aligned = feature/teaching mode (paired with paragraph). Centered = announcement/bookend mode (single statement).

LEFT

THE SELLING SYSTEM

We build your funnels so you can just sell.

Use when: the headline is paired with a paragraph or body block (asymmetric header pair). Most explanatory and feature sections.

Don't: use for stats moments or single-statement bookends.

CENTERED

THE NUMBERS

Receipts, not promises.

Use when: announcement moments — stats, declarations, final CTA, breath sections (FAQ, achromatic, beliefs). Singular statement, no paired body.

Don't: center a headline that has a long supporting paragraph next to it.

Headline patterns

Six repeatable patterns. Don't invent a seventh — pick the one that fits.

PATTERN A

ASYMMETRIC PAIR

Stop adding tactics. Install the system.

Sans-bold black, with a serif-italic gradient phrase as punctuation. The most common pattern.

PATTERN B

DOT PERIOD

Why most founders never escape the revenue ceiling

Headline ending in a glowing tiger's-blood dot. Use once per page as a signature brand mark.

PATTERN C

INLINE KEYWORD PILLS · 6 STATES + MODIFIERS

We build your Ads Funnels CRM & Copy

Like an Engine System for Founders at Scale

.filled = red gradient surface, cream text (loudest). .glow = gradient border + faded red interior glow + warm-cream text (mid). (no class) = red gradient border, dark interior, red text (quietest). .solid = cream fill, red gradient border, red text. .cream = cream fill, hairline, red text. .ink = cream fill, hairline, BLACK text. Modifiers: .silver swaps red for graphite-shine (prestige), .label = 20px-radius uppercase stamp, wrap text in <span class="text-grad"> for red gradient text fill on any cream variant (Engine, above).

PATTERN D

STEP 3 OF 6 ·

Measure your impact.

Numbered step label above headline (different weight, same family). Use for sequenced sections.

PATTERN E

CENTERED ANNOUNCEMENT

Receipts, not promises.

Centered, single line, no body. Use for stats moments, declarations, and bookend sections.

PATTERN F

GRADIENT BLOCK EMPHASIS

Stop adding tactics. Install the system.

Use when: the emphasis needs to feel like a STAMP or BADGE — louder than serif italic, more rectangular than a pill. 20px radius matches --r-card. Reserve for power phrases that should physically stop the eye.

Three gradient tiers on the same headline

Same words, three different gradient distributions — each tied to a different typographic role. The em rule below is now automatic: h1 gets HERO, h2/h3 get TIGHT, and the DEFAULT sweep is reserved for decorative surfaces (CTAs, pills, badges).

TIER A · HERO

h1 · auto · --grad-sig-hero

We do transformation.

Specular peak @ 67%. The em shimmers mid-word like polished metal. Reserved for h1 + .display.

TIER C · TIGHT

h2 / h3 · auto · --grad-sig-tight

We do transformation.

Compressed red range. No salmon highlight, no deep blood tail. Stays in the readable middle. For h2/h3 ems.

TIER B · DEFAULT

surfaces · --grad-sig

Full sweep, salmon → deep red. For SURFACES, not text: CTAs, pills, badges, checkmarks, BEST/POPULAR labels.

Why three tiers: the eye reads h1 once, big and slow — it can handle a dramatic specular shimmer. Sub-headers (h2/h3) get read in flow with body — they need a tighter, more uniform gradient so the eye doesn't stutter on each em. CTAs aren't text-fill at all — they're surfaces, so they get the widest decorative sweep.

03 · SECTIONS

Twenty-six archetypes

When building a new page, pick from these. Each has a defined role in the narrative arc. Don't invent a twenty-seventh.

Hero

.hero

Cursor-tied light field, chat input as primary affordance, inline keyword headline, corner price pill. Page-opener.

Empathy

.empathy

3 stacked "What if…" pain questions on a dark stage. Sets the problem before showing the solution.

Hub & Spoke

.hub-wrap

Central glass cube with 6 orbital pills, curved dashed connection lines. "We replace these 6 hires."

BEFORE

AFTER

Thesis (Before/After)

.thesis-grid

Tumbling chaos pills vs. counter-rotating orbital diagram. The argument expressed as motion.

•

Beliefs 2x2

.beliefs-grid

4-cell quadrant of principles. One cell uses the pattern-break (dot-matrix sphere) for variety.

Wrong

Right

Ladder (Wrong/Right)

.ladder-grid

Paired cards with a dashed central spine + glowing node. Maps problems to corrections.

Editorial (Dot Period)

.editorial

Big sans-bold headline ending in a tiger's-blood dot. The brand's editorial breath moment.

Process (4-step)

.process-grid

Each step uses a DIFFERENT visual medium (table / toast / video / chart). No card-pattern repetition.

14d

$200M

1·6

Stats Moment

.stats-wrap

Big hero-scale numbers, gradient-italic em on the unit. Dark stage with horizon glow.

Signals (Live Feed)

.signals-grid

Metric tiles with delta-pill badges + sparklines. Only the most important sparkline is colored.

Compare Table

.compare-table

DIY vs Other Agency vs Abundance side-by-side. The "us" column has a "BEST" gradient pill.

Social Proof

.proof-card

Big sans-bold quote with gradient-italic em, headshot cluster underneath, logo strip at the bottom — all in one rounded cream stage.

How is this different from an agency?

What do you need from me?

What if my offer isn't ready?

FAQ Accordion

.faq

Achromatic dark "breath" stage. Plus/cross expander animates to gradient on open.

Achromatic Patterns

.achro-grid

No color, all texture. The "brand recedes" moment using dot & line grids.

Launch

Install

Shift

Scale

Pricing (4 tiers)

.pricing-grid

4 tiers, one marked .featured with MOST POPULAR pill. Cursor-tracking glow at the bottom.

Final CTA

.cta-mega

Outline pill with embedded gradient circle-arrow. Use once per page, at the close.

Footer

.foot

Top-rounded full-bleed dark stage. Email address rendered at h2 scale with gradient italic em on "findabundance."

We build your Ads CRM & Copy

Declaration

.declaration

Inline keyword pills inside the headline. "We build your X, Y & Z." A bold statement-of-capability moment.

PellowBrightlineHalcyonInkwellVerdant

Logo Bar

.logo-bar

Horizontal strip of grayscale client/partner logos in DM Serif Display. "As seen in" / "Trusted by." Quiet trust signal.

Built for founders.

Two-Column Feature

.two-col

Text left, UI mockup or product photo right. The classic feature-detail layout. Pairs with asymmetric header pattern.

VSL · Video Section

.vsl

Big play button on a dark stage with horizon glow. Embedded Vidalytics / Wistia VSL. The mid-funnel commitment moment.

Quote Spotlight

.quote-spot

A single testimonial taking the whole section. Big sans-bold quote with gradient-italic em, small attribution. "One customer's story" beat.

Newsletter / Lead Magnet

.newsletter

Pill input + gradient subscribe button. For inline lead capture inside a content article or footer band.

CTA Banner

.cta-banner

Narrow centered band with headline + gradient pill button. The mid-page conversion nudge. Lighter than the Final CTA.

Real-time tracking

Feature Tile

.feat-tile

Icon-chip + label in a square card. Use in 3- or 4-column grids when each feature gets the same compact treatment.

Guarantee · Risk Reversal

.guarantee-card

Shield badge + bold headline + multi-paragraph body inside a C12 outer-glow halo card. The "try-it-with-zero-risk" beat, late on the page near pricing.

04 · COMPONENTS

The primitives

Reusable atoms. Compose sections from these. Never style a button or pill from scratch — extend or copy from here.

Pills · 3 scales

Class: .pill · fill variants: .filled, .filled-soft, .on-dark

DefaultEYEBROW LABEL

Filled (gradient)MOST POPULAR

Filled softTHE SELLING SYSTEM

On darkFOUR PRINCIPLES

Flat accent · solid tiger's blood for body emphasis

Class: .flat-accent · variants: .flat-accent.deep, .flat-accent.anchor. Use inside paragraphs when a word should pop in tiger's blood without becoming a full gradient-italic <em> moment. Keeps the brand color present without painting another gradient on the page.

In paragraphWe replace your copywriter, your media buyer, and your CRM admin with one team.

Deep variantAnchor moment

When to useBody copy with three or more inline emphases (a gradient em on each would compete). Stat callouts inside paragraphs. Inline keyword highlights that aren't a full headline moment.

Underline callouts · 5 variants + marker

Class: .uline · variants: .uline.white, .uline.grad, .uline.silver, .uline.marker (+ .marker.silver / .marker.white). A softer emphasis than a pill — just a line beneath the keyword. Use sparingly in body copy, or in headlines when a pill would be too loud.

Flat redWe build your funnel.

Flat whiteBuilt for founders.

Red gradientFrom zero to scale.

Silver gradientThe prestige tier.

Marker (red)Hand-drawn emphasis.

Marker (silver)Quietly underlined.

In bodyMix-and-match — we install copy, funnels, systems, and scale that compound over time.

When to useWhen a pill would steal too much attention. Underlines whisper instead of shout. Flat red is the workhorse · gradient variants are "this is the thing" moments · marker reads as personal/hand-made and is perfect for one keyword per page (use it the way you'd use the dot-period — once).

Containers · 12 styles

Every card, panel, or boxed element uses one of these. C1 is the workhorse (90% of cards). Featured tiers get C6. The loud gradient fill C8 is rare — final-CTA territory only. The animated borders (C10/C11) and outer-halo (C12) are the "this is the thing" moments.

C1 · Hairline

Subtle bordered surface. The default workhorse — 90% of cards on a page.

.cont.c1

C2 · Borderless

Slight surface lift, no visible border. For cards that sit on a contrasting surface already.

.cont.c2

C3 · Gradient border

Signature gradient stroke around a dark surface. Use sparingly — for "this is the one."

.cont.c3

C4 · Depth gradient

Dark-on-dark gradient bg. Adds elevation without color. Use for cards inside dark stages that need depth.

.cont.c4

C5 · Fade-to-nothing

Surface fades into the stage at the bottom. Implies "this continues." Good for stat tiles, signal cards.

.cont.c5

C6 · Featured halo

Tinted red bg + gradient-stroke border + red box-shadow halo. The MOST POPULAR pricing tier treatment.

.cont.c6

C7 · Frosted glass

Semi-transparent surface with backdrop blur + top inset highlight. Use for floating nav, modal overlays.

.cont.c7

C8 · Gradient fill

The full signature gradient as the surface. Loudest container — reserve for final CTAs and brand mark moments.

.cont.c8

C9 · Dot vignette

Dot pattern at the edges fading into a clean center. Reads as "depth + texture" without competing with the headline that sits in the middle.

.cont.c9

C10 · Animated red glow border

Tiger's-blood arc circles the perimeter, animated via @property + conic-gradient. Use for "ALIVE" moments — featured tiers, primary offer cards.

.cont.c10

C11 · Animated silver shine

Same rotating-arc mechanic with a silver shine. Prestige variant — premium tier, anniversary moments, awards.

.cont.c11

C12 · Outer glow halo

Soft red halo emanating AROUND the card onto the surrounding stage. Use for guarantee badges, hero objects, "this card is the thing."

.cont.c12

Buttons / CTAs

Classes: .btn + .ghost / .dark / .gradient / .outline-pill

Ghost

Dark

Gradient

Outline pill (mega)

Avatars & headshot cluster

Class: .av · cluster: .av-cluster · variants: .large, .achro

Single (gradient)

Large

Achromatic

Cluster

Toast notifications

Class: .toast · use for activity feeds, demo overlays on lifestyle photos

Abundance 9:41 AM

New booked call · Sarah J. confirmed Thursday 2pm.

Stripe now

Payment received · $5,000.00 USD from Dev O.

Sparklines & metric tiles

Class: .spark-card · only the most important sparkline gets .hot (tiger's blood) — the rest stay achromatic.

CPL

$18

SHOW RATE

78%

38%

Delta badges

Class: .delta-badge · inline next to a big number for week-over-week change

Inline42 ▲ 35%

Glass cube · hero object

Class: .glass-cube · the brand's "physical object" — used as the hub-and-spoke center

Pattern fills · the "brand recedes" texture

Classes: .pf.dot-24, .pf.dot-14, .pf.grid-48, .pf.grid-24

05 · MOTION

Page acknowledges you

Modern landing pages aren't posters — they're environments. Every Abundance page is alive in at least three ways: cursor light, ambient drift, and at least one scroll-tied transformation.

Cursor-tied light field

A tiger's-blood radial glow that follows the visitor's cursor. Use on hero only.

Ambient blob drift

Slow-drifting blurred color blobs in the background. Adds atmosphere without distraction.

Counter-rotating orbit

Ring rotates; labels counter-rotate to stay upright. Used in the orbital After card.

Copywriter

CRM broken

Ad late

Tumbling chaos

Tilted pills with gentle drift + rotation. The "Before" thesis card. Always continuous, never one-shot.

Pulse glow

Brand mark (orbital core, hub-core, status dot) pulses softly. Implies "alive / running."

Apply now

Gradient slide on hover

CTA backgrounds are 200% wide and slide their gradient position 0%→100% on hover.

Starfield drift

Sparse white particles slowly translating diagonally. Used inside dark stages for atmospheric depth.

06 · CONTENT

Carousels, video, posts

The brand extends beyond the website. Every Instagram carousel slide, every YouTube thumbnail, every LinkedIn post should look like it came off this page.

Instagram & LinkedIn carousels

4:5 portrait, on matte black. First slide hooks. Middle slides deliver. Last slide CTAs.

SLIDE 1 · HOOK

Most founders are running a junk drawer

@findabundance · swipe →

Hook slide

Sans-bold + serif italic + gradient · drop the eyebrow, drop the hook.

5–11x

REVENUE LIFT IN 12 WEEKS

Stat slide

Hero-scale number, em on the unit, label underneath. The "money slide."

SLIDE 3 · FRAMEWORK

Launch. Ads live in 14 days.

Install. Full CRM + tracking.

Shift. Coaching kicks in.

Scale. Compound the system.

Framework slide

Vertical list with tiger's-blood left rule. Bold lead, body explanation.

READY TO APPLY?

Six hires worth of work. One team.

CTA slide

Final slide of every carousel. Pill, headline, gradient button.

"In 90 days Abundance closed 3× the deals I did all of last year."

Sarah Hendrickson · Coaching Collective

Quote slide

Single testimonial taking the whole canvas. Big sans-bold quote, small avatar + attribution.

BEFORE

$30k/mo

AFTER

$140k/mo

Before / After slide

Stacked split showing the transformation. After number uses gradient italic for impact.

She fired her agency on day 14.

Six months later: 11x revenue, zero copywriters on payroll, founder still sleeps at night.

Story slide

Big italic gradient numeral + headline + body. Use in carousels that walk through a narrative.

What if six months from now,
it's already running?

Question slide

Single intrigue question with gradient-italic em. The "stop scrolling" hook slide.

11x

REVENUE IN 12 WEEKS

Big number slide

Full-bleed single number, uppercase label below. Stops scrolls. Use as slide 1 or slide N for maximum punch.

12:04

Loom thumbnail

Webcam circle bottom-right, duration top-left, centered play icon. For async video shares and case-study walkthroughs.

Video poster frames

9:16 vertical (Reels/TikTok) or 16:9 (YouTube). Big caption, time-tag, gradient play button.

2:47

How we replaced six hires

Reel · 9:16

Caption + play button + time tag. Caption follows the same gradient em pattern.

12:04

The Selling System, installed

YouTube · 16:9

Same vocabulary, wider canvas. Caption shifts to bottom-left.

CASE STUDY

From $30k/mo to $140k/mo
in 90 days.

Sarah Hendrickson
Coaching Collective

Case study card

Before → After numbers, founder attribution. Drop in feed or email.

07 · RULES

The discipline

Every brand fails the same way — by exception. These rules don't bend. If a rule is bending, it's not an exception — it's a redesign.

RULE 01

One accent only.

Tiger's blood (and its gradient family) — used everywhere an accent is needed.

Adding a second hue family (blue, green, purple) for "variety."

RULE 02

Gradient on every em.

Every <em> inside a heading uses the 4-stop tiger's-blood gradient text fill.

Flat tiger's-blood color on em. Italic without color.

RULE 03

Neo Contact = logo only.

Reserve --font-logo for the "Abundance" wordmark. Nothing else.

Neo Contact in headings, body, captions, anywhere but the wordmark.

RULE 04

95% achromatic, 5% splash.

Every card is mostly gray-on-dark. Tiger's blood appears once per card — on the check, the badge, the publish button.

Tiger's blood on every element. Color noise drowns the brand.

RULE 05

Per-column visual media variety.

In a multi-column section, each column gets a DIFFERENT visual medium (table / toast feed / video / chart).

Same card pattern × 3 — even with different content, it reads as repetition.

RULE 06

Sans-bold + serif-italic = only emphasis pattern.

Headlines are Greycliff CF 800. The emphasis phrase inside is DM Serif Display italic with gradient text fill.

All-italic headlines. All-serif headlines. Underlines or color-only emphasis.

RULE 07

One dot-period per page.

The tiger's-blood dot replacing a final period is a signature mark — use it ONCE on a landing page.

Dot-period on every headline. Loses its weight when overused.

RULE 08

Sections are rounded stages.

Every section has border-radius. Light cream page hosts dark rounded stages; dark page hosts light rounded stages. Section transitions are scoops, not slabs.

Hard-edge full-bleed sections sitting on hard-edge full-bleed sections.

RULE 09

The page is alive.

Cursor-tied light on hero, ambient drift in atmospheres, pulse on brand marks, gradient slide on CTA hover. Always at least three motion behaviors.

Static pages. Reveal-on-scroll as the only motion.

RULE 10

If it's not on this page, it doesn't belong on a page.

When tempted to invent a new section, component, or color — first check this brand library. Reuse beats invent.

Bespoke one-offs that fragment the system across funnels.

RULE 11

Font-size floor is 13px.

Smallest type on any surface is 13px (--t-micro). Labels, tags, deltas, captions — all 13px or above.

11px and 12px text "to fit more in." If it doesn't fit at 13px, the content is too dense — cut it.

RULE 12

Gradient before flat color.

For any accent surface (badge, button, checkmark, brand mark) — reach for --grad-sig first. Flat --sig is only for small text labels and SVG strokes.

Solid red blocks everywhere. The gradient is what makes the brand feel premium; flat fill makes it feel cheap.

RULE 13

The brand-mark "A" is Neo Contact, upright.

Anywhere the Abundance monogram "A" appears as a graphic (glass cube, hub-and-spoke center, methodology core, brand tile), render it in --font-logo (Neo Contact LT Pro) with font-style: normal. The monogram is part of the wordmark family.

DM Serif Display italic on the brand "A." Italic warps the letterform and breaks the wordmark connection. A/B/C/F step-labels and content-letters in headlines stay italic — the rule applies only to the brand monogram.

Brand System · v1.9 · May 17, 2026. Locked after the v5/v7/v8/v9 exploration cycle and the v1.8 nav + glass pass. v1.9 added Rule 13 (brand-mark "A" Neo Contact upright), fire-red palette saturation pass (#FF5733 / #ED1C24 / #B30E14 / #7A0712), bullet-proof gradient text-clip across every em, and the dark-mode-locked policy for marketing pages. Maintained at /brand as the single source of truth.