Design System · April 2026

Mullin360 Brand Identity.

This document is the source of truth for tokens, components, and patterns used on mullinv1.netlify.app. Every value shown is extracted directly from index.html and its sibling pages — so what you see here is what renders in production. Each section is structured to map cleanly onto Figma frames: one page per foundation, one frame per component, and one master file for patterns.

Maturity score

62/100

Consistent visual language, tokenization gaps.

Components

11

9 documented · 2 partial (tmember-placeholder, scroll hint)

Tokens

47

14 color · 2 type families · 17 spacing · 3 radius · 4 shadow · rest: motion/border

Top risks

3

WCAG contrast · missing focus rings · no spacing scale

Foundations · 01

Colors

Two intentional families: a deep green brand spectrum and a warm-leaning neutral. The palette is small by design, but opacity variants are overused — see the Gaps section.

Brand · Green

#0E6133

Green

--green

Primary brand, CTAs, links

#0A4A27

Green Deep

--green-deep

Hover, stats section bg

#2C7A4B

Green Soft

--green-soft

Secondary accent

#7EA08A

Green Muted

--green-muted

Subtle text, muted borders

#DCE9E1

Green Pale

--green-pale

Italics on dark, accents

Neutrals

#FFFFFF

White

--white

Primary surface

#F8FAF8

White Soft

--white-soft

Subtle section tint

#EEF3EF

Mist

--mist

Section backgrounds

#E1E9E3

Mist 2

--mist-2

Alt section bg

#D5DED8

Line

--line

Dividers, input borders

#86958D

Stone Light

--stone-light

Placeholder, tertiary text

#5F6F66

Stone

--stone

Body on light bg

#1A2E22

Charcoal Soft

--charcoal-soft

Headings alt

#102218

Charcoal

--charcoal

Primary text, footer bg

#f0c060

Warn / In-progress

undefined

Coming-soon, status not tokenized

Common overlays / tints used in the site

Value	Where	Note
`rgba(255,255,255,.78)`	Nav links default	—
`rgba(255,255,255,.62)`	Footer links	Below 4.5:1 on charcoal
`rgba(245,240,232,.55)`	Card meta text	cream-leaning white; off-palette
`rgba(14,97,51,.35)`	Button hover shadow	—
`rgba(14,97,51,.08)`	Field focus ring	—
`rgba(220,233,225,.25 / .4)`	Status-badge borders	Two similar variants; consolidate

Heads-up · unused / alias tokens

