Design System

FAST

The brand & UI foundations for The Fast Procedure — a clinical, airy, trustworthy design language. Click any color to copy its value; jump to the live UI kit and docs under Resources.

Introduction

Calm · clinical · cool teal/navy

Fast is a non-surgical, probe-based treatment for hemorrhoid relief, marketed to both patients and healthcare providers. The system reads as light and sterile — lots of white space, a monochromatic teal/navy palette, flat tinted panels, hairline borders, restrained 4px radii, and thin-line icons. No gradients, no emoji, no hype.

How to use this page. Foundations and components below are live specimens you can lift directly. Everything is driven by colors_and_type.css. The full interactive recreation of the marketing site lives in the Website UI Kit (Resources).

Colors

Click a swatch to copy
Primary & ink
Sage & light blues
Neutrals & system

Typography

Instrument Sans · Lato · Mulish
Instrument Sans
Display / Primary
Headlines · Medium 500 · tight tracking · line-height 100%
Lato
Body / Secondary
Body copy · Regular & Bold · airy line-height
Display scale
Hero · 56 / 500The Fast Procedure
H2 · 40 / 500Stages Treated
H3 · 32 / 500Patient Inquiries
H4 · 24 / 500Take the Next Step
Body & eyebrows
Lead · Lato 20 / 32 — A modern alternative to traditional ointments or painful surgery.
Body · Lato 16 / 24 @85% — Rather than cutting or removing affected tissue, the treatment uses an advanced probe to apply thermal energy to the source.
The Innovative Difference Trusted & Proven Successful
Eyebrow · Lato 14 tracked teal  ·  Trust label · Mulish 700 tracked ink@60%

Spacing & Radii

4px base rhythm
Spacing scale
Corner radii & elevation
4px
buttons · fields · cards
8px
spec cards
Soft lift
used sparingly

Iconography

Inline SVG · thin line · teal
Phosphor-style thin line glyphs delivered as inline SVG (ui_kits/website/Icon.jsx) — no webfont. The clock-countdown is the brand's actual Figma icon. Default stroke is teal #08979F, set via currentColor.

Buttons

Hover / press states are live

Form fields

52px · 4px radius · cool border
Full Name
Email Address
Preferred Language

Benefit & stage cards

Hairline cards · flat mist panels
Benefit rows
Stage cards
Stage 2: Mild Prolapse
Comes out during bowel movements but retracts on its own.
Stage 3: Manual Retraction
Must be manually pushed back inside the anal canal.

Imagery & trust badges

Luminosity-blended · regulatory marks
Trusted & Proven Successful
FDACEEU-MDR
Photography is desaturated toward the palette via mix-blend-mode: luminosity over sage — never full-color. Trust badges sit small, in navy, under the "Trusted & Proven Successful" label.

Kit & docs

Website UI Kit →Interactive recreation of the marketing site — Home, The Procedure, Contact, with a working inquiry form. README →Brand context, content fundamentals, visual foundations, iconography, and the full file manifest. colors_and_type.css →Drop-in CSS custom properties — raw + semantic colors and the type scale. SKILL.md →Agent-Skill front-matter so this system works as a downloadable Claude skill.
Copied