Internal · v1.0 · April 2026

Design System

Single source of truth for LEDGID's visual language, tokens, components, and standards.

LEDGID Design System

v1.0 · April 2026 · Strictly Confidential

Deliverable B — Tokens

Colour Palette

Brand

Orange

#FF7300

Orange Hover

#E55A2B

Orange Subtle

#FEF0E4

Navy

#1A1A2E

Backgrounds

Page

#FAF9F7

Warm

#F3F0EB

White

#FFFFFF

Black

#000000

Text

Primary

#1A1A2E

Body

#555555

Muted

#8A8A8A

Faint

#BDBDBD

Status

Success

#2E7D32

Error

#E53935

Warning

#F57F17

Info

#1565C0

Typography

Type Scale

Primary font: DM Sans · Fallback: Helvetica Neue, Arial, sans-serif

H1 — Hero

Own your identity.

H2 — Section

Two plans. One clear choice.

H3 — Card title

For Seafarers

Section overline

SUBSCRIPTION PLANS

Body (main)

A portable digital identity that consolidates training, certification and sea-time.

Body (dense)

Identity Verification · Digital Profile · Service Licence Access

Meta / caption

billed annually · no hidden fees

Button label

Get Started →

Layout & Grid

Spacing System

Token	Value	Usage
Section padding	py-20 (80px)	All top-level page sections
Card padding	p-8 (32px) / p-10 (40px)	Form cards · Feature cards
Card radius	rounded-2xl (16px)	Marketing cards, order summary
Card radius (sm)	rounded-xl (12px)	Admin cards, form elements
Max width (content)	max-w-5xl (1024px)	Body copy, forms, centred sections
Max width (full)	max-w-7xl (1280px)	Nav, footer, service grids
Column gap	gap-8 (32px)	Card grids, form rows
Base unit	8px	All spacing is a multiple of 8

Components

Buttons

Main action. #FF7300 fill. One per section.

Supporting action. Navy fill.

Tertiary / alternative action.

Unavailable state. Reduced opacity.

Locked feature. Includes lock icon.

Back links, inline nav actions.

Components

Form Inputs

Default state

Focus state

Error state

Invalid email address

Disabled state

Components

Card Variants

Light Card

Default variant

White background · 2px #E0E0E0 border · rounded-2xl · soft shadow.

Dark / Highlighted

Selected / featured

Navy bg · orange border · stronger shadow.

Subtle Tint

Info / callout

Orange subtle bg · no hard border · used for referral banners, callouts.

UX Patterns

Motion & Animation

▸

Entry animation

fadeUp: opacity 0→1, y 40→0

▸

Duration

0.6s

▸

Easing

[0.25, 0.46, 0.45, 0.94]

▸

Stagger

delay: index × 0.15s

▸

Trigger

whileInView, once: true

▸

Button hover

scale: 1.02–1.03

▸

Button tap

scale: 0.97–0.98

▸

Card hover

scale: 1.02 (interactive cards only)

Deliverable B

Design Tokens

export const LEDGID_TOKENS = {
  color: {
    orange:       "#FF7300",
    orangeHover:  "#E55A2B",
    orangeSubtle: "#FEF0E4",
    navy:         "#1A1A2E",
    bgPage:       "#FAF9F7",
    bgWarm:       "#F3F0EB",
    textBody:     "#555555",
    textMuted:    "#8A8A8A",
    borderDefault:"#E0E0E0",
    statusError:  "#E53935",
    statusOk:     "#2E7D32",
  },
  radius: { md: "12px", lg: "16px", full: "9999px" },
  shadow: {
    card:     "0 20px 60px rgba(26,26,46,0.08)",
    cardDark: "0 20px 60px rgba(26,26,46,0.25)",
    nav:      "0 4px 8px rgba(0,0,0,0.12)",
  },
};

Quality Audit

Top 10 UI Inconsistencies

01High

Font inconsistency

DM Sans applied inline only on Subscribe/SignMeUp. Contact/Impressum/Admin use system font via Tailwind default.

02High

Button fragmentation

Subscribe/SignMeUp use raw <motion.button> with inline styles; Contact/Admin use shadcn <Button> — subtly different colours and heights.

03High

Input field split

SignMeUp/Subscribe use custom <input> with onFocus/onBlur hacks; Contact uses shadcn <Input> — different height, radius, and background.

04Medium

Card radius inconsistency

Marketing cards use rounded-2xl; admin/form cards use shadcn default rounded-xl. No enforced rule.

05Medium

Page background fragmentation

Home = #FFFFFF, SignMeUp/Subscribe = #FAF9F7, Contact = gray-100 — three different off-whites.

06Medium

Section heading scale

Some H2s use text-4xl, others text-3xl. No enforced scale rule documented.

07Medium

No empty state for admin table

Zero signups renders headers with blank rows — no empty state illustration or message.

08Low

Nav link mixing systems

Nav links use text-gray-800 Tailwind but hover:#FF7300 is hardcoded — mixed token/inline pattern.

09Low

Footer border-white bug

Footer uses border-white on black bg as top-border — visually invisible leftover.

10Medium

Profile pages mobile layout

grid md:grid-cols-5 collapses awkwardly below 768px; contact buttons overflow on small screens.

Standardisation Plan

Fastest-First Fix Roadmap

Day 1

▸Add fontFamily.sans to tailwind.config.js → instant font unification (1 line)

▸Add LEDGID colour tokens to tailwind.config.js → consistent class usage everywhere

Day 2

▸Create components/ui/LedgidButton.jsx — migrate all motion.button CTAs

▸Create components/ui/LedgidInput.jsx — replace all raw <input> fields

Day 3

▸Standardise page bg — update Contact/Impressum to #FAF9F7

▸Fix footer border-white → border-gray-800

Day 4

▸Add empty state component for AdminSignups table

▸Fix profile pages mobile layout — flex-wrap on contact buttons

Day 5

▸Audit all H2 sizes and enforce 3-level heading scale

▸Document and lock above in DESIGN_SYSTEM.md in repo root