01 Brand Strategy
Make complexity feel coordinated.
The design system's job is to make multiple disciplines, offer types, and buyer motions feel like one operating model.
Swift's design strategy has one main job: make complexity feel coordinated. The business spans multiple disciplines, multiple offer types, and multiple buyer motions, but the visual system should make all of it feel like it belongs to the same operating model. A buyer should immediately understand that Support, Products, and Platform are connected parts of one commercial system, not separate brands competing for attention.
The design language should lean on strong hierarchy, structured layouts, disciplined typography, restrained motion, and proof-forward composition. Swift should not look like a trendy agency portfolio, and it should not look like a generic SaaS dashboard. It should feel like an embedded business partner: smart, composed, commercially aware, and ready to move.
Case studies, testimonials, workflow blocks, offer architecture, and system diagrams should do as much work as decorative visuals. The broader goal is commercial credibility. Swift sells execution, but it also sells trust in how work gets organized.
Design goals: Establish a consistent visual foundation across Support, Products, and Platform — create a design language that feels operational, modern, and commercially credible — provide reusable direction for pages, campaigns, proposals, and partner-facing materials so Swift looks like one system everywhere it shows up.
02 Creative Direction
Brand perception + visual positioning.
Where Swift sits on key brand dimensions, and how the visual system should be calibrated.
Perception Framework
Category posture
Modernized
Relationship posture
Trusted Advisor
Market stance
Authority
Buyer vibe
Enterprise
Proof style
Quant proof
Story style
Operational
Visual density
Structured
Relationship framing
Third-party
Price framing
Transparent
Audience posture
Business buyer-first
Visual Spectrum
Traditional
Modern
Serious
Playful
Simple
Complex
Exclusive
Inclusive
Luxury
Affordable
Formal
Informal
Masculine
Feminine
Quiet
Loud
Elegant
Rugged
Mature
Youthful
03 Voice & Tone
We're blunt in the best way.
Swift should sound confident, direct, and operationally sharp. Modern and forceful without becoming theatrical.
Swift should sound confident, direct, and operationally sharp. The tone should feel modern and forceful without becoming theatrical. We are not vague, inflated, or consultant-soft. We speak clearly about what is broken, what needs to change, and what it takes to move forward. The voice should feel like a capable operator with a point of view, not a brand trying to sound impressive.
We say what others won't, because that's often what moves the work forward. We speak clearly, directly, and with intention. No dressing things up just to sound smart. If it's messy, we'll name it. If it's broken, we'll fix it. If no one else is providing the hard truths, we will.
Our tone is confident and focused. We cut through the noise to create alignment swiftly.
Swift sounds like
Confident
Direct
Operationally sharp
Proof-forward
Commercially credible
Embedded, not adjacent
Swift does not sound like
Vague
Inflated
Consultant-soft
Theatrical
Trendy agency portfolio
Generic SaaS
04 Logo System
Full lockups + standalone mark.
Use the correct variant based on background. Never modify the mark proportions or colors outside these approved combinations.
Full lockups
Light / Primary
Amber mark + white SWIFT + blue INNOVATION. Use on dark navy or black backgrounds.
White / Reversed
All-white lockup for dark or photographic backgrounds where color variants are not appropriate.
Full Color / Light background
Amber mark + black SWIFT + blue INNOVATION. Preferred for light backgrounds and print.
Black / Single-color
All-black lockup for single-color print, embossing, or co-brand applications.
Standalone mark
Amber on Dark
Black on Light
White on Dark
Amber on Light
Mark construction: The geometric S-shaped mark is built from angular parallelogram strokes. The outer frame is a bold bracket shape. Never stretch, recolor outside the approved palette, or apply effects such as drop shadows, gradients, or outlines to the mark.
Stacked / vertical lockup
Color on Dark
White on Dark
Black on Light
Color on Light
Icon mark (filled, for digital surfaces)
Amber fill
Amber (compact)
Black fill
White fill
05 Color Palette
Named palette — 5 groups + UX.
All colors sourced from the live production codebase. Named per the design system panel.
Neutrals — Snow + Ash
Snow
#FFFFFF
Text on dark, card fills, icon fills
Ash
#A4A4A4
Muted text, inactive UI, carousel dots
Black
#000000
Overlays, single-color print
Off-white
#F3F3F3
Light mode page background
Dark — Grit + Charcoal
Grit
#252525
Dark section backgrounds
Charcoal
#32373C
Secondary dark surfaces
Primary — Sand + Mint
Sand
#52647C
Borders, secondary accents, muted surfaces
Mint
#4464C4
H2 headings, button outlines, links, borders
Secondary — Foam + River
Foam
#FFB347
Primary CTA, logo mark, active states, accents
Foam Alt
#F6AD44
Warm amber variant, borders on Foam elements
River
#3C6971
Dark teal section accents, supporting elements
Tertiary — Dust
Dust
#0D1D2D
Large dark section backgrounds
Dust Deep
#0F1325
Deepest background, body text color on light
UX — Alerts
Alert Dark
#5C0E12 approx
Dark error state, danger backgrounds
Alert
#E31B3D approx
Error, danger, critical alerts
| Name | Hex | Group | Primary use |
|---|---|---|---|
| Snow | #FFFFFF | Neutrals | Text on dark, fills |
| Ash | #A4A4A4 | Neutrals | Muted / inactive |
| Grit | #252525 | Dark | Dark bg |
| Charcoal | #32373C | Dark | Secondary dark surface |
| Sand | #52647C | Primary | Borders, muted accents |
| Mint | #4464C4 | Primary | Blue headings, outlines, links |
| Foam | #FFB347 | Secondary | CTA, logo mark, active |
| Foam Alt | #F6AD44 | Secondary | Amber borders |
| River | #3C6971 | Secondary | Teal accents |
| Dust | #0D1D2D | Tertiary | Dark section bg |
| Dust Deep | #0F1325 | Tertiary | Deepest bg, body text |
| Alert | #E31B3D | UX | Error / danger |
06 Typography
Four-font system with clear hierarchy.
Each typeface has a specific job. Lexend leads. Archivo labels. DM Sans carries the content. Inter is a theme fallback only.
Forge a
New Path.
New Path.
Solutions · What's next
Your Infrastructure to Build What's Next.
An On-Demand Team, Ready When You Are.
Swift embeds inside your business as Agency Direct or as a White Label partner, to create the conditions forward momentum demands.
Read more about how we work →
| Tag | Typeface | Weight | Role |
|---|---|---|---|
| H1 | Lexend | 700 | Hero display, page titles |
| SPAN | Archivo | 700 caps | Eyebrow labels, section markers |
| H2 | DM Sans | 700 | Section headings (Mint #4464C4) |
| H3 | DM Sans | 600 | Subsection headings |
| P | DM Sans | 400 | Body copy |
| A | DM Sans | 400 italic | Links, captions |
| BTN | DM Sans | 700 | Buttons (primary + secondary) |
Letter-spacing on all headings: -0.035em
Body line-height: 1.65
Base font-size: 18px (desktop)
Body line-height: 1.65
Base font-size: 18px (desktop)
Google Fonts: All four families are loaded from Google Fonts. The exact weights requested are documented in the brand-scrape reference. Inter is loaded as a theme fallback for headings; the primary display face is always Lexend.
| Family | Weights loaded | Primary role |
|---|---|---|
| Lexend | 300, 400, 500, 700, 800 | H1 / hero display |
| Archivo | 400, 500, 600, 700, 900 (+ italics) | SPAN labels, eyebrows |
| DM Sans | 400, 500, 600, 700, 800 (+ italics) | H2–H6, body, buttons |
| Inter | 300, 700 (+ italics) | Theme fallback only |
07 Button System
Three button variants.
Primary uses Foam. Secondary uses Mint outline. Ghost is for low-emphasis actions.
| Variant | Background | Border | Text | Use |
|---|---|---|---|---|
| Primary | Foam #FFB347 | none | Dust Deep #0F1325 | Main CTA, primary action |
| Secondary | transparent | Mint #4464C4 | Snow #FFFFFF | Supporting CTA, secondary action |
| Ghost | transparent | Charcoal #32373C | Ash #A4A4A4 | Tertiary / low-emphasis |
Primary button detail: The Foam button uses a
box-shadow: 0 4px 0 #A87120 drop-down shadow to create a 3D pressed-key effect. This is a signature Swift UI element applied to primary CTAs.
08 Gradients
Dark-first depth and glow system.
Gradients create depth on dark backgrounds. Foam radial glows draw the eye toward CTAs. All values sourced from the live site.
Gradient principle: All gradients start from Dust (#0D1D2D) or Dust Deep (#0F1325). Never use a light-to-dark gradient — all direction is dark-to-slightly-less-dark, with color glow added via radial overlay. The Foam glow is the strongest color statement; use it sparingly (once per page section maximum).
09 Icon System
Line icons, 1.5–2px stroke, geometric.
The site uses a custom line icon set styled as thin-stroke geometric shapes on dark backgrounds. Icons appear in Snow white or Foam amber. Default size: 20–24px at 1:1 ratio.
Analytics
Speed
Grid / Apps
Team
Performance
Security
Broadcast
Revenue
Integrations
Product
Checkmark
Arrow →
| Property | Value | Notes |
|---|---|---|
| Stroke weight | 1.5–2px | 1.75px default; 2px for large/hero |
| Size | 20–24px | 16px minimum (small UI); 48px+ for feature icons |
| Style | Line / outline | No filled icons except the logo mark |
| Color (dark bg) | Snow #FFFFFF or Foam #FFB347 | Foam for primary feature icons, Snow for utility |
| Color (light bg) | Dust Deep #0F1325 or Mint #4464C4 | Mint for interactive/CTA icons |
| Corner style | round (stroke-linecap: round) | Matches the mark's rounded geometry |
Icon library: The site uses Feather Icons and custom geometric SVG line icons matching the mark's angular-with-rounded-corner aesthetic. Always use
stroke-linecap="round" and stroke-linejoin="round". Amber (Foam) icons signal primary features; white icons are for supporting/utility context.