LeapForce v1.0
Extracted from LeapForce.fig

Foundations, components and page layout

A near-black canvas, Inter at six steps, one blue-to-orchid accent pair and 20px glass cards. Every number here is transcribed from the source file — nothing is rounded to a grid.

rgb(13,13,13) ground Inter 400 – 600
01Color

Ground, text, and a two-stop accent

Ground & surfaces
Groundrgb(13,13,13)
Inkrgb(0,0,4)
Panelrgb(21,20,22)
Raisedrgb(23,22,29)
Glasswhite 8% · blur 53
Text
Primaryrgb(255,255,255)
Secondaryrgb(211,211,211)
Bodyrgb(163,168,184)
Navrgb(182,189,208)
Dimrgb(135,134,147)
Accent
Signal bluergb(77,95,248)
Coralrgb(238,107,96)
Rosergb(227,128,138)
Violetrgb(149,39,249)
Magentargb(190,69,185)
Orchidrgb(225,141,245)
Plumrgb(106,59,138)
Amberrgb(255,179,31)
Emberrgb(238,112,45)
Icergb(212,227,255)
Lines & gradients
Hairlinergba(75,75,75,0.47)
Control edgergba(255,255,255,0.44)
Mark gradient131.309deg · 23.8% / 59.93%
Sweep90deg · full stops
02Typography

Inter, six steps, one italic voice

Display
Simplify your workflow Medium 500 · 60 / 68 · -0.003em
Statement
“We bring your vision to life” Semibold italic 600 · 41 / 48
Section
Premium and exclusive app integration Medium 500 · 40 / 48 · -0.003em
Feature
Efficient task management Semibold 600 · 22 / 30
Card
Reliable performance Medium 500 · 20 / 28
Body

Our SaaS platform helps businesses streamline workflows, automate tasks, and scale operations with powerful cloud-based tools designed for efficiency and growth.

Regular 400 · 16 / 24 · 0.001em · rgb(163,168,184)
Nav
Home · About us · Pages · Blog · Contact Regular 400 · 15 / 24 · uppercase
Meta & micro
400+ team members · 3500+ our clients Trusted worldwide 14 / 20 regular · 10 / 14 semibold tracked
03Surfaces, radius, spacing

Three surfaces, four corners

Card

20px shell at white 5%, 10px inner panel on rgb(21,20,22).

Glass tile

122px integration tile: white 8%, blur 53, 1px white 15% inset.

Raised

Opaque rgb(23,22,29) for menus, dialogs and the footer band.

Radius
6 · button
10 · panel
20 · card
30 · banner
100 · pill
Spacing
10 — icon gap, label stack
20 — grid gutter, card gap
23 — button padding, row gap
30 — card padding
80 — page margin on the 1920 canvas
120 — section rhythm
04Buttons & controls

White is the primary action

Learn more
New Automation Glass Outline Beta
Billing cycle
Accordion row
Workflow automation apps
05Cards & data

Numbers sit big, labels sit quiet

LeapForce
98% Reliable performance

Consistent, dependable operation across real-world workloads.

15m Projects completed

Thousands of teams shipping on the platform every quarter.

Guarded controls
43+ Intuitive design

Patterns that open quickly and stay legible on a dark canvas.

PlanSeatsMonthly
Starter1 – 5$19
Growth6 – 40$49
Scale40+$120
Invite your team

Dialogs sit on the raised surface with a 1px white edge — never a shadow alone.

+18 in workspace
06Page layout

The 1920 canvas, block by block

80px page margin, a 1290 content band, 20px gutters and 120px between sections. See it assembled on Home One

01Topbar

Sticky, 45px tall, white primary at the right edge.

02Hero

Centered display with one italic accent word, two buttons.

03Product frame

20px shell, 10px inner panels, 1fr / 2fr split.

04Statement

Kicker plus a 41px semibold italic quote, centered.

05Stat row

Three equal cards, 40px numbers over 20px labels.

06Split

Copy left, live panel right, two proof rows maximum.

07Tile row

122px glass tiles, 20px gaps, wrapping centered.

08Capabilities

19px rows; the open row takes the blue tint.

09CTA

30px banner, gradient on the 1px edge only.

10Footer

Ink band, four columns, legal line outside the card.

07Motion

Everything arrives once, from below

Reveal

Add data-reveal to any block: 28px rise, 0.75s, cubic-bezier(0.22, 0.61, 0.36, 1), fired once at 6% visibility.

Stagger

Add data-reveal-group to a row and each child inherits a 90ms step — no per-element markup.

Topbar

Past 40px the header tightens to 16px padding and takes a blurred rgba(13,13,13,0.72) ground.

Reduced motion

Under prefers-reduced-motion every reveal renders in place with no transition.