--cream (#0c1a11), --terra (alias of --green), and --terra-light (alias of --green-soft) are declared but never referenced. Delete from :root or repurpose as canonical names — aliases fragment the token graph.

Foundations · 02

Typography

Two families: Cormorant Garamond for expressive display, DM Sans for the rest. The display voice leans 300-weight and uses italicized ems in green-pale for emphasis. Body sizing is fluid via clamp() — good in practice, but no named scale means every headline picks its own clamp range.

Font families

Cormorant Garamond

--font-d · 300 / 400 / 500 / 600 · italic 300,400

Display serif. Used for h1, h2, project names, team names, stat numerals, blockquotes.

DM Sans

--font-b · 300 / 400 / 500 · no italics imported

UI sans. Body, labels, buttons, eyebrows, metadata.

Display specimens (Cormorant)

Display · Hero XL
clamp(3.8rem, 8.5vw, 7.2rem)
weight 300 · line-height 1.02

Build boldly, where
others hesitate.

Display · Hero
clamp(3rem, 5.5vw, 4.5rem)
weight 300 · line-height 1.05

Let's talk.

Section Title
clamp(2rem, 3.5vw, 2.75rem)
weight 300 · line-height 1.2

Our vision for the corridor

Stat numeral
3.5rem · weight 300 · line-height 1

10

Project name
1.5rem · weight 400

Scottsdale Autoshow

Blockquote
italic 400 · line-height 1.5

"We build neighborhoods, not parcels."

UI specimens (DM Sans)

Lead
1.22rem · weight 300 · line-height 1.6

Commercial and mixed-use developments across the Sun Corridor.

Body
1rem · weight 400 · line-height 1.7

We develop and operate commercial real estate in partnership with communities, tenants, and investors.

Small / meta
.85rem · weight 400 · line-height 1.5

Scottsdale · Est. 2018

Eyebrow / label
.65rem · uppercase · letter-spacing .25em · weight 500

PROJECTS · SUN CORRIDOR

Nav link
.7rem · uppercase · letter-spacing .16em

PROJECTS

Button text
.72-.85rem · uppercase · letter-spacing .12-.14em · weight 500

GET IN TOUCH

Letter-spacing cheat sheet

Token candidate	Value	Used in
--tracking-hero	`.32em`	Hero eyebrow
--tracking-label	`.25em`	Section labels, eyebrows
--tracking-footer	`.2em`	Footer heads, status, info labels
--tracking-form	`.18em`	Form labels
--tracking-nav	`.16em`	Nav links, filter buttons
--tracking-btn	`.14em`	Primary buttons
--tracking-btn-sm	`.12em`	Small buttons, CTA links
Consolidate Seven adjacent values is too many. Recommend collapsing to 3: `.12em` (buttons), `.18em` (labels), `.28em` (eyebrows).

Foundations · 03

Spacing

The site uses 17 distinct spacing values without a declared scale. Most values fall on or near a 4px grid, but there's meaningful drift — values like .45rem and .55rem exist for one-off nudges. Below is the observed spectrum and the recommended reduced scale.

Observed spacing (in rem, 16px base)

.25rem
4px

.5rem
8px

.75rem
12px

1rem
16px

1.25rem
20px

1.5rem
24px

2rem
32px

2.5rem
40px

3rem
48px

4rem
64px

5rem
80px

6rem
96px

Drift Non-conforming values seen in production: .2rem, .3rem, .4rem, .45rem, .55rem, .6rem, .8rem, .85rem, .9rem, 1.1rem, 1.2rem, 1.75rem, 3.5rem, 4.5rem. Recommend snapping to the 12-step scale above.

Foundations · 04

Border radius

Three effective values. Sharp corners are the default — radii are used sparingly for "click" affordance on primary buttons and 100% for dots/avatars.

0

--radius-none

0

Cards, form inputs, submit btn

6px

--radius-md

6px

Primary buttons (.btn-terra, .btn-sage)

●

--radius-round

50%

Dots, avatars, slide indicators

Inconsistency

Contact form submit button has 0 radius while hero buttons have 6px. Decide which is canonical and apply everywhere.

Foundations · 05

Shadows / elevation

Shadows are used as motion accents (on hover / lift) rather than for static elevation. No card shadow tokens exist — cards use borders instead.

--elev-nav0 6px 18px rgba(0,0,0,.18)

--elev-cta0 14px 34px rgba(14,97,51,.22)

--elev-cta-hover0 15px 35px rgba(14,97,51,.35)

Foundations · 06

Borders

Width	Color	Used for
1px solid	`var(--line)` #D5DED8	Form fields, info blocks, cards, dividers
1px solid	`var(--green)`	Field focus state
1px solid	`rgba(245,240,232,.08)`	Footer bottom
2px solid	`var(--green)`	Blockquote left border
2px solid	`rgba(255,255,255,.75)`	Secondary button (.btn-sage on dark)
2px solid	`rgba(14,97,51,.18)`	Avatar placeholder

Foundations · 07

Motion

Fourteen distinct duration values is too many. Recommend collapsing to a five-step scale (100 / 200 / 350 / 600 / 1000ms) plus two easings.

Durations observed

Duration	Used in	Recommended
.15s	Button active state	100ms
.2s / .3s	Hover colors, filter active	200ms
.35s / .4s	Button transforms, nav scroll	350ms
.5s / .6s / .7s	Image zoom on hover	600ms
.8s–1.2s	Page reveal / fade-up	1000ms
1.8s / 2.2s	Scroll arrow bounce (ambient)	1800ms (keep)

Easings

Name	Value	Used for
--ease-out-site	`cubic-bezier(.22, 1, .36, 1)`	Reveals, card image zooms
--ease-out-btn	`cubic-bezier(.23, 1, .32, 1)`	Button transforms on hover
--ease-std	`ease` / `ease-in-out`	Hover color swaps (consolidate)

Good prefers-reduced-motion: reduce is respected across all keyframe animations.

Foundations · 08

Breakpoints

Name	Query	Drop-ins
desktop (default)	—	3-col grids, 5rem section padding
tablet	`(max-width: 1024px)`	2-col grids, 2rem nav padding, split sections stack
mobile	`(max-width: 640px)`	1-col grids, nav links hidden, hero type shrinks

Gap No tablet-portrait (768px) breakpoint — layouts either commit desktop or mobile behavior in that range.

Components · 01

Navigation

Fixed header. Transparent while at top, picks up .scrolled class after 60px scroll.

State	Background	Notes
Default (top)	transparent	Text on hero gradient
Scrolled	`rgba(16,34,24,.96)`	Adds `0 1px 0 rgba(255,255,255,.06)` bottom line
Link hover / active	—	Color → `--green-pale`
Focus (missing)	—	No focus ring — add

Components · 02

Buttons

Four variants in production. Inconsistent radius between .btn-terra (6px) and .btn-submit (0) is the top fix.

On light surface

On dark surface

Variant	Padding	Radius	Size	Hover
.btn-terra	1.25rem 3rem	6px	.85rem · .14em	bg → green-deep · ty(-6px) · shadow
.btn-sage	1.25rem 3rem	6px	.85rem · .14em	bg tint · border → green · ty(-4px)
.btn-submit	1rem 2.5rem	0	.72rem · .12em	bg → green-deep · ty(-1px)
.btn-cream	1rem 2.5rem	0	.72rem · .12em	bg → green-pale
Disabled	Not defined
Focus	Not defined
Loading	Not defined

Components · 03

Form fields

Label + input stacked vertically. Focus ring is good; error and success states don't exist yet.

Your name

Email

Inquiry type

Message

States

Default	1px solid #D5DED8 · .8rem 1rem padding
Focus	border → --green · shadow 0 0 0 3px rgba(14,97,51,.08)
Error	Not defined — add: border → #a3262c · inline message .8rem
Disabled	Not defined — add: bg → --mist · color → --stone-light
Placeholder	color --stone-light · ~4.1:1 contrast, borderline

Components · 04

Filter chips

Components · 05

Status badges

Complete In progress Coming soon

Components · 06

Info blocks

Address7580 E Gray Rd
Scottsdale, AZ 85260

Email[email protected]

Phone+1 (480) 555-0199

Components · 07

Venture links

AZ Collaborate→ The Back Lot→

Components · 08

Project cards

Automotive · Arizona

Centerra Motorplex

Chandler, AZ

In progress

→

Automotive · Arizona

Scottsdale Autoshow

Scottsdale, AZ

Complete

→

Mixed-use · Arizona

Tempe Autoplex

Tempe, AZ

Coming soon

→

Hover-only affordance The arrow icon and status badge only appear on hover. Consider making them visible on touch devices.

Components · 09

Team cards

Jim Mullin

Principal

Jacqueline Swanson

Director of Operations

Mark Simmons

Development

Patterns · 01

Hero

SCOTTSDALE · EST. 2018

Build boldly, where others hesitate.

Commercial and mixed-use developments across the Sun Corridor.

Patterns · 02

Split section

"Built on place, not hype."

OUR VISION

Long-horizon investment in the Sun Corridor.

We build neighborhoods, not parcels. Every project is shaped by climate, community, and what's already there.

Our portfolio spans automotive, hospitality, and mixed-use — always with a 20-year view.

Patterns · 03

Stats strip

10

Projects

20+

Years

1.2M

SqFt

3

Counties

Patterns · 04

Pillars

OUR APPROACH

How we build, summarized.

01

Climate-first design

Desert-tuned massing, shade, and thermal envelope decisions at land-entitlement stage.

02

Community alignment

City conversations start before the survey. Projects are shaped by what the place already tells us.

03

Long-hold economics

We develop to own, not to flip. That changes every material decision.

Patterns · 05

Footer

Commercial and mixed-use developments across the Sun Corridor.

Navigate

Ventures

Contact

7580 E Gray Rd
Scottsdale, AZ 85260

A11y Footer links at rgba(255,255,255,.62) on #102218 score ≈3.8:1 — below AA 4.5:1. Bump to .78.

Audit · 01

Maturity score · 62/100

Category	Score	Notes
Color tokens	8 / 10	Well-structured; three unused aliases to remove
Typography tokens	7 / 10	Good families, no named size scale
Spacing tokens	5 / 10	17 observed values, no declared scale
Radius tokens	6 / 10	3 values, inconsistent between button variants
Shadow tokens	6 / 10	3 in use, none named; no card elevation
Motion tokens	5 / 10	14 durations — consolidate
Component completeness	6 / 10	Missing: focus, error, disabled, loading states
Accessibility	5 / 10	Contrast fails in footer; focus rings absent
Documentation	4 / 10	This doc closes the gap
Code ↔ design parity	7 / 10	Good — tokens in CSS variables

Audit · 02

Gaps · hardcoded & inconsistent values

Hardcoded pixel values (should be tokens)

Value	Where	Issue
`20px`	Grid gaps across projects/team/gallery	Recommend `--space-5` (20px) token
`34 / 30 / 26px`	Nav logo height at 3 breakpoints	Extract to `--nav-logo-h`
`420 / 380 / 280 / 300px`	Card image heights	Define `--card-media-h` tokens
`60px`	JS scroll threshold	Expose as data-attribute or token
`.45rem / .55rem / .85rem`	Various off-scale spacing	Snap to 4px scale

Near-duplicates

Items	Recommendation
`--charcoal` #102218 vs `--charcoal-soft` #1A2E22	Slight variation, rarely used deliberately. Consider dropping one.
`rgba(255,255,255,.78)` vs `.62` vs `.55` vs `.5`	Define an opacity scale: `--opacity-primary .88`, `--opacity-muted .66`, `--opacity-subtle .4`
Easings `cubic-bezier(.22,1,.36,1)` vs `(.23,1,.32,1)`	Nearly identical — collapse to one named easing
`--terra`, `--terra-light`, `--cream`	Unused aliases — delete from `:root`

Missing component states

Component	Missing
Buttons	Focus ring, disabled, loading
Nav links	Focus ring
Project cards	Focus ring, keyboard-visible status/arrow
Form fields	Error, success, disabled
Filter chips	Focus ring

Audit · 03

WCAG contrast spot-checks

AA pass ≥ 4.5:1 Borderline Fail

Pair	Foreground	Background	Ratio	Status
Body on white	`--stone` #5F6F66	#FFFFFF	~5.5:1	AA
Labels on white	`--stone-light` #86958D	#FFFFFF	~4.1:1	Borderline large-text only
Nav links	rgba(255,255,255,.78)	#102218 (scrolled)	~6.1:1	AA
Footer links	rgba(255,255,255,.62)	#102218	~3.8:1	Fail 4.5:1
Footer copyright	rgba(255,255,255,.5)	#102218	~2.9:1	Fail
Card meta	rgba(245,240,232,.55)	pcard overlay dark	~3.5:1	Large text only
Green-pale on green	#DCE9E1	#0E6133	~2.1:1	Decorative only — don't use for text
#f0c060 on dark	#f0c060	rgba(0,40,32,.97)	~7.2:1	AA

Audit · 04

Priority actions

P0 · this sprint

Lift footer link opacity from .62 → .78; copyright to .72.
Add :focus-visible ring to buttons, nav links, cards, filter chips (2px --green-pale outline, 2px offset).
Unify button radius — decide 0 or 6px and apply to all four variants.

P1 · next sprint

Publish a 12-step spacing scale and codemod off-scale values.
Collapse 14 motion durations → 5 (100/200/350/600/1000ms).
Consolidate letter-spacing values from 7 → 3.
Define error / disabled / success states for form fields and buttons.

P2 · nice to have

Add a 768px tablet-portrait breakpoint.
Extract image-height tokens for media cards.
Remove unused aliases --cream, --terra, --terra-light.
Add skip-to-content link on every page.

Metrics to track post-fix

Axe Core failures: should reach 0
Unique spacing values: < 14
Unique motion durations: < 6
CSS custom properties with 0 references: 0

Delivery · Figma

How to drop this into Figma

Three realistic paths, in order of effort:

A · html.to.design plugin

Install html.to.design in Figma (free tier covers single-file docs). Paste this document's URL (or drag the file) — it auto-generates a Figma page with real frames and text layers. Best one-click option.

B · Tokens Studio import

I can spin up a design-tokens.json matching W3C DTCG format from the values in this doc. Load it into Tokens Studio for Figma. You'll get colors + typography styles + spacing variables wired to Figma variables in about 5 minutes.

C · Screenshot + rebuild

Low-tech but reliable: take screenshots of each section, paste onto a Figma page for reference, and rebuild natively. Best if you want clean Figma components from day one.

Say the word ("generate tokens.json") and I'll produce the file. Likewise if you want a Figma