Brand system v2.0
The MyApexConnect system.
Every token below ships as a CSS variable in styles.css under Tailwind v4 @theme. If a value is not in this document, it does not belong in the product.
01
Color tokens
--color-primary
#5433E8 · Apex Violet. Links, focus rings, brand moments. 4.5:1+ on n50.
--color-accent
#E8730C · Saffron. Graphic accent only, never body text.
--color-accent-text
#A34C00 · Saffron for text. Kickers and step numbers. AA on n50 and n100.
Warm neutral ramp, ten steps. Usage is 60-30-10: 60% n50 and n100 surfaces, 30% neutral text and lines, 10% primary and accent. Body text is n900 or n600 on light, cream (#F5F5F0) or mist (#A8A8A0) on n900.
02
Type scale
Two typefaces. Instrument Sans for display at weights 500-700, tracking -0.02em to -0.03em, line height 1.02-1.2. Inter for body at 400-600, line height 1.5-1.7. Ratio 1.333.
03
Spacing scale
8pt grid. Eight steps, nothing off-grid. Sections breathe at 96-128px, cards pad at 24-32px, related items sit 8-16px apart.
04
Radius
--radius-control · 12px
Inputs, chips
--radius-card · 20px
Cards, swatches
--radius-band · 28px
Photo bands, feature cards
9999px
Buttons, tags
05
Motion tokens
Entrances fade and rise 24px with ease-out-expo. Stagger children 60-120ms. Micro-interactions lift 2-4px in 200ms. Nothing runs longer than one second. Reduced motion is respected globally through MotionConfig.
06
Logo lockup
Rules
- Wordmark is always lowercase, one word.
- Clear space equals the height of one node on all sides.
- The saffron peak node never changes color.
- Never stretch, outline, or add shadows.
- On photography, use the reversed lockup over a n900 scrim.
07
Voice
Sounds like
- Short, declarative sentences. "One email starts it."
- Local-proud. Name the Fox Valley, name the street.
- Benefits first. "Eat free" beats "creator monetization".
- Plain numbers, real timelines.
Never
- Em dashes. Short hyphens only.
- Hype-speak or hustle-culture framing.
- Corporate filler like "synergy" or "at scale".
- Exclamation points in headlines.