Modern · Clean · Professional

Northline Realty — Style Guide

A bright, product-like modern brokerage — pure Poppins, emerald accent, generous whitespace, rounded-soft. Deliberately not gold-luxury, not serif-editorial, not dark-cinematic, not fintech-blue.

Design style: Modern Brand: Northline Realty — Austin, TX collective Type system: Pure Poppins Accent: Single emerald

c:\Users\kennk.LAPTOP-A8011HPU\Desktop\Templates\Team Agents\Northline Realty

02 Color Palette

One green accent only. White plus soft neutral-green surfaces dominate; deep green-charcoal for dark bands. HEX and rgb() shown for each token.

Primary — Emerald brand

Brand

--brand

#0F7A56
rgb(15, 122, 86)

Brand Strong (hover)

--brand-strong

#0B5E42
rgb(11, 94, 66)

Brand Tint

--brand-tint

#E8F3EE
rgb(232, 243, 238)

Brand Tint 2

--brand-tint-2

#D6EBE1
rgb(214, 235, 225)

Secondary — Dark grounds (ink)

Ink (dark sections/footer/CTA)

--ink

#14211C
rgb(20, 33, 28)

Ink 2

--ink-2

#1E2E27
rgb(30, 46, 39)

Accent — Stars & semantic

Star (ratings only)

--star

#E8B04B
rgb(232, 176, 75)

Success (= brand)

--success

#0F7A56
rgb(15, 122, 86)

Error

--error

#C2453F
rgb(194, 69, 63)

Background — Surfaces

Background

--bg

#FFFFFF
rgb(255, 255, 255)

Surface

--surface

#F5F7F5
rgb(245, 247, 245)

Surface 2

--surface-2

#EEF2EF
rgb(238, 242, 239)

Border

--border

#E4EAE6
rgb(228, 234, 230)

Text

Heading

--heading

#14211B
rgb(20, 33, 27)

Text / body

--text

#34413A
rgb(52, 65, 58)

Muted

--muted

#6E7B74
rgb(110, 123, 116)

On Dark

--on-dark

#EAF1ED
rgb(234, 241, 237)

03 Typography

Poppins for everything (300–800) — the single-typeface system is the signature. No second family. Headings 600/700 with tight negative tracking (-0.02 to -0.03em); body 400 at 1.7 line-height. family=Poppins:wght@300;400;500;600;700;800

Weights in use

300 Light400 Regular500 Medium600 SemiBold700 Bold800 ExtraBold

Heading hierarchy (real sizes)

.display / 700Homes, sold right

h1 / 600A team that moves with you

h2 / 600Real estate, the modern way

h3 / 600Nine agents, one standard

h4 / 600Meet the Northline team

Body & support text

.leadNo pressure, no jargon — a modern brokerage built around clear communication and calm, confident guidance.

body / 400 / 1.7Founded in Austin in 2015, Northline is a small collective of agents who share one standard of service. We handle buying, selling, and everything between with a plain-spoken, human touch.

.smallTrusted by 400+ Austin families

Eyebrow / tracked uppercase label (pill only)

About Northline

04 Spacing System

Rounded-soft language: cards/images 22px, inner elements 12–16px, buttons 12px. Medium-rounded — never pill, never sharp-0px.

Layout & scale

--wrap75rem container max

--sectionclamp(4rem, 3rem + 5vw, 7.5rem)

--pad-xclamp(1.25rem, 4vw, 2.5rem)

--sp-4 / 6 / 81rem / 1.5rem / 2rem

--sp-12 / 16 / 243rem / 4rem / 6rem

--easecubic-bezier(.22,1,.36,1)

--fast / --med / --slow180ms / 400ms / 800ms

--shadow0 16px 40px -18px rgba(20,33,28,.20)

Border-radius scale

--r-lg 22px
cards / images

--r 16px
panels

--r-sm 12px
inputs

--r-btn 12px
buttons

--pill 999px
tags / eyebrow

05 Buttons

Solid emerald primary, dark secondary, light outline; ghost-light on dark. 12px radius, 600 weight. Hover the samples to see the real states.

See all listings

Hover: lifts 2px (translateY(-2px)). Primary darkens to --brand-strong with an emerald glow shadow. Dark → --ink-2; outline → emerald border + text; ghost-light → brightened border + faint fill. Active: returns to translateY(0). Text link: arrow slides right 4px on hover.

06 Form Elements

1.5px border, 12px radius. Focus draws an emerald border with a 4px brand-tint focus ring. Error state uses --error.

Full name *

Email *

I'm interested in

How can we help?

Phone * Please enter a valid phone number.

Send me new Austin listings

Morning calls

Afternoon calls

07 UI Components

Rendered with the template's real styles. Icons use the Lucide line-icon set (24×24, 2px stroke, rounded caps).

Navigation bar (sticky white, brand mark + emerald CTA)

Northline

Home About Services Buyers Contact Book a Call

Service card (tinted icon chip, hover lifts)

Buying with confidence

From first tour to keys in hand, we guide you with clear advice and zero pressure — the modern way to buy a home.

Badges, pills & eyebrow

FOR SALE Now serving Austin Now serving

Stat & process chip

400+

Families served

Agents, one standard

Testimonial card (amber stars)

"Calm, clear, and genuinely on our side the whole way. Northline made selling feel easy."

Maya & Tom R.Sold in Mueller

Footer (deep green-charcoal)

08 Visual Examples

Buttons, type, a card, and a form together on the template's real light surface and dark ground.

Say hello

A team that moves with you

No pressure, no jargon — just clear, modern guidance from a small Austin collective.