Design System v1.0
Institutional credibility, luxury restraint
Tokens, type, components, and usage rules for every M&S surface. The system is deliberately narrow: two typefaces, one accent metal, and a single neutral ramp.
01
Color
Ink and bone carry the brand. The metal accent never exceeds 5% of a surface.Ink
#121310
--ms-ink
Primary surface, headers, footers, dark bands
Ink Raised
#1B1C18
--ms-ink-raised
Secondary dark band, stat strips
Bone
#F5F2EC
--ms-bone
Default page background
Limestone
#EFEBE2
--ms-limestone
Alternate section, hover fill
Hairline
#D8D2C4
--ms-hairline
All 1px rules and card borders
Bronze
#9A7B4F
--ms-bronze
Eyebrows, metadata, links on light
Bronze Light
#C6A97A
--ms-bronze-light
Accent and CTA on ink surfaces
Graphite
#55554D
--ms-graphite
Body copy and secondary text
02
Typography
Libre Caslon Display for voice. Archivo for information.Aa
Libre Caslon Display
Display & editorial voice · Regular 400 only
Headlines, project names, pull quotes, statistics
Tracking −0.015em at 40px and above
Headlines, project names, pull quotes, statistics
Tracking −0.015em at 40px and above
Aa
Archivo
Interface & body · 300 / 400 / 500 / 600
Body copy, labels, navigation, tabular data
Uppercase labels tracked 0.16–0.30em
Body copy, labels, navigation, tabular data
Uppercase labels tracked 0.16–0.30em
Display 1
76 / 1.06 / −0.015em
Built to Last
Display 2
52 / 1.10
Albany Commons
Heading
38 / 1.16
Five verticals, one platform
Subheading
26 / 1.25
Residential Development
Lead
Archivo 20 / 1.66 / 300
Institutional discipline, residential craft.
Body
Archivo 16 / 1.8 / 400
Underwriting packages available to qualified partners.
Caption
Archivo 13.5 / 1.7
Dallas, Texas / 8,400 sf
Label
Archivo 10.5 / 500 / 0.30em
Featured Development
03
Space & Grid
4px base. 12-column grid, 1440 max, 48px gutters.space-14pxIcon offsets
space-28pxChip gaps
space-316pxInline groups
space-424pxCard interior
space-532pxGrid gutters
space-648pxPage margin
space-8110pxSection rhythm
Desktop 1440 / 12 columns / 48px gutter / 12px gap. Editorial text sets to 7 columns maximum. Section rhythm alternates 110px and 118px vertical padding; dark bands break every third section to pace the scroll.
04
Components
Buttons
Square corners only. No radius anywhere in the system. Transitions 350ms ease on background and border.
Filter chips & status
SelectedDefaultHover
DeliveredUnder ConstructionIn Development
Project card
Delivered
Luxury Custom Homes
Preston Hollow Residence
Dallas, Texas / 8,400 sf
Statistic, eyebrow & field
Section Eyebrow
7+
Years operating
1.42x
Equity multiple
05
Usage Rules
Do
✓Lead with photography and let the grid hold the silence.
✓Keep the metal accent to eyebrows, rules, CTAs, and figures.
✓Set every headline in Libre Caslon Display, every label in Archivo.
✓Break the scroll with a full-width ink band every third section.
✓Publish real numbers with a qualifying footnote beside them.
✓Use square corners and 1px hairlines exclusively.
Don't
✕No gradients as decoration; overlays on imagery only.
✕No rounded corners, drop shadows, or glass effects.
✕No third typeface, and no serif at label size.
✕No stock-photo people or emoji anywhere in the system.
✕No metal accent on large fills or body copy.
✕No stat without a source, date, or disclaimer.