Teays Valley PM — Modern Estate Heritage

Style Guide

Design tokens, color system, typography, spacing, radius, shadows, motion, and texture — the foundational spec inherited by the UI Guide.

v3.0

Version

2026·04

Updated

Barlow + SS4

Typefaces

tv-tokens.css

Token File

01 Color 02 Type 03 Spacing 04 Radius 05 Shadows 06 Motion 07 Texture 08 Do's & Don'ts

01 · Foundation

Color System

Deep architectural navy anchored by a warm coral-red. Boundaries defined by tonal surface shifts — never 1px borders.

Primary Brand Palette

Primary

--primary

#002a53

Nav · dark bands · headers · footer bg

Primary Hover

--primary-container

#1c406d

Hover state · gradient partner

Primary Light

--primary-light

#3a6494

Avatars · subtle accents

Brand Red

--red

#D44A38

CTAs · badges · price text · icons

Red Dark

--red-dark

#B33428

Search icon tile · pressed state

Red Container

--red-container

#fbecea

Badge bg · hover tint on light

Surface Hierarchy — The No-Line Rule

--surface · #fcf9f8 · Page canvas

--surface-low · #f6f3f2 · Section backgrounds

--surface-card · #ffffff · Cards, inputs

Depth is created by stacking these three surface layers. Never use 1px solid borders to separate sections — use background color shifts instead.

Surface

--surface

#fcf9f8

Page canvas

Surface Low

--surface-low

#f6f3f2

Section bands

Surface Card

--surface-card

#ffffff

Cards · inputs

On-Surface

--on-surface

#1b1c1c

Primary text — not pure black

On-Variant

--on-variant

#44474e

Secondary body text

Muted

--muted

#6b7280

Labels · captions · metadata

Semantic Colors

Success

--success

#1a6b3a

Confirmations · positive states

Success BG

--success-bg

#e8f5ee

Alert backgrounds

Warning

--warning

#8a5c00

Caution · pending states

Warning BG

--warning-bg

#fef5dc

Alert backgrounds

Info

--info

#1a4f7a

Informational notices

Danger

--danger

#b32020

Errors · destructive actions

02 · Foundation

Typography

Barlow for scanning. Source Serif 4 for reading. Courier New for data.

Display / UI — Barlow

Find Your
Perfect Home.

Nav · Buttons · Labels · Stats · Headings — everything meant to be scanned.

Editorial — Source Serif 4

Serving Lafayette with excellence in operations, technology, and genuine care for every resident.

Body · Testimonials · FAQ · Descriptions — everything meant to be read.

Data — Courier New

$1,410/mo

800+ units · 2013 est.

40.4167°N · 86.8753°W · Unit #A-103

Every number representing data uses mono. No exceptions.

Display-XL

Barlow 700 · 3.5rem · −0.025em letter-spacing

Find Your Home

Display-LG/H2

Barlow 700 · 1.75rem · −0.02em

Featured Listings

Title-LG/H3

Source Serif 4 600 · 1.375rem

Anvil 38 Apartments

Body-LG

Source Serif 4 400 · 1.0625rem · 1.8 leading

Quality property management serving Lafayette since 2013.

Body-MD

Source Serif 4 400 · 0.875rem · 1.8 leading

We make renting simpler, smarter, and more convenient with a fully online resident experience.

Label-MD

Barlow 700 · 0.75rem · +0.1em · uppercase

Available Now · Pet Friendly · 2 Bed

Eyebrow

Barlow 700 · 0.6875rem · +0.2em · red · upper

Featured Properties

Mono Accent

Courier New · 0.8125rem

845 sq.ft. · 05/17/2026 · Unit #A-103 · 40.4167°N

03 · Foundation

Spacing Scale

Base-4 scale via CSS custom properties. If a section feels crowded, double the padding-block. Space is a luxury signal.

4px

sp-1

8px

sp-2

12px

sp-3

16px

sp-4

24px

sp-5

32px

sp-6

40px

sp-7

56px

sp-8

80px

sp-9

112px

sp-10

160px

sp-11

Common Application

Button padding 12px 22px

Card padding 16–24px

Section padding-block 80–160px

Component gap 16–24px

Grid Layouts

Column gap 20–40px

Asymmetric split 60/40 over 50/50

Max content width 1180px

Page gutters 48px desktop · 24px mobile

04 · Foundation

Border Radius — Minimal Scale

Sharp, precise geometry that reads as architectural rather than generic SaaS. Corners are a detail, not a style.

2px

r-xs

Elevation & Shadows

Depth is baked into surface colors first. Shadows are used only for floating elements — never for decoration.

0 1px 4px α05

Compact chips

0 2px 8px α07

Resting cards

0 6px 24px α09

Hover cards

0 14px 44px α12

Dropdowns · search

0 24px 64px α15

Modals

06 · Foundation

Motion & Animation

Slow and intentional. The Estate ease favors a measured, confident deceleration. Nothing bounces.

Estate Ease custom

cubic-bezier(0.25, 0.46, 0.45, 0.94) — primary easing for all transitions.

Ease Out --ease-out

cubic-bezier(0.0, 0.0, 0.2, 1) — elements entering the screen.

Fast · Hover 150ms

Button lift translateY(-1px), border-color, icon color.

Standard 300ms

Chip toggles, dropdown open/close, card hover, form focus.

Slow · Reveal 450ms

Hero entrance, scroll-triggered reveals. Stagger 80ms.

Scroll Reveal 400ms

opacity 0→1 + translateY(14px)→0. Cards entering viewport.

07 · Foundation

Topographic Texture

Applied to all large dark spans — hero, CTAs, footer. Adds tactile depth without breaking the clean surface aesthetic.

Dark — 5.5%

.topo-dark

Light — 3.2%

.topo-light

Red — 6%

.topo-red

CSS Classes

.topo-dark

.topo-light

.topo-red

Add to any position: relative; overflow: hidden; container.

Usage Rules

Never exceed 6% opacity — it's texture, not illustration.
Background-size 440–640px for consistent density.
Always background-repeat: repeat.
Texture z-index 0; content z-index 1.

08 · Governance

Do's & Don'ts

The design laws. Not suggestions.

Do Apply the topography texture to every large dark span — hero, CTA bands, footer, testimonial sections.

Do Use Source Serif 4 for all text meant to be read: body copy, testimonials, FAQ answers, descriptions.

Do Render all data points in Courier New — square footage, dates, prices, unit IDs, coordinates.

Do Keep corners minimal: 4px buttons, 6px cards, 8px sections. Precision reads as premium.

Do Use the Heritage Stripe (4px solid red left border) on all high-emphasis headings and feature cards.

Do Use 60/40 asymmetric grid splits instead of 50/50 — the imbalance creates a custom, designed feel.

Don't Use 1px solid borders to separate sections. Define boundaries through background color shifts only.

Don't Use standard #000000 for text. Always use --on-surface (#1b1c1c) to maintain tonal softness.

Don't Use fast or bouncy animations. All transitions must be 150–450ms with the Estate easing curve.

Don't Exceed 6% opacity on the topography texture — it should feel like paper grain, not a visible map.

Don't Overcrowd sections. If it feels busy, double the padding-block. Space is the ultimate luxury signal.

Don't Use Glassmorphism outside the nav bar and modal overlays — it is reserved for floating UI only.

Next step

Explore the UI Component Guide

All components, patterns, and page sections — built on these tokens.

Open UI Guide → Back home