Product screenshot
The first moment
First moment
Copy under its picture.
Text linkAn eyebrow
A section title
A paragraph of the story.
Name SurnameRole, Company “A customer’s own words, as published.”
Derive
Design system
Everything on this page is drawn from src/styles/tokens.css and the primitives
in site.css. Change a token and it changes here and on every page.
Resize the window to see the type steps shrink at 1200, 900 and 480px.
Colour
Text
-
--ink -
--ink-muted -
--ink-faint -
--ink-sage -
--ink-quiet -
--ink-statement-from -
--ink-statement-to -
--ink-statement-em
Greens
-
--green-950 -
--green-900 -
--green-800 -
--green-700 -
--green-600 -
--green-icon -
--green-tint
Grounds and rules
-
--surface -
--surface-soft -
--surface-hover -
--surface-soft-hover -
--surface-sage -
--surface-sage-hover -
--line -
--line-sage
Accents
-
--accent -
--accent-bright -
--agent-blue -
--error
On dark
-
--on-dark -
--on-dark-muted -
--on-dark-faint -
--on-dark-line -
--on-dark-card -
--glass
Type
Figtree. Headings at 500 with tight tracking; body at 400.
-
One sentence, the width of the page.
-
Invoice work that’s ready.
-
Run your group’s spend like one company.
-
Built for groups from day one
-
One set of rules across the group
-
24 Xero files. One Derive inbox.
-
Catch duplicates across the group
-
Accounts payable
-
What does Derive do?
-
Derive brings purchasing, contracts, budgets and accounts payable together across your group.
-
Spend control for multi-entity companies
-
Derive gives every entity the same path:
Space and shape
A 4px base. Sections run --section-top / --section-bottom;
a title sits --head-gap above its body and --head-to-content
above what it introduces.
-
--space-1 -
--space-2 -
--space-3 -
--space-4 -
--space-5 -
--space-6 -
--space-7 -
--space-8 -
--space-9 -
--space-10 -
--space-11 -
--space-12 -
--space-13 -
--space-14 -
--space-15
-
--radius-sm -
--radius-md -
--radius-lg -
--radius-pill
Controls
.button with a ground modifier, then a size. Text links take a trailing arrow. Form fields are .field: label, optional hint, .field-input.
.field — --field-h
.section-head.is-centred
The work multiplies. The team doesn’t.
A centred head over the content beneath it. Max 720px wide.
Who it’s for
.section-head.is-split: title left, body right, on the page’s two columns. Stacks below 900px.
-
.card
A soft panel at
--radius-md. On a soft section it turns white. -
Small title in a card
Cards hold their own padding; the grid between them is
--space-4. -
Card title
Text link
Grounds
.section is white; .is-soft and .is-dark change the ground and recolour the type on it.
.card on .is-soft
Cards turn white here.
.is-dark
Body copy at
--on-dark-muted, strong at full white.
Page components
Sections pages are built from
Each lives in src/components/ and takes its copy as props. Shown here with
sample content. The homepage’s own sections (Integrations, AP Agent, Proof, Who it’s for,
FAQ, closing CTA) take props too and are best seen on the pages that use them.
PageHero — every page but the homepage; the slot takes the picture, and the eyebrow pins to its top; eyebrow={{ lead, rest }} picks out the lead in ink; logos adds a marquee across the foot (see /procurement); the next section takes continued
Eyebrow for multi-entity companies
A page title on two lines at most.
One or two sentences on what the page answers, at body size.
See Derive in actionProduct image
The page’s picture, or a placeholder naming it
PageHero dark — the dark-section green with a Beam behind: one wide shader light beam across the lower third; the pointer warms it (no page uses it at present); the next section drops continued
Eyebrow
A page title on two lines at most.
One or two sentences on what the page answers, at body size.
See Derive in actionProduct image
The page’s picture, or a placeholder naming it
PageHero stacked tag — copy full width over the picture, title left, body over button right; tag boxes the eyebrow in mono with the agent star; title={{ lead, rest }} sets the rest in --ink-quiet; cta={{ label, href }} swaps the button. Here the picture is a PhotoFrame: a wide photo with the slotted picture inset on it (see /ap-agent)
Eyebrow
A lead in ink and the rest of a long title in a quieter ink.
One or two sentences on what the page answers, at body size.
Get a demo
Illustration
The picture set on the photo
FeatureRow — copy and a picture; reverse, ground, list, numbered, link, eyebrow, id
Optional eyebrow
A feature row with a ticked list
Paragraphs come in as an array. The list sits under them.
- First point.
- Second point.
- Third point.
Media placeholder
Names the picture the wireframe calls for, until it exists
Reversed, on soft, numbered
Alternate reverse down a page so pictures zig-zag.
- Extracts.
- Matches.
- Codes.
- Checks.
Product UI
On a soft section the placeholder turns white
StepsCard — a numbered path that leads its section, on a bordered card in a feature row’s picture slot. Shown in a FeatureRow boxed small: the row on a card, the title a step down
When the steps are the picture
The copy runs on the left; the steps sit on a card where the picture would be.
An eyebrow for the path:
- First step.
- Second step, which may run to two lines when it needs to.
- Third step.
CompareTable — a question, then Derive’s answer
A compare table
A split head, then the table. Rows stack below 767px.
| The question | The answer |
|---|---|
| Which entity? | Supplier and entity matched. |
| Who approves? | Routed by entity, amount or category. |
| Not confirmed yet | Copy needed A null answer shows the wireframe’s note. |
FeatureTabs — vertical tabs, the open one’s picture beside them
Feature tabs
The open tab shows its copy and its picture.
Arrow keys move between tabs.
Text linkOne open at a time.
Feature graphic
First capability
Feature graphic
Second capability
Feature graphic
Third capability
ProblemPicker — grouped, numbered problems; the open one with what changes
Problem picker
Pick a problem; Next walks through them in order.
First group
Second group
A first problem.
Where it comes from.
With Derive
What changes with Derive.
Product image
First problem
A second problem.
Arrow keys move between problems.
With Derive
What changes with Derive.
Product image
Second problem
An unconfirmed fix.
A null fix is a gap.
With Derive
Copy needed The wireframe’s note.
Product image
Third problem
ModuleGrid — the four modules as icon cards
Four modules, one platform
-
Accounts payable
One inbox for every entity’s bills, prepared for review.
Learn more -
Procurement
Requests, approvals and purchase orders across the group.
Learn more -
Contracts & renewals
Agreements, variations and renewal dates in view.
Learn more -
Budgets
Entity and GL account budgets at the request and the bill.
Learn more
Statement — a centred head on its own
A statement for a page’s turning point
A short paragraph under it, centred, at most 720px wide.
ScrollStatement — one sentence across the page, fading up whole as it comes on screen; emphasis picks out a phrase, \n forces a break, ground="dark" for the dark green; body adds a line of body copy under it
An eyebrow
One sentence set large across the page, fading into view as it comes on screen.
An optional line of body copy under the sentence.
LatticeGround — a run of sections on one dark ground over the breathing lattice; pictures inside keep their own panels, so they read as cards (see /procurement); pinned holds the lattice to the screen as the run scrolls over it, as on the homepage (see /ap-agent)
Sections on the lattice
Each keeps its own props and rhythm; the ground and the type colour come from the wrapper.
ProofStrip — a quote and a few logos, straight under a hero
24 Xero files. One Derive inbox.
LogoMarquee — logos drifting on a loop; the foot of a white PageHero (logos)
Join the best finance teams running groups
IconCards — cards led by an icon or step; head left, split or centred
Icon cards
-
A short title
One or two lines under it.
-
Another
Columns follow the card count, up to five.
-
And a third
Optional link below.
Text link
SegmentCards — who it’s for, with a picture each
Who it’s for
A split head, then a card per segment.
-
Photo
A photo of the segment
First segment
An optional line.
-
Photo
A photo of the segment
Second segment
-
Photo
A photo of the segment
Third segment
RoleToggle — before and after per role, on a pill switch
Role toggle
-
First role
How it is today.
How it is with Derive.
-
Second role
How it is today.
How it is with Derive.
-
Third role
How it is today.
How it is with Derive.
TwoUp — two moments of one idea, picture over copy
Two-up
Product screenshot
The second moment
Second moment
Copy under its picture.
Bento + BentoCard — several features in one section, two cards to a row, copy over picture; eyebrow, list, link, id per card; wide dark leads the bento, side by side on the lattice; split spans the row, copy left and the picture filling the right half (Procurement); dots lays the dotted grid across the card’s lower half (Contracts); links sets several links in a row; fix calls out what changes “With Derive” on a white panel (the solutions pages); title on the Bento heads the section
Optional section title
A wide, dark card
- A ticked list.
- Then the paragraphs.
Spans the row, picture left, copy right.
Text linkIllustration
Its own panel reads as a card on the dark
A bento card
Copy on top. The picture sits at the card’s foot, so pictures in a row line up.
Text linkIllustration
Pictures in a row share a shape
Problem
A second card
Shorter copy: the problem.
With Derive
What changes with Derive, picked out on its own panel.
Illustration
Its picture
StatGrid — verified outcomes; value: null marks one still needed
Stat grid
-
2x
A label
An optional line on what it means.
-
$25M
A label
-
Copy needed A verified outcome.
QuoteBlock — one quote, centred, with a portrait
“A customer’s own words, as published.”
Name SurnameRole, Company StoryCards — customer stories, from src/data/customers.ts
Story cards
-
Purchasing decisions and AP in one process. Spend requests, supplier management, contracts and accounts payable connected to Xero. Read Metro’s story -
Control and confidence over growing spend. Purchasing, vendor reviews, contracts and AP under one finance-owned process, across NA, EMEA and APAC. Read RecordPoint’s story
StoryCards stacked — one column, photo left; a story with no page is a quiet tile (Customers)
- Purchasing decisions and AP in one process. Spend requests, supplier management, contracts and accounts payable connected to Xero. Read Metro’s story
-
24 Xero files. One Derive inbox. Invoice preparation, checks and search across the group. Story coming soon
StoryHero, StoryVideo, StoryBody + StorySection + StoryQuote — a customer story's long read (Metro Finance)
A customer story’s title
-
2x
A label
-
$25M
A label
-
4 weeks
A label
Name SurnameRole, Company PeopleGrid — the team; portraits are placeholders until photos exist
People grid
-
Photo
Name Surname
Role
Name Surname
One plain line on relevant experience.