ApartmentCart
Brand Style Guide
The single source of truth for ApartmentCart's visual identity — colors, type, spacing, and components for product and marketing work.
Logo
ApartmentCart
Primary — light backgrounds
ApartmentCart
Reversed — dark backgrounds
Color System
Navy
#0D2D4A
Primary, text, CTAs
Teal
#1A7F8E
Brand accent, links
Sky
#4BB8C5
Highlights, icons
Mist
#D4EFF3
Backgrounds, chips
Ice
#F4F9FA
Page background
Slate
#4A5E6D
Body text, secondary
Muted
#8FA9B4
Placeholders, meta
Amber
#E8824A
Warnings, coming soon
Sage
#2B9E6F
Success, available
Typography
Display & Headlines — Fraunces (Light 300, Serif)
Find your next home.
Fraunces brings warmth and editorial character to headlines, making listings feel inviting — not cold or transactional. Use it for all marketing headlines, property prices, and hero copy.
UI & Body — DM Sans (Regular 400 / Medium 500, Sans-serif)
Filter by neighborhood
DM Sans handles all interface text, labels, and body copy. It's clean, highly legible, and engineered for screens. Never use weights above 500.
| Style | Specs | Example |
|---|---|---|
Apartment living. |
||
Browse 4,200+ listings |
||
Filter by neighborhood |
||
Price & availability |
||
Compare verified listings, contact landlords directly, and move in with confidence. |
||
Updated 2 hours ago · 14 units available |
||
Featured listings |
||
| --ac-teal: #1A7F8E |
Spacing Scale — 4px base unit
xs — 4pxIcon gaps, tight inline
sm — 8pxInline items, badge padding
md — 12pxCard inner padding
lg — 16pxSection item gaps
xl — 24pxComponent spacing
2xl — 40pxBetween major elements
3xl — 64pxPage section breaks
Design Tokens
| Token | Value | Usage |
|---|---|---|
| --ac-navy | #0D2D4A | Primary actions, headings, logo bg |
| --ac-teal | #1A7F8E | Brand accent, links, focus rings |
| --ac-sky | #4BB8C5 | Icon stroke, highlights |
| --ac-mist | #D4EFF3 | Chip / badge backgrounds, secondary btn |
| --ac-light | #F4F9FA | Page background, tag fills |
| --ac-slate | #4A5E6D | Body text, secondary labels |
| --ac-mid | #8FA9B4 | Placeholders, meta text, eyebrows |
| --ac-warn | #E8824A | Warnings, "coming soon" states |
| --ac-success | #2B9E6F | Available, verified, success states |
| --radius-sm | 6px | Buttons, small chips |
| --radius-md | 10px | Inputs, icon boxes |
| --radius-lg | 14px | Cards, modals, panels |
Motion Principles
Pulse — presence / loading
2s · ease-in-out · infinite
Slide — navigation / progress
2.2s · ease-in-out · infinite
Fade — page transitions
2s · ease-in-out · infinite
Scale — tap / hover feedback
1.8s · ease-in-out · infinite
Iconography — 20px · 1.5px stroke · Rounded caps
location
secure
home
schedule
list
search
trash
document
upload
calendar
user
arrow right
Buttons
Variants
Sizes
With icon
Full-width CTA
Status Badges
New listing
Available now
Available Aug 1
Off market
Pet friendly
Verified
High demand
Form Inputs
Text inputs
City or neighborhood
Max budget / month
Move-in date
States
Default
Filled
Error
Please enter a valid zip code
Listing Card
Verified
Williamsburg, Brooklyn
$2,850 / mo
148 Bedford Ave · 2 BR · 1 BA
High demand
Lower East Side
$3,400 / mo
22 Orchard St · 1 BR · 1 BA
Usage Rules
Do
✓ Use Fraunces for all headlines, hero copy, and price figures
✓ Lead with Navy or Teal on white backgrounds for CTAs
✓ Maintain generous whitespace between sections (40–64px)
✓ Use Mist and Ice for supporting UI surfaces and backgrounds
✓ Keep icon stroke weight at 1.5px with rounded line caps
✓ Use Sage for success/available states, Amber for warnings
Don't
✗ Mix more than 3 brand colors in a single layout
✗ Use font weights above 500 in body copy or UI text
✗ Place teal text on mist backgrounds — insufficient contrast
✗ Use Amber or Sage as primary action or brand colors
✗ Distort, recolor, or rearrange the logo lockup
✗ Use system fonts (Arial, Helvetica) as substitutes