Official Document · Brand & Graphic Standards
AppliqueJoe
Brand Vault
Brand Vault
The definitive reference for all AppliqueJoe visual decisions. Colors, typography, logo usage, spacing, motion, and dual-mode guidelines. This document is the source of truth.
Round logo — both desktop and mobile.
Favicons, headers, social avatars, merchandise,
anywhere a square or circular mark is needed.
Works at any size from 32px up.
Horizontal lockup — mobile headers and wide contexts.
Mobile navigation bars, social cover images,
email headers, lower thirds, banners,
and any landscape format where the full wordmark should appear.
01
The Brand Mark
Four logo files make up the complete AppliqueJoe mark system: the round logo in two modes, and the horizontal lockup in two modes. All share the same DNA — skull, needle, lime rope, PMS 375 C.
The One Logo Rule — Which SVG to Use
Dark or black background → logo-dark.svg (transparent, white skull on dark)
Any color background — lime, white, light gray, anything else → logo-light.svg (black outline defines the shape against the field)
The black outline in logo-light.svg exists for exactly this reason. Never place logo-dark.svg on a colored or light background — without the outline, the logo has no edge.
Any color background — lime, white, light gray, anything else → logo-light.svg (black outline defines the shape against the field)
The black outline in logo-light.svg exists for exactly this reason. Never place logo-dark.svg on a colored or light background — without the outline, the logo has no edge.
Approved Usage
SVG Masters — Priority Request
Request SVG files from your logo designer as a priority. SVG (Scalable Vector Graphic) format means the logo renders perfectly at any size — from a 16px favicon to an 8-foot banner — from the same single file. With SVG you also get CSS control over individual elements (changing the lime rope color, for instance, to match future brand variants). The current PNGs are production-quality but not future-proof. Target deliverables:
appliquejoe-logo-round.svg and appliquejoe-logo-sticker.svg with transparent backgrounds.Horizontal Lockup
The horizontal lockup pairs the round logo mark with the wordmark and tagline. Used for headers, social cover images, lower-thirds, banners, and any context requiring the full brand name. Two variants — same dark/light logic as the round logo.
Rule — Wordmark on White is Always Cool Gray 8C
Whenever "APPLIQUE JOE" appears on a white or light background, the wordmark color is always Cool Gray 8C (#888B8D / PMS Cool Gray 8 C). Never rich black. No exceptions. Pure black on white creates excessive contrast that fatigues the eye. Cool Gray 8C reads as authoritative without punishing anyone who prefers a light screen. The cobalt tagline and lime separator carry the brand energy — the wordmark stays measured.
Horizontal Lockup — Color Components
APPLIQUE JOE
White Wordmark
#FFFFFF · Dark mode only
On dark backgrounds
APPLIQUE JOE
Cool Gray 8C
#888B8D · PMS Cool Gray 8 C
Light mode wordmark only
Lime Separator
#97D700 · PMS 375 C
Both modes
Cobalt Tagline
#1B4FCA · elemental
Both modes
Clear Space & Minimum Size
Always maintain clear space around the logo equal to the radius of the circular rope element. Minimum display size: 32px diameter for the Round Logo, 48px for the Sticker variant. Below these sizes, substitute a skull-only favicon treatment.
02
Color System
Three tiers, three roles. Every color earns its place or it doesn't exist.
PMS 375 C
Alchemist Lime
#97D700
CTAs · active states
PRIMARY
Raw Cobalt
#1B4FCA
Context · info · Bench
Deep Black
#0A0A0A
Primary background
Light Gray
#E2E8F0
Body text · nav
Medium Gray
#94A3B8
Labels · subtext
Cobalt Light
#93C5FD
Dark mode · cobalt text
Color Role Rules
Lime = Click
Lime (#97D700) is reserved exclusively for interactive elements. Buttons, CTAs, active states, clicked tabs. If something is lime and the user cannot interact with it, it is wrong. No exceptions. This is the single most important rule in the system.
Cobalt = Context
Cobalt is reserved for context and information — eyebrow labels, callout blocks, The Bench identity, category tags, secondary buttons. Two values: #1B4FCA (full cobalt — use on light backgrounds) and #93C5FD (cobalt light — use on dark backgrounds). Cobalt never appears on a primary purchase button.
Dark Only
The primary platform is dark mode throughout. No white backgrounds on the main platform. Light mode is an optional secondary experience, not the default. When in doubt — go dark.
Dark Mode vs Light Mode Tokens
◼ Dark Mode — Primary
--bgPage background#0A0A0A
--bg2Cards, panels#111111
--bg3Nested elements#1A1A1A
--t1Body text#E2E8F0
--t2Secondary text#94A3B8
--limeCTA buttons#97D700
--cobalt-txtCobalt labels#93C5FD
◻ Light Mode — Secondary
--bgPage background#F7F8FA
--bg2Cards, panels#FFFFFF
--bg3Nested elements#EDEEF1
--t1Body text#111111
--t2Secondary text#4A5568
--limeCTA buttons (unchanged)#97D700
--cobalt-txtCobalt labels#1B4FCA
03
Typography
Three fonts. Three jobs. Each chosen to communicate a specific dimension of the AppliqueJoe identity.
ENGINEERING
The Library
Enroll Now →
$297
33 years of commercial-grade appliqué. The exact blueprint used to produce vintage programs for A&F, NBA, and NFL.
You don't need a million-dollar facility to get a premium result. You just need the courage to break a few outdated rules and the discipline to follow the right recipe.
Heritage 2-Layer Appliqué · The Insurance Pitch
v3.1 · Active
or 4 × $79 via Stripe · 7-day grace period
04
Dark & Light Mode
Dark mode is the primary, defining AppliqueJoe experience. Light mode is a supported secondary option. The toggle in the upper right of this document demonstrates the switch.
◼ Dark Mode — Primary
Heritage · 2-Layer Appliqué
Stop Ruining
Premium Hoodies
Premium Hoodies
33 years of commercial-grade appliqué. One platform.
Enroll Now →
Module 01
The Needle Protocol
◻ Light Mode — Secondary
Heritage · 2-Layer Appliqué
Stop Ruining
Premium Hoodies
Premium Hoodies
33 years of commercial-grade appliqué. One platform.
Enroll Now →
Module 01
The Needle Protocol
Logo Behavior Across Modes
Brand Mark in Both Modes
Dark mode — native
Light mode — skull on lime · logo-light.svg
Light Mode Logo — Official Standard
In light mode, the logo container is Alchemist Lime (#97D700). Use
logo-light.svg — the black outline defines the logo shape against the lime field. This is the definitive light-mode brand mark treatment.
05
Design Principles
The Eye Path
Every hero section of the platform follows this sequence. It is non-negotiable.
01
→
Heritage 2-Layer Appliqué
Cobalt eyebrow — context
02
→
Stop Ruining Hoodies
White headline — the hook
03
→
Enroll Now →
Lime button — the action
The Non-Negotiables
1px borders
1px solid borders only. No box-shadows. No drop-shadows. No gradients on surfaces. Depth comes from layered dark backgrounds and borders. If you're tempted to add a shadow, add a border instead.
Mono = data
JetBrains Mono for all numerical and categorical data. Prices, specs, module numbers, version tags, eyebrow labels. This consistency is what makes the platform read as a precision instrument.
Space breathes
Generous spacing is a feature, not waste. Panel padding: 52px. Section gaps: 56px. Step padding: 18px × 22px. On narrow screens, reduce padding proportionally but never eliminate it.
Uppercase
Chakra Petch headings are always uppercase. Body copy is never uppercase. Uppercase in body text reads as shouting. In Chakra Petch display type it reads as authority. Know the difference.
Gray wordmark
"APPLIQUE JOE" on any white or light background is always Cool Gray 8C (#888B8D). Never rich black on white. The cobalt tagline and lime separator provide the brand energy — the wordmark doesn't need to shout.
What Never Happens
✕ White backgrounds on the platform
Dark mode is the primary experience. White surfaces break the dark-mode contract.
✕ Lime on non-interactive elements
Lime decorating a headline dilutes the CTA signal. Lime = click. Always.
✕ Box shadows or drop shadows
This system uses borders and background layers for depth. Shadows are soft and analog — we are surgical and digital.
✕ Two motion elements visible simultaneously
One motion in view at a time. The second only appears after the first has scrolled out of view.
✕ Animating the enroll button
The lime CTA is already the loudest element. Motion would cheapen it. Stillness = trust.
✕ Stretching or recoloring the logo
The logo proportions and colors are fixed. PMS 375 C lime and white on black. No alternate colors.
10
Motion Doctrine
Less is more — but paint the picture. Motion earns its place or it doesn't exist.
Max 2 per page
Maximum two motion moments per page. The second may only appear after the first has scrolled completely out of the viewport. Never two moving elements visible simultaneously.
Earn your place
Before adding motion, ask: does this help the audience feel the vibe, or is it showing off? The macro gallery earns its ambient drift. A spinning logo earns nothing.
Trust = stillness
Anything the user reads to make a financial decision stays perfectly still. Prices, body copy, the enroll button, testimonials, the safety cluster — zero motion. Trust requires stillness.
07
Emphasis Block System
The callout and eyebrow components are the platform's visual language for surfacing what matters. Both use the same transparency formula — a low-opacity color fill with a higher-opacity border of the same hue. The result reads as premium and intentional rather than flat.
The Two Callout Variants
Cobalt — Context / Insight
.callout.info
SVG Masters — Priority Request
Request SVG files from your logo designer as a priority. SVG format means the logo renders perfectly at any size — from a 16px favicon to an 8-foot banner — from the same single file.
The Formula
backgroundrgba(27,79,202, 0.12)
border1px solid rgba(27,79,202, 0.40)
title color#93C5FD (cobalt-txt)
body colorvar(--t1) — standard body
use forContext · insight · informational notes · architecture explanations
Lime — Rule / Non-Negotiable
.callout.lime
The One Logo Rule
Dark background → logo-dark.svg. Any color or light background → logo-light.svg. The black outline in logo-light.svg exists for exactly this reason.
The Formula
backgroundrgba(151,215,0, 0.09)
border1px solid rgba(151,215,0, 0.28)
title color#97D700 (lime)
body colorvar(--t1) — standard body
use forHard rules · non-negotiables · design laws · action directives
Why Transparency — Not Solid Color
A solid cobalt or lime background would compete with the content and override the eye path. The transparency formula keeps the callout visually distinct — the tinted field is clearly "different from body copy" — without shouting. The border carries the full color weight; the background barely whispers it. This is the same principle as our 1px border system: precision over noise.
Eyebrow Labels — The Same Logic, Smaller
The cobalt eyebrow above every hero headline uses the same transparency treatment at micro scale — a small cobalt-tinted pill or plain uppercase label that sets context before the headline lands. It is always JetBrains Mono, always uppercase, always cobalt.
Eyebrow — Pill Style
In context
Heritage · 2-Layer Appliqué
Stop Ruining
Premium Hoodies
Premium Hoodies
Pill Eyebrow Formula
fontJetBrains Mono · 11px
trackingletter-spacing: 0.14em
color#93C5FD
backgroundrgba(27,79,202, 0.12)
border1px solid rgba(27,79,202, 0.40)
border-radius3px
padding4px 12px
Eyebrow — Plain Style
In context
Official Document · Brand Standards
AppliqueJoe
Brand Vault
Brand Vault
Plain Eyebrow Formula
fontJetBrains Mono · 11px
trackingletter-spacing: 0.14em
color#93C5FD only
backgroundnone — plain text
use forSection headers, document labels, simpler contexts
When to Use Which
Cobalt callout — explaining context, sharing an insight, architecture notes, "why this decision was made." Reader needs to understand something.
Lime callout — a rule, a non-negotiable, a law of the system. Reader needs to follow something.
Pill eyebrow — the label before a hero headline. Always cobalt. Sets the category before the hook lands.
Plain eyebrow — document labels, section identifiers, simpler contexts where the pill would feel too heavy.
Lime callout — a rule, a non-negotiable, a law of the system. Reader needs to follow something.
Pill eyebrow — the label before a hero headline. Always cobalt. Sets the category before the hook lands.
Plain eyebrow — document labels, section identifiers, simpler contexts where the pill would feel too heavy.
08
Button System
Three buttons. Three jobs. The same color logic that governs the whole system — lime means purchase, cobalt means navigation, accessory means category.
Live Examples
All three buttons — in context
Heritage Blueprint · $297
Lime = purchase · Cobalt ghost = navigation · Accessory pill = category/eyebrow
Primary — Lime
.btn.btn-primary
Specification
background#97D700
color#0A0A0A (deep black)
fontChakra Petch 700 · 13px · 0.07em
padding10px 22px
radiusvar(--r-btn) — 4px
hoverbg lighten · translateY(-1px)
use forEnroll · Purchase · Checkout only
Lime = Purchase
The primary button is reserved exclusively for actions that move money — enroll, purchase, checkout. Never use it for navigation or information links.
Secondary — Cobalt Ghost
.btn.btn-secondary
Specification
backgroundrgba(27,79,202, 0.12)
border1px solid rgba(27,79,202, 0.40)
colorvar(--cobalt-txt)
fontChakra Petch 700 · 13px · 0.07em
padding10px 22px
radiusvar(--r-btn) — 4px
use forMore info · Book · Navigate · Learn more
Cobalt = Navigate
Secondary buttons go where there's no purchase involved — more info, book a consult, explore the catalog. The cobalt ghost never competes with lime.
Accessory — Eyebrow Pill Button
.btn-accessory
Specification
fontJetBrains Mono 400 · 11px · 0.14em tracking
backgroundrgba(27,79,202, 0.10)
border1px solid rgba(27,79,202, 0.38)
colorvar(--cobalt-txt)
padding6px 14px
radiusvar(--r-btn) — 4px
dot5px cobalt circle · opacity 0.6
use forCategory labels · course tags · section filters · clickable eyebrows
09
Corner Radius System
Six values. Locked. Every corner on the platform maps to one of these — no ad-hoc radius values. The scale runs from sharp (interactive elements, tags) to generous (containers, hero elements) to full-pill (toggles, meta tags). Consistency across this scale is what makes the design feel like a single deliberate system rather than a collection of choices.
Rounded Corners — The Decision
The brand uses rounded corners throughout, not chamfers (45° cuts). Rounded corners are more universally rendered in CSS and SVG without workarounds. The radius scale is tight at the interactive level (4px — barely there) and opens up for containers (10–14px). The goal is not softness — it's precision. Even a 4px radius on a button reads as intentional rather than sharp-by-default.
--r-tag · 3px
var(--r-tag)
Inline tags · code snippets · badge labels · tiny status pills
--r-btn · 4px
var(--r-btn)
ALL buttons — primary, secondary, accessory. Every button. No exceptions.
--r-sm · 8px
var(--r-sm)
Small cards · formula boxes · component insets · token rows
--r-md · 10px
var(--r-md)
Main content cards · callout blocks · component demos · type specimens
--r-lg · 14px
var(--r-lg)
Logo containers · hero elements · large feature cards
--r-pill · 100px
var(--r-pill)
Toggle switch · hero meta tags · progress indicators
The One Rule — Use the Tokens
Never hardcode a border-radius value. Always use the CSS variable from the scale above. If something doesn't map cleanly to one of the six values, use the nearest one. This keeps every corner in the system visually consistent and makes future brand updates a single token change.
Quick Reference
Colors
#97D700 (PMS 375 C) — Lime, CTAs only
#1B4FCA — Cobalt, context only
#0A0A0A — Deep Black, all backgrounds
#E2E8F0 — Light Gray, body text
#94A3B8 — Medium Gray, labels
Typography
Chakra Petch 700 — Display, uppercase
DM Sans 400/500 — Body, sentence case
JetBrains Mono — All data and labels
Rules
Lime = click. Cobalt = context.
1px borders only. No shadows.
Callout cobalt — context & insight
Callout lime — rules & non-negotiables
Eyebrow — JetBrains Mono · cobalt · 11px
Headings uppercase. Body never uppercase.
Dark mode primary. Light mode secondary.
One motion in view at a time.
Enroll button never animates.
Eye Path (Every Hero)
Cobalt eyebrow → White headline → Lime button
Logo
Round dark: logo-dark.svg on #0A0A0A
Round light: logo-light.svg on #97D700 (lime)
Horizontal dark: logo-horizontal-dark.svg
Horizontal light: logo-horizontal-light.svg
Wordmark on white: always Cool Gray 8C (#888B8D)
Wordmark on dark: always white (#FFFFFF)
Never stretch. Always SVG.