Dev Hub
Color
Font
Nabih Youssef Associates — Internal

NYA Tenant Improvement
Design System

Foundation tokens, component specifications, and alternate design explorations for the TI microsite. Based on the Figma file blueprint.

Playfair Display — Display & Headlines Inter — Body & UI Blueprint v1.0
01

Color Palette

Brand — Navy + Blue

Primary Navy

#0B1F3B

Authority, footer, dark CTA

Light Navy

#1E3A5F

Secondary dark surfaces

Accent Blue

#2F80ED

CTA, links, overlays

Accent Hover

#1C6ED5

Button hover state

Neutrals (Refined B2B Palette)

Black

#0F172A

Primary headings

Gray 900

#1E293B

Body dark

Gray 700

#475569

Paragraph text

Gray 500

#64748B

Notes, meta text

Gray 300

#E2E8F0

Borders

Gray 200

#EEF2F7

Subtle backgrounds

Gray 100

#F8FAFC

Page background

White

#FFFFFF

Card, section background

Semantic

Value / Success

#059669

Value emphasis, success state

Destructive

#DC2626

Error, destructive actions

02

Typography

Display & Headings

Playfair Display

Serif typeface for H1–H2 headlines. Brings editorial authority and warmth to structural messaging. Weights 400–700.

Regular SemiBold Bold Italic

Body & UI

Inter

Geometric sans-serif for H3, body, labels, and all UI elements. Exceptional readability at every size. Weights 300–700.

Light Regular Medium SemiBold Bold
Tenant Improvement
Caps / Eyebrow Inter 11px / 16px 700 Bold 0.10em tracking Accent Blue — section labels

Most engineers see the space.
We see how the building actually works.

H1 / Hero Playfair Display 64px / 72px 700 Bold −0.02em tracking color-black — hero headline

What Looks Simple Can Become Complicated Quickly

H2 / Section Playfair Display 44px / 52px 600 SemiBold −0.01em tracking color-black — section headlines

A Firm Built on Care, Trust, and Serious Work

H3 / Card Inter 20px / 28px 600 SemiBold −0.01em tracking color-black — card titles

Tenant improvements succeed when the existing building is understood, not assumed. NYA brings clarity to structure, constraints, and possibilities before decisions become costly.

Body / Large Inter 18px / 28px 400 Regular 1.65 line-height gray-700 — hero & section intros

Existing buildings rarely behave like clean templates. Years of prior modifications, hidden as-built discrepancies, and on-site adaptations mean the real condition is always particular. NYA tailors details to reduce field conflicts and construction-phase surprises.

Body / Default Inter 16px / 26px 400 Regular 1.65 line-height gray-700 — standard text

Structural clarity before costly decisions.

Label / Small Inter 14px / 22px 500 Medium gray-500 — notes, captions
03

Spacing Scale

4px Base Scale

--sp-1
4px Micro gap
--sp-2
8px Tight gap
--sp-3
12px Close items
--sp-4
16px Default gap
--sp-5
20px
--sp-6
24px Card internal
--sp-7
28px
--sp-8
32px Card padding
--sp-10
40px
--sp-12
48px Section sub-gap
--sp-16
64px Mobile section pad
--sp-18
72px
--sp-20
80px
--sp-30
120px Desktop section pad

Layout Tokens

--container 1200px Max content width
--container-narrow 780px Narrow text column
--section-padding 120px Desktop vert. padding
--section-mob 64px Mobile vert. padding
--gutter 32px Column gutter
--margin-desktop 120px Side margins @ 1440

Grid System

Desktop frame 1440px
Columns 12
Gutter 32px
Margin (each) 120px
04

Buttons & Labels

Button / Primary — Inter 15px Medium

52px height 0 28px padding radius: 8px fill: #2F80ED hover: translateY(−2px) + shadow transition: 220ms ease-out

Button / Secondary — Inter 15px Medium

52px height transparent fill 1.5px stroke navy 18% hover: full navy border

On Dark Background

Eyebrow Label — Inter 11px Bold, 0.10em tracking

Tenant Improvement Who We Are at NYA The Problem with TIs
28px rule — gap 10px — before text color: accent blue ALL CAPS
05

Card Components

Feature Card — Culture Grid (radius-lg, shadow-1→4 on hover)

Client Advocacy

NYA takes client care seriously — listening closely, understanding what matters most, and working to protect those priorities throughout the project.

Make-It-Work Mindset

NYA translates architectural ambition into structural solutions that are coordinated, code-conscious, and constructible.

Communication That Reduces Pressure

NYA intercepts small gaps before they become delays — responding quickly and keeping clients informed even when a full answer requires more time.

Process Step Card — Horizontal Steps (center-aligned)

1

Understand the Building

Study the existing building on its own terms.

2

Identify Issues Early

Clarify constraints before decisions become expensive.

3

Tailor the Details

Shape details around actual field conditions.

