Components
Foundation and core components from the Figma design system. Each component uses semantic tokens and adapts to the surface theme.
Logo
Letterforms follow sem/heading; the slash is color/sky. Scale proportionally. Height 32px in SiteHeader desktop, 24px on mobile.
Icon
24px grid, 2px stroke, round caps and joins. Stroke follows sem/text so icons invert on Nautical and Black.
Domain icons
Cycle icons
Values
Status
Social and UI
On dark surface
Tag
Text/XS in white on a Nautical fill, no outline, square corners. Compact padding (space-2 by space-1).
AccentStroke
A short stroke at 65 degrees, cap height of the adjacent text. Light: Fly blue. Dark: sky. Signal: gradient-signal for StatBand numerals.
FeatureIcon
48px icon with a filled light blue slash behind it at 65 degrees. sem/feature-slash: light blue 100 on light, sky on dark.
Button
Primary: Fly blue fill. Secondary: 2px border in sem/secondary-border, inverts on hover. Square corners. Focus: 2px ring, 2px offset.
Primary
Secondary
On Nautical
Choice
Checkbox (square) and Radio (round). White control; selected fills with sem/primary. 22px control, label in Text/Body.
Input
Text and Select fields. White fill on every surface. 1px border, 2px on focus (Fly blue) or error (sem/error). 48px minimum height, square corners.
DotField
24px tile with one 1.3px dot, repeating to fill any size. Pitch and dot size never scale. Forms: Linear, Radial, Step top, Step bottom.
Linear, Light
Radial, Light
Linear, Dark
Step top, Light
Step bottom, Light
SectionHeader
Heading/S with optional intro. Fill width, capped at layout/title-measure (832px). Align: Left (default), Centre, Right.
Structured thinking for B2B growth
Fly rebuilds how growing organisations run their revenue systems, from the record up.
Structured thinking for B2B growth
Fly rebuilds how growing organisations run their revenue systems, from the record up.
Stat
Value in Heading/M with an accent stroke at cap height. Turn off the stroke when numerals take a gradient fill.
Card
Feature, Post, Case study and Staff variants. Cards Fill and wrap with min layout/card-min so grids reflow 3, 2, 1.
Feature cards
System of record
One source of truth for every customer record, owned by the team that uses it.
Learn moreData and integration
Clean data flowing between systems, with governance built in from day one.
Learn morePost card
How to use HubSpot smart properties
Smart properties automate data enrichment and reduce manual entry across your CRM.
Staff card
Tim Dove
Managing Director
CardGrid
Wrapping auto-fit grid using layout/card-min. Three across at 1440, two at 768, one at 375. Resize to see reflow.
Demonstrated in the Card section above.
Breadcrumbs
Text/SM links in sem/link separated by 16px chevrons. The current page is sem/text-muted and not a link. Wraps on mobile.
Pagination
Full: numbered pages with ellipsis. Compact: "Page X of Y" for mobile. 40px square targets, square corners.
Full
Compact
Accordion
Question in Text/LG with plus/minus toggle, answer in Text/Body muted, sem/border hairline below. Keyboard: Enter or Space toggles.
What type of clients does Fly work with?
How long does a typical engagement last?
Do you work with platforms other than HubSpot?
Steps
Numbered engagement process. Square number tiles in sem/accent-bg. Steps fill and wrap (min 240px): four across on desktop, two on tablet, stacked on mobile.
Discovery call
We learn about your business, your platform and where the gaps are.
Platform audit
We map your CRM, automation, data and reporting against best practice.
Roadmap and pricing
You receive a clear scope, timeline and fixed price before committing.
Build and launch
We deliver in fortnightly sprints with regular check-ins and async updates.
Section components
SiteHeader
Black surface. Desktop: logo, nav items, CTA button. Mobile: logo and menu toggle. Switches at 1024px.
Hero
Aurora gradient, Playfair Display heading, intro text, buttons and image slot. Full width, min height from layout-hero-min-height.
Marketing that earns its place
Fly rebuilds how growing organisations run their revenue systems, from the record up.
PageHeader
Logo sweep or Swirl background. Heading and optional intro.
Logo sweep
How we work
A structured approach to building platforms that drive real growth.
Swirl
GradientSurface
Wrapper for Aurora, Deep water, Logo sweep and Shallows backgrounds. Sets the appropriate theme mode automatically.
Content on Aurora surface
Content on Shallows surface
FeatureList
Hairline: two columns with rule-grey top borders. Links: three columns with link text. Each title led by a thick 65deg slash.
Hairline
CRM architecture
Data model, lifecycle stages, routing and reporting, from a single source of truth.
Marketing automation
Lead scoring, nurture sequences and attribution modelling that connects spend to revenue.
Sales enablement
Pipeline management, deal automation and forecasting your leadership team can trust.
Custom integrations
Bespoke integrations that keep data clean and processes fast across your stack.
Links
Website UX and Engineering
New builds engineered for speed, scalability and better journeys.
Learn moreTextPlusImage
Text beside a slash-cropped photograph. Image Right or Left on desktop, stacks on mobile.
Customer Platforms (CRM)
Platforms should work harder than you do. We make sure your CRM, marketing automation and sales technology is built for greater capability and improved efficiency.
Learn moreTestimonial
Featured: full-width trust band with quote, attribution, result panel and carousel controls. Compact: card variant. Dark and Light tones.
Featured, Dark
"They integrated themselves into the right parts of our operation and delivered solid results against our objectives."
Compact
"Their deep HubSpot expertise transformed how we handle lead routing across three regions."
"Their deep HubSpot expertise transformed how we handle lead routing across three regions."
ProofStrip
Figures, Figures on Shallows and Icons variants. Supporting proof on light surfaces with an optional heading.
CtaPanel
Panel: Aurora background with DotField and Signal hairline border. Inline: lighter mid-page prompt between hairlines.
Panel
Ready to rebuild how you run
See what's possibleInline
Ready to start?
Talk to our team about your platform.
ClientLogos
Grid and Carousel layouts. Light tone on white/mint/sand surfaces, Dark on Nautical and Black.
Grid, Light
Grid, Dark
StatBand
Deep water gradient with animated canvas ribbons. 44 lines on desktop, 28 on mobile, offset periods (11s and 13s). Pauses off screen.
VideoBlock
16:9 video player with poster image and play button.
See Fly in action
NewsletterForm
Email input, consent checkbox and subscribe button. Max width 40rem.
SteppedSection
Alternating white and mint steps with DotField accents. Each step has a number, title and body.
Discover the landscape
We map your current platforms, data flows and team structure.
Design the blueprint
A clear architecture that solves today and scales for tomorrow.
Build in sprints
Fortnightly delivery cycles with regular check-ins.
PricingColumns
Wrapping tier cards with features and buttons. The highlighted tier gets a 2px primary border.
Platform audit
Understand where you are today.
- CRM architecture review
- Data quality assessment
- Integration mapping
- Recommendations report
Build programme
Structured delivery against a clear scope.
- Dedicated project team
- Fortnightly sprints
- Migration and integration
- Training and handover
- 90-day support
Ongoing support
Continuous improvement after launch.
- Quarterly reviews
- Priority support
- Platform optimisation
- New feature rollouts
SlashImage
65deg slash-cropped photograph. Desktop: slash edge on the side facing the text. Mobile: square, full width, no slash.
CaseStudyHeroCard
Full-bleed client image with company name and result figures over a 95% Nautical gradient. WCAG AA contrast guaranteed.
CRIF / Credit Passport
CookieBanner
Fixed bottom bar with accept and manage buttons. Shown here inline for demonstration.
Media and diagrams
Illustration
160px spot illustrations, 6px line, round caps and joins. Each uses its matching icon metaphor with one supporting element. Filled light blue slash behind, as on FeatureIcon. Never mixed with photography.
On Nautical
ImageTreatment
Sky tint: grayscale + contrast 1.15 + multiply over sky + Nautical lighten. Light blue tint: same over light blue. Black and white: grayscale + contrast 1.05.
Sky tint
Light blue tint
Black and white
AmbientSwirl
Three Logo sweep glows drifting up to 60px (30px mobile), rotating up to 10deg, breathing 8%, on a 16s loop. Transforms only. Paused off screen, static under reduced motion. White surfaces only.
CycleDiagram
Stages positioned on an orbit ring. Collapses to vertical on mobile. Orbit rings rotate slowly in alternating directions.
Govern
Govern runs around every stage
StackMap
Core tile with dashed connectors to surrounding items. Tree layout on mobile.
AutonomyTiers
Vertical tier cards with a progress line and checkpoints. Tiers rise in sequence on entry.
Promoted on evidence
Draft
The agent prepares work for a person to review.
Recommend
The agent proposes an action and a person decides.
Act with approval
The agent acts once a named person approves.
Act independently
The agent acts within set limits, monitored continuously.
Promoted on evidence
Draft
The agent prepares work for a person to review.
Recommend
The agent proposes an action and a person decides.
Act with approval
The agent acts once a named person approves.
Act independently
The agent acts within set limits, monitored continuously.
Article components
Callout
Info, Tip and Warning variants with icon and coloured background.
Prose
Styled article body. Headings, paragraphs, lists, blockquotes and images all styled consistently within the content measure.
Building a modern CRM architecture
A well-structured CRM is the foundation of every revenue operation. Without it, teams waste time on manual processes and work from incomplete data.
Why architecture matters
The data model defines how information flows between teams. A clean lifecycle, clear ownership and consistent naming conventions make reporting reliable and automation predictable.
A CRM is only as good as the data it holds and the processes it supports.
- Define clear lifecycle stages
- Establish data ownership by team
- Automate where it reduces manual effort
Table
Responsive table with header styling and cell borders.
| Platform | Users | Status |
|---|---|---|
| HubSpot | 2,400 | Active |
| Salesforce | 800 | Migration planned |
| Marketo | 150 | Decommissioned |
AuthorBio
Author card with avatar (or initials), name, role and short bio.
SourcesList
Numbered reference list with optional links. Sits below the article body.
Sources
- HubSpot State of Marketing Report 2026
- Gartner CRM Market Guide, Q3 2026
- Fly internal platform audit data, 2024 to 2026
TableOfContents
Sticky sidebar navigation for article pages. Highlights the current section on scroll.
SocialShare
Row of share buttons: LinkedIn, X, email, copy link.