01. Color Architecture

Base: #55679C (OKLCH Interpolation)

#F4F6FA

100

#E8EBF5

200

#C5CEE6

300

#A3B1D6

400

#8094C7

BASE

500

#55679C

600

#44527D

700

#333E5E

800

#22293F

900

#11151F

Semantic Palettes

Danger #EF4444

Warning #F59E0B

Success #10B981

Neutral #64748B

Text Hierarchy

Text Primary

#0F172A (Slate 900)

Main body text, headings

Text Secondary

#475569 (Slate 600)

Subtitles, captions

Feedback States

Success

Warning

Danger

Info

Pending

Typography & Element Colors (Neutral Palette)

Element	Tailwind Class (Light)	Tailwind Class (Dark)
Title	text-neutral-900	dark:text-neutral-100
Legend Text	text-neutral-900	dark:text-neutral-100
Tick Label	text-neutral-500	dark:text-neutral-400
Reference Line	bg-neutral-400	dark:bg-neutral-500
Gridline	border-neutral-200	dark:border-neutral-800

02. Typographic Scale

Font: Inter (Variable)

.text-heading-xxl
32px / 36px / 700

Brand and marketing Design Systems

Context: Brand and marketing content

.text-heading-xl
28px / 32px / 700

Sustainability Reporting and Accelerated Focus on ESG Adoption

Context: Landing page Big text

.text-heading-l
24px / 28px / 700

Dashboard Configuration

Context: Page titles inside app

.text-heading-m
20px / 24px / 700

Confirm Deletion

Context: Large components (Modals)

.text-heading-s
16px / 20px / 700

Feature Flags

Context: Small components (Flags)

.text-heading-xs
14px / 20px / 700

USER SETTINGS

Context: Small components

.text-heading-xxs
12px / 12px / 700

VERSION 1.0.4

Context: Fine print (Sparingly)

.text-body-large
16px / 24px / 400

The convergence of artificial intelligence coding assistants and modern cascading style sheet frameworks has fundamentally altered the paradigm of frontend architecture.

Context: Important body text

.text-body-medium
14px / 20px / 400

When interacting with artificial intelligence coding agents such as Claude, Cursor, or GitHub Copilot to generate user interfaces, the specificity of the input directly correlates to the architectural integrity of the output.

Context: Default text

.text-body-small
12px / 16px / 400

The prompt must force the artificial intelligence to understand these proportional nuances so it does not mistakenly apply generic 1.5 line heights to large marketing headers.

Context: Helper text

04. Interactive Components

Buttons, States & Variants

Button Hierarchy

Complete set of interaction patterns.

Solid

Outline

Ghost

Link

Icon

Fab

Disabled

05. Spacing System

Base: 4px Grid (1rem = 16px)

Spatial Tokens

Strict adherence to a 4px baseline grid ensures consistent rhythm and alignment.

space-1

4px

0.25rem

space-2

8px

0.5rem

space-3

12px

0.75rem

space-4

16px (Base)

1rem

space-6

24px

1.5rem

space-8

32px

2rem

space-12

48px

3rem

space-16

64px

4rem

SaaS Density Rhythm

Optimized for data-dense applications. Uses p-4 for containers, gap-2 for layout items, and 4px for icon-label pairs.

p-4 (16px)

gap-2

Search query...

p-4 container | gap-2 items | gap-1 icon-text

06. Surfaces & Layout

Sidebar, Breadcrumbs & Cards

Sidebar: #F1F5F9

Breadcrumb: #F8FAFC

Border Styles

border (1px)

Default

border-thick (2px)

Focus / Active

07. Data Visualization

Chart Tokens (Sequence 1-8)

Revenue Trends

Series A

Series B

100

Jan Feb

Chart Sequence

