Nassau Street Partners — Design System

Styleguide

A single reference for the colors, typography, buttons, spacing and layout classes that build every page on nassaustreetpartners.com. Every specimen below uses the live production classes — edit a class here and the whole site follows.

01

Colors

Four tokens carry the entire palette. They live in the Base collection as Webflow variables, so every class references the variable rather than a raw hex value. Change the variable, and the site changes with it.

Black
--black
#050505
Body copy, button borders, dark sections and the footer.
White
--white
white
Page background, and all type set on dark backgrounds.
Gray
--gray
#f2f2f2
Alternating section backgrounds via .section.is-gray, and the 1px .line divider.
Text Gray
--text-gray
#535353
Secondary and supporting copy, applied with the .is-gray modifier.
02

Typography

Two families do all the work. PS Times sets every display line and heading; Inter carries body copy, navigation and interface text. Sizes are declared in rem against a 16px root.

--ps-times
Aa
PS Times
Custom font, regular 400. Display type, all headings, and the ticker. Applied through the h1 / h2 tags, .h1-128 and the .is-ps-times modifier.
--helvetica-neue-roman
Aa
Inter
Body font, set on the body tag. Paragraphs, buttons, navigation, forms and every size in the .p / .text scale.
h1
8rem / 128px
Line height 1 · weight 400 · PS Times via .h1-128

Where Ambition Finds Its Backers

h2
5rem / 80px
Line height 1 · capitalized · PS Times

And Where Capital Finds Vision

.text-80
4.5rem / 72px
Drops to 3rem on tablet, 2.3rem on mobile portrait
75+ Years Combined Experience
.h2-64
4rem / 64px
Line height 120% · drops to 2.5rem on mobile landscape

Independent Capital Advisory

.h2-36
2.25rem / 36px
Section headings — the size used across this styleguide

Corporate Advisory

.h3-smaller
20px
Line height 1.4 · card and list headings

M&A and Strategic Advisory

.p-28 / .area-text
1.75rem / 28px
Lead paragraphs and intro copy

We advise founders, management teams, boards and investors on the decisions that define a company.

.text-20 / .p-20
1.25rem / 20px
Standard body copy and footer links

Independent advice, senior attention on every mandate, and no conflicts from lending or trading. Our incentives sit on one side of the table only.

body / p
1rem / 16px
Line height 1.4 · the inherited default

Nassau Street Partners is an independent capital advisory firm serving clients across biotech, healthcare and technology.

.p-12
0.75rem / 12px
Disclosures, legal copy and fine print

Securities offered through registered broker-dealers. Please review our disclosures and Form CRS before engaging.

Modifiers

.is-gray

Sets copy to Text Gray for secondary emphasis.

.is-ps-times

Swaps a paragraph into the PS Times display face.

.is-white

Reverses type to white for dark sections.

03

Buttons & Links

Every button is a 1px outline on a transparent fill that inverts on hover across 200ms ease. There is no filled button and no border radius anywhere in the system — the restraint is the brand.

.main-cta
16px 24px · 1.125rem
Primary action on light backgrounds. Hover fills Black and flips type to White.
.main-cta.is-white
Combo modifier
The same button reversed for dark sections — border and type switch to White.
.secondary-cta
16px 24px · gap 12px
Flex container that pairs a label with an icon. Hover fills Text Gray.
.arrow-link
2.25rem · capitalize
Oversized inline link used to close out a section.
.nav-link
1.3rem
Primary navigation item in the header and hamburger menu.
.footer-link
1.25rem · capitalize
White footer link. Hover reveals a 1px underline over 200ms.
.small-link
Inherits size
Muted Gray link for legal and utility rows.
04

Spacing

Spacing is applied with classes, never with one-off margins. A .gap class turns an element into a vertical flex stack with a fixed gap; a .padding combo sets a section's vertical rhythm. The bars below are separated by the real class, not a mock-up.

Gap scale — vertical flex stacks

.gap-6
6px
.gap-12
12px
.gap-14
14px
.gap-16
16px
.gap-24
24px
.gap-26
26px
.gap-32
32px
.gap-36
36px
.gap-48
48px
.gap-64
3.33vw — fluid
.gap-80
80px
.gap-90
90px

Section padding — .padding-vertical combos

Class
Top
Bottom
Used for
.padding-64
64px
64px
Tight utility bands
.padding-100
100px
100px
The standard content section
.padding-128
6.67vw
6.67vw
Fluid rhythm that scales with the viewport
.padding-170-100
170px
100px
First section under the fixed navbar
.padding-220-64
220px
64px
Page heroes on interior pages
.padding-contacts
210px
155px
Contact page hero
.pad-footer
128px
128px
Footer block
.padding-vsl
100px
100px
Video and insight sections
.padding-disclaimer
0px
64px
Legal copy sitting under a section
05

Layout

Every page is the same three nested pieces: a .section for background and position, a .container for width, and a .padding-vertical combo for rhythm. Content width is then constrained by a .mw modifier rather than by the container itself.

Page shell

.section — position relative, carries the background
.container — max-width 1760px, 20px side padding, auto margins
.padding-vertical + .padding-100 — vertical rhythm
Content

Content max-widths

Class
Max width
Notes
.mw430
430px
Narrow column, card copy
.mw655
655px
Single-column body copy
.mw680
680px
Intro and lead paragraphs
.mw
728px
Default text measure
.mw-735
38.28vw
Fluid half-column in split layouts
.mw-880
880px
Wide statement copy
.mw1185
1185px
Full-bleed editorial blocks

Structural classes

.section.is-gray
background #f2f2f2
Alternates sections against the white default.

A gray section reads as a pause between two white ones.

.grid-2
2 columns · 20px gap
The standard two-up grid. Add .no-gap to collapse the gutters.
Column one
Column two
.horizontal-flex
space-between · weight 500
Pushes a label and a value to opposite edges. Used in stat and list rows.
Aggregate transaction experience
$1B+
.line
100% × 1px · #f2f2f2
Hairline divider. The .is-gray combo darkens it to #e1e1e1.

Breakpoints

Name
Applies at
Notes
Desktop — main
All widths
The base every other breakpoint inherits from
Tablet — medium
≤ 991px
.text-80 drops to 3rem
Mobile landscape — small
≤ 767px
.h2-64 drops to 2.5rem
Mobile portrait — tiny
≤ 479px
.text-80 drops to 2.3rem
06

Forms

Inputs are underlines, not boxes. A single 1px bottom rule in Black, oversized 1.75rem type and no fill — so a form reads as a continuation of the page rather than a widget dropped onto it.

.text-field
.text-field
.text-area
.submit-btn
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
.text-field
Transparent background with a 1px Black rule on the bottom edge only. 12px bottom padding, no left padding, 1.75rem type. Transitions all properties over 200ms.
.text-area
Minimum height 180px with a full 1px border in Text Gray — the one input that reads as a box, because it needs to signal length.
.submit-btn
Full-width outline button, 16px vertical padding, 1.125rem type. Hover fills Black and flips the label to White, matching .main-cta.
.checkbox-field
Consent and opt-in rows, set in #1a1a1a alongside .p-consent and .text-consent-wrapper.