01
Restrained
Use space, proportion, and material color before decoration.
Kingstead Design System · 1.0
Quiet authority, expressed consistently.
A practical visual reference for building and extending the Kingstead website in Webflow without losing its editorial character, hierarchy, or responsive composure.
01 · Foundation
Brand principles
02
Editorial
Let typography and pacing carry the sense of quiet confidence.
03
Trustworthy
Prefer direct language, visible structure, and clear expectations.
04
Private
Avoid spectacle; keep the experience measured and discreet.
02 · Identity
Wordmark & color
Estate Green
#142B24
Deep Pine
#0B1C17
Warm Ivory
#F3F0E8
Paper
#FAF9F5
Aged Brass
#A88758
Ink
#20231F
03 · Typography
Editorial serif, precise sans
Everything is in order. Quietly managed.
Georgia carries display headlines and the wordmark in this prototype. Arial supports navigation, labels, body copy, and utility text with concise clarity.
04 · Components
Reusable interface
Home Oversight
Scheduled, documented observations performed with a consistent standard of care.
05 · Responsive rules
Desktop presence, mobile composure
01
Fluid containers
Use a 1280px maximum with 32px page gutters on tablet and 22px on small screens.
02
Adaptive grids
Favor auto-fit grids so cards reflow from four columns to two and then one.
03
Type with limits
Use clamp() for major headlines; body copy remains between 14px and 17px.
04
Quiet stacking
On mobile, reduce complexity before reducing legibility. Preserve generous vertical rhythm.
06 · Webflow build notes
A system designed to transfer cleanly
Use variables for all brand colors, keep class names descriptive, and build new pages from the established header, section, container, card, consultation, and footer patterns. The live page layouts are the working examples.