Components

Foundation and core components from the Figma design system. Each component uses semantic tokens and adapts to the surface theme.

Icon

24px grid, 2px stroke, round caps and joins. Stroke follows sem/text so icons invert on Nautical and Black.

Domain icons

sales
marketing
service
operations
record
experience
integration
governance

Cycle icons

discover
design
build
adopt
measure
adjust

Values

sustainability
scalability
sovereignty
stability
security

Status

draft
recommend
approve
independent

Social and UI

linkedin
youtube
tiktok
x-social
mail
phone
chevron-down
chevron-right
chevron-left
close
menu
plus
minus
check
info
alert
lightbulb
play
share

On dark surface

sales
marketing
service
chevron-right
close
menu
check

Tag

Text/XS in white on a Nautical fill, no outline, square corners. Compact padding (space-2 by space-1).

HubSpot Technology Strategy

AccentStroke

A short stroke at 65 degrees, cap height of the adjacent text. Light: Fly blue. Dark: sky. Signal: gradient-signal for StatBand numerals.

40%
40%
40%

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.

Please enter a valid email address

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.

40%
Faster lead response
3.2x
Pipeline velocity

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 more

Digital experience

Websites, portals and self-service tools connected to the platform.

Learn more

Data and integration

Clean data flowing between systems, with governance built in from day one.

Learn more

Post card

Technology

How to use HubSpot smart properties

Smart properties automate data enrichment and reduce manual entry across your CRM.

Staff card

TD

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.

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?
We work with B2B businesses at every stage, from funded startups to established enterprises, typically facing complexity in their customer platforms, data and marketing operations.
How long does a typical engagement last?
It depends on the scope. A platform audit takes two to three weeks. A full CRM rebuild or migration runs three to six months.
Do you work with platforms other than HubSpot?
Yes. We are platform-agnostic and work across the major CRM, marketing automation and data platforms.

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.

01

Discovery call

We learn about your business, your platform and where the gaps are.

02

Platform audit

We map your CRM, automation, data and reporting against best practice.

03

Roadmap and pricing

You receive a clear scope, timeline and fixed price before committing.

04

Build and launch

We deliver in fortnightly sprints with regular check-ins and async updates.