Brand Guide | Fusion Link

Logo & Identity

The Fusion Link mark and its usage guidelines.

On Light Background

On Dark Background

Brand Mark Details

ShapeSquare, rounded corners

Background

#bfa040

Foreground

#fefefe

MotifInterlocking grid

TaglineMulti-Vendor Driver Marketplace

Available Sizes

16px

32px

48px

64px

96px

128px

Color Palette

OKLCH-based color system with automatic dark mode support. All colors are defined as CSS custom properties.

Core Colors

Primary

Purple — CTAs, links, focus rings

--primary

Secondary

Subtle backgrounds, secondary actions

--secondary

Accent

Hover states, highlights

--accent

Muted

Subdued text, disabled states

--muted

Destructive

Errors, danger actions, delete

--destructive

Status Colors

Success

Confirmations, completed states

--success

Warning

Cautions, pending states

--warning

Info

Informational messages

--info

Assigned

Job assignment status (magenta)

--assigned

Destructive

Errors, cancelled, rejected

--destructive

Surface & Layout Colors

Background

Page background

--background

Foreground

Primary text color

--foreground

Card

Card surfaces

--card

Border

Dividers, outlines

--border

Ring

Focus indicator ring

--ring

Chart Colors

--chart-1

--chart-2

--chart-3

--chart-4

--chart-5

Brand Accent — Logo Gold

Gold

#bfa040

Used exclusively in the logo mark

Typography

Geist font family for clean, modern readability. System font stack as fallback.

Font Families

Sans Serif — Primary

Geist Sans

var(--font-geist-sans)

Monospace — Code & Data

Geist Mono

var(--font-geist-mono)

Type Scale

4xlDisplay Heading

3xlPage Title

2xlSection Heading

xlSubsection

lgCard Title

baseBody Text

smSecondary / UI Text

xsCaption / Meta / Badge

[11px]Section Label

Font Weights

Light300 — font-light

Regular400 — font-normal

Medium500 — font-medium

Semibold600 — font-semibold

Bold700 — font-bold

Rendering

Antialiasing

Subpixel smoothing on all platforms via antialiased

OpenType Features

"rlig" 1, "calt" 1 — contextual ligatures enabled

Text Rendering

optimizeLegibility for precise kerning

Spacing & Border Radius

Consistent spacing scale and rounded corner tokens.

Border Radius Tokens

rounded-sm

--radius-sm = 4px

rounded-md

--radius-md = 6px

rounded-lg

--radius-lg = 8px (base)

rounded-xl

--radius-xl = 12px

rounded-full

--radius-full = 9999px

Shadow Scale

shadow-2xs

Micro elevation

shadow-xs

Input fields

shadow-sm

Cards, default

shadow-md

Hover states

shadow-lg

Dropdowns, popovers

shadow-xl

Modals, dialogs

shadow-2xl

Toasts, overlays

Buttons

Six variants and three size options built with CVA.

Variants

Sizes

With Icons

States

Badges

Status indicators and labels with semantic color coding.

DefaultSecondaryOutlineDestructiveSuccessWarningInfo

Usage Examples

Completed Pending In Progress Cancelled Featured

Cards

Primary content container with header, content, and footer slots.

Standard Card

With title and description in the header.

Cards use bg-card background, rounded-xl corners, and shadow-sm elevation.

Interactive Card

Hover to see elevation change.

John Driver

Active since 2024

Verified4.9 Rating

Job Card Preview

Example of a job listing card pattern.

London HeathrowThe Savoy Hotel

Mar 20, 202614:30

£85.00

Form Elements

Input components for collecting user data.

Text Inputs

Default Input

Disabled Input

With Icon

Other Controls

Textarea

Dark Mode

Toggle the theme

Notifications

Push notifications

Iconography

Lucide React icons at consistent sizing. Default: size-4 (16px) for inline, size-5 (20px) for standalone.

Settings

User

Bell

Heart

Star

Calendar

Clock

MapPin

Phone

Mail

Link

External

Plus

Minus

Check

Copy

Eye

EyeOff

Chevron

Icon Sizes

size-312px

size-3.514px

size-416px

size-520px

size-624px

size-832px

Loading & Empty States

Feedback patterns for asynchronous content and empty views.

Spinner

Skeleton Loading

‌

Empty State

No jobs found

Try adjusting your filters or check back later.

Motion & Animation

Subtle, purposeful motion for interactive feedback.

Duration

150ms

Standard interactive transition

Easing

cubic-bezier
(0.4, 0, 0.2, 1)

Ease-out curve for natural feel

Properties

color, background,
border, shadow, opacity

Transitioned on interactive elements

Library

tw-animate-css

Dialog enter/exit, fade, slide

Design Tokens Reference

Quick reference for the most commonly used tokens.

Token	CSS Variable	Usage
Primary	`--primary`	CTAs, links, active states
Background	`--background`	Page background
Card	`--card`	Card and panel surfaces
Border	`--border`	All borders and dividers
Ring	`--ring`	Focus indicators
Muted	`--muted`	Disabled/subtle backgrounds
Muted Foreground	`--muted-foreground`	Secondary text, placeholders
Radius	`--radius`	Base corner radius (0.5rem)
Shadow SM	`--shadow-sm`	Default card elevation
Shadow MD	`--shadow-md`	Hover/raised elevation
Font Sans	`--font-geist-sans`	All UI text
Font Mono	`--font-geist-mono`	Code, data values

Accessibility

Built-in accessibility features and standards.

Focus Visible

2px solid ring with 2px offset on keyboard navigation. Color matches --ring (primary).

Color Contrast

OKLCH color space ensures perceptually uniform contrast across light and dark themes.

Semantic HTML

Radix UI primitives provide correct ARIA roles, keyboard navigation, and screen reader support.

Selection Color

Custom ::selection uses primary at 20% opacity for readable highlighted text.

Error States

aria-invalid triggers destructive ring styling for clear error feedback.

Motion Preferences

tw-animate-css respects prefers-reduced-motion media query.

Fusion Link Brand & Design System — Built with Tailwind CSS v4, Radix UI, and Lucide Icons