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.
CookieBanner
Fixed bottom bar with accept and manage buttons. Shown here inline for demonstration.
Media and diagrams
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.
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.
Manual
Teams rely on spreadsheets and manual processes.
Assisted
Core CRM and automation in place, but fragmented.
Integrated
Connected systems with clean data flowing between them.
Autonomous
AI-driven insights and self-optimising processes.
Article components
Callout
Info, Tip and Warning variants with icon and coloured background.
SocialShare
Row of share buttons: LinkedIn, X, email, copy link.