Platform Reference

Prime Ledger Design System

Comprehensive guide to PrimeLedger's design language, components, and patterns. Every component shown here is production-ready with copy-paste HTML/CSS snippets.

Color Palette

The PrimeLedger palette is built around a teal primary brand color, with supporting neutrals and semantic colors for charts and status indicators.

Primary Colors

Teal
--teal
#0388A6
Navy
--navy
#081F34
Card
--card
#0a1b2e

Semantic Colors

Success
--green
#10b981
Danger
--red
#ef4444
Warning
--yellow
#f59e0b
Cyan
--cyan
#06b6d4
Purple
--purple
#a855f7
Orange
--orange
#f97316

CSS Custom Properties

Variable Purpose Dark Mode Light Mode
--teal Primary accent, interactive elements #0388A6 #0388A6
--navy Page background #161616 #f5f5f5
--card Elevated surface, cards #1e1e1e #ffffff
--border Dividers, subtle boundaries rgba(255,255,255,0.08) rgba(3,136,166,0.1)
--white Primary text, headings #f5f5f5 #1f2937
--bone Body text #ebebeb #374151
--mid Secondary text, labels #8b8b8b #6b7280

Typography Scale

All text uses Inter as the primary font family with a modular scale for hierarchy and readability.

Display Large (2.5rem)
Strategic North Star
font-size: 2.5rem; font-weight: 700; line-height: 1.2;
Heading 1 (2rem)
Design System Title
font-size: 2rem; font-weight: 700; line-height: 1.2;
Heading 2 (1.5rem)
Section Heading
font-size: 1.5rem; font-weight: 700; line-height: 1.3;
Heading 3 (1.25rem)
Subsection
font-size: 1.25rem; font-weight: 700; line-height: 1.3;
Body Large (1rem)
This is the primary body text size used for main content paragraphs and descriptions throughout the platform.
font-size: 1rem; font-weight: 400; line-height: 1.6;
Body (0.95rem)
Standard paragraph text used in cards and panels.
font-size: 0.95rem; font-weight: 400; line-height: 1.6;
Small (0.875rem)
Secondary text and metadata labels
font-size: 0.875rem; font-weight: 400; line-height: 1.5;
Extra Small (0.75rem)
LABEL / CATEGORY
font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;

Font Families

Primary Font

Inter
Used for all UI text: headings, body, labels

Monospace Font

JetBrains Mono
Used for code blocks and data values

Spacing Scale

All spacing values use a consistent scale based on 0.25rem (4px) units.

xs
0.25rem (4px)
sm
0.5rem (8px)
md
0.75rem (12px)
lg
1rem (16px)
xl
1.5rem (24px)
2xl
2rem (32px)
3xl
3rem (48px)

Common Usage

Element Padding Margin Gap
Card 1.5rem 1.5rem —
Button 0.75rem 1.5rem — 0.5rem (icon + text)
Form Field 0.75rem 0 0 1rem 0 —
List Item 0.75rem — 1rem
Section — 0 0 3rem 0 —

Card Component

Cards are the primary container for grouped content. They have a subtle border and card background.

Standard Card

Card Title

This is a standard card with content. It has a subtle border and teal-tinted background.

<div style=" background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; "> <h3 style="color: var(--white); margin: 0 0 0.75rem;">Title</h3> <p style="color: var(--mid);">Content goes here</p> </div>

Card with Header

Header Section

Card with a dedicated header section separated by a border.

Buttons

Primary button is teal with white text. Secondary buttons have teal text on transparent background.

Button Styles

<!-- Primary --> <button style=" padding: 0.75rem 1.5rem; background: var(--teal); color: white; border: none; border-radius: 6px; cursor: pointer; ">Primary</button>

Badges & Status Indicators

Badges are small, inline status labels with colored backgrounds.

Badge Variants

Active Blocked Pending Info

Tables

Data tables with consistent styling for headers, rows, and hover states.

Name Status Value
Design System Active Complete
Components Pending In Progress

Tab Navigation

Tabbed interfaces with underline-style active indicator and smooth transitions.

Tab content appears here. Active tab has teal underline.

Form Elements

Consistent styling for inputs, selects, and textareas with teal focus states.

Text Input

Textarea

Select

KPI Cards

Key Performance Indicator cards display metrics with label, large value, and optional subtext.

Active Deals
12
+2 this month
Pipeline Value
$2.4M
Growing 18%

Status Indicators

Visual status indicators using colored dots, bars, and semantic colors.

Status Dot

Active
Pending
Blocked

Progress Bar

Completion 75%

Responsive Breakpoints

The platform uses fluid, mobile-first CSS with strategic breakpoints for tablets and desktops.

Breakpoint Screen Size Common Devices Usage
base 0px - 640px Mobile phones 1-column layout, full-width cards
md 768px+ Tablets 2-column layouts, sidebars
lg 1024px+ Laptops 3-column grids, full sidebar
xl 1280px+ Large screens Wide layouts, dashboards