Glass Card — Hero Overlay (backdrop-filter: blur 20px)

We look beneath the finish.

Structure, constraints, load paths, and hidden conditions are studied early so the design can move forward with confidence.

fill: white 88% blur: 20px radius: 24px shadow-glass
06

Border Radius

--radius-sm

8px — Buttons, tags

--radius-md

12px — Token cards, small panels

--radius-lg

16px — Feature cards, sections

--radius-xl

24px — Glass card, large panels

07

Design Alternates

Color Palette Options

Navy + Blue Recommended

Authority and precision. Premium, institutional feel — best fit for a structural engineering brand.

Slate + Amber Alt A — Warmer

Approachable confidence. Suits "care and craft" messaging — less institutional, more relationship-forward.

Charcoal + Cyan Alt B — Darker

High-contrast modern tech feel — appropriate if targeting Class-A office tenants or tech company fit-outs.

Forest + Stone Alt C — Earth

Sustainability-forward. Suits ESG-aware clients, LEED-adjacent messaging, adaptive reuse projects.

Deep Violet + Gold Alt D — Boutique

Boutique firm energy. Distinguished from competitors. Higher personality — higher risk, higher reward.

Navy + Authority Gold Alt E — Legal

Trust navy + gold accent. Signals established institutional credibility — common in legal and finance services.

Font Pairing Options

Recommended Playfair Display + Inter

Before anything is built, we understand what already exists.

Structural clarity before costly decisions. NYA brings expertise to the details others assume.

Serif authority in headlines + geometric precision in body. Editorial, premium, timeless — matches the firm's depth without being cold.

Selected Serif + Geometric sans
Alt A — Contemporary Fraunces + Plus Jakarta Sans

Before anything is built, we understand what already exists.

Structural clarity before costly decisions. NYA brings expertise to the details others assume.

Optical-size serif with personality + modern humanist sans. High polish, distinctive — strong for agency-tier positioning without feeling generic.

Variable serif + Humanist sans Premium feel
Alt B — Luxury Editorial Cormorant Garamond + Montserrat

Before anything is built, we understand what already exists.

Structural clarity before costly decisions. NYA brings expertise to the details others assume.

High-contrast elegant serif with italic headline emphasis + Montserrat body. Fashion-adjacent sophistication — strong for founder-story and brand narrative.

High-contrast serif + Geometric sans Luxury positioning
Alt C — Institutional Libre Baskerville + Source Sans 3

Before anything is built, we understand what already exists.

Structural clarity before costly decisions. NYA brings expertise to the details others assume.

Classic book serif with strong stroke contrast + neutral humanist sans. Authoritative and academic — conveys established credibility without feeling corporate.

Book serif + Neutral humanist Institutional authority
Alt D — Engineered Editorial Spectral + Work Sans

Before anything is built, we understand what already exists.

Structural clarity before costly decisions. NYA brings expertise to the details others assume.

Screen-optimized editorial serif with fine detail + mechanical precision sans. Feels both intelligent and technical — ideal for an engineering firm with high visual standards.

Editorial serif + Mechanical sans Precision positioning

Button Style Options

Current — Filled rectangle + Stroke secondary

Alt A — Pill shape

Alt B — With directional arrow

Alt C — On Navy (ghost outlined)

08

Section Previews

Hero — Option A (Light, Playfair Display H1)

Tenant Improvement

Most engineers see the space. We see how the building actually works.

Tenant improvements succeed when the existing building is understood, not assumed. NYA brings clarity to structure, constraints, and possibilities before decisions become costly.

Structural clarity before costly decisions.

Hero — Option B (Dark Navy, italic Playfair Display)

Tenant Improvement

Before anything is built, we understand what already exists.

NYA brings structural clarity before decisions become costly.

Final CTA Section (Navy gradient, center-aligned)

Get Started

Work With a Team That Takes TI Seriously

Bring NYA into the conversation early and give your project a clearer path through design, review, approval, and construction.

Problem Cards — Section 03 (Gray 100 background)

The Problem with TIs

What Looks Simple Can Become Complicated Quickly

Hidden Structural Risk

Early decisions made without enough structural clarity lead to avoidable complications.

Generic Engineering Assumptions

Treating the building like a template misses details that reflect how it actually works.

RFIs, Rework, and Delays

Unclear drawings that miss actual conditions create field conflicts during construction.

Process Steps — Section 04 (5-column, White background)

What Doing Tenant Improvements Right Looks Like

A well-run TI project starts with understanding the building, identifying constraints early, and keeping communication clear from design through construction.

1

Understand the Building

Study the existing building on its own terms.

2

Identify Issues Early

Clarify constraints before decisions become expensive.

3

Tailor the Details

Shape details around actual field conditions.

4

Coordinate Clearly

Keep structural team, architect, contractor, and owner aligned.

5

Move With Confidence

Support review, approval, and construction with fewer surprises.