chart-1 (#2563EB)

chart-2 (#10B981)

chart-3 (#8B5CF6)

chart-4 (#FB923C)

chart-5 (#0891B2)

chart-6 (#C026D3)

chart-7 (#38BDF8)

chart-8 (#D97706)

08. Table Design

Standardized Lists & Grids

Standardized Table Component

User	Country	Email Address	Status	Amount (USD)	Created
JD John Doe	🇺🇸 USA	john.doe@company.com	Active	$1,250.00	13 Feb 2026
AS Alice Smith	🇩🇪 GER	alice.smith@corp.net	Pending Authorization	$8,400.00	12 Feb 2026
MK Marcus Kim	🇰🇷 KOR	marcus.k@example.com	Inactive	$0.00	10 Jan 2026

Implementation Logic

Feature	Logic Applied
Status Alignment	Left Aligned. Uses semantic colors (Success, Warning, Neutral) for clear visual feedback.
Row Height	Use `h-row-standard` (52px) for general dashboards; `h-row-compact` (36px) for power-user views.
Numeric Data	Applied `text-right` and `tabular-nums`. Uses Inter (sans-serif).
Icons/Actions	Fixed to `text-right` with hover tooltips (Black bg/White text) for accessibility.

The Problem (Proportional Figures)

Without constraints, "1" takes up less space than "0", causing decimals to misalign and making data hard to scan.

Ticker	Price	Change
AAPL	1,111.50	-1.15%
GOOGL	8,000.00	+0.85%
MSFT	2,444.11	+2.12%

The Solution (Tabular Nums)

Using tabular-nums, every digit occupies the same width. Vertical alignment is restored.

Ticker	Price	Change
AAPL	1,111.50	-1.15%
GOOGL	8,000.00	+0.85%
MSFT	2,444.11	+2.12%

Generated Configuration

Below is the raw CSS utilizing Tailwind v4 @theme syntax required to implement this system in production.

@import "tailwindcss";

@theme {
  /* 1. Typography */
  --font-sans: "Inter", sans-serif;

  /* 2. Color Palette (#55679C) */
  --color-primary-50: #F4F6FA;
  --color-primary-100: #E8EBF5;
  --color-primary-200: #C5CEE6;
  --color-primary-300: #A3B1D6;
  --color-primary-400: #8094C7;
  --color-primary-500: #55679C; /* Base */
  --color-primary-600: #44527D;
  --color-primary-700: #333E5E;
  --color-primary-800: #22293F;
  --color-primary-900: #11151F;

  /* Text Hierarchy */
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569; /* Slate 600 */

  /* Status & Feedback */
  --color-status-success: #16A34A;
  --color-status-success-bold: #166534;
  --color-status-warning: #FB923C;
  --color-status-warning-bold: #C2410C;
  --color-status-danger: #DC2626;
  --color-status-danger-bold: #991B1B;
  --color-status-info: #2563EB;
  --color-status-info-bold: #1E40AF;
  --color-status-discovery: #A855F7;
  --color-status-discovery-bold: #6B21A8;
  --color-status-neutral: #94A3B8;
  --color-status-neutral-bold: #64748B;

  /* Chart Sequence */
  --color-chart-1: #2563EB;
  --color-chart-2: #10B981;
  --color-chart-3: #8B5CF6;
  --color-chart-4: #FB923C;
  --color-chart-5: #0891B2;
  --color-chart-6: #C026D3;
  --color-chart-7: #38BDF8;
  --color-chart-8: #D97706;

  /* Layout Surfaces */
  --color-layout-sidebar: #F1F5F9; /* Slate 100 */
  --color-layout-breadcrumb: #F8FAFC; /* Slate 50 */

  /* Borders */
  --border-width-thick: 2px;

  /* 3. Typography Bundles (Size + Line Height + Weight) */
  --text-heading-xxl: 32px;
  --text-heading-xxl--line-height: 36px;
  --text-heading-xxl--font-weight: 700;

  --text-heading-xl: 28px;
  --text-heading-xl--line-height: 32px;
  --text-heading-xl--font-weight: 700;

  --text-heading-l: 24px;
  --text-heading-l--line-height: 28px;
  --text-heading-l--font-weight: 700;

  --text-heading-m: 20px;
  --text-heading-m--line-height: 24px;
  --text-heading-m--font-weight: 700;

  --text-heading-s: 16px;
  --text-heading-s--line-height: 20px;
  --text-heading-s--font-weight: 700;

  --text-heading-xs: 14px;
  --text-heading-xs--line-height: 20px;
  --text-heading-xs--font-weight: 700;

  --text-heading-xxs: 12px;
  --text-heading-xxs--line-height: 12px;
  --text-heading-xxs--font-weight: 700;

  --text-body-large: 16px;
  --text-body-large--line-height: 24px;
  --text-body-large--font-weight: 400;

  --text-body-medium: 14px;
  --text-body-medium--line-height: 20px;
  --text-body-medium--font-weight: 400;

  --text-body-small: 12px;
  --text-body-small--line-height: 16px;
  --text-body-small--font-weight: 400;
}

/* Global Tabular Data Enforcement */
@layer components {
  .tabular-data {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
}