Integrated Media Intelligence Design System

This system blends Material structure with a modern expressive visual language to support enterprise-scale data platforms.

Design Principles

Clarity over density
System over decoration
Motion communicates hierarchy
Accessible by default
Flexible across data-heavy applications

Color Tokens

Primary
var(--primary)

Primary Strong
var(--primary-strong)

Secondary
var(--secondary)

Tertiary
var(--tertiary)

Success
var(--success)

Danger
var(--danger)

Warning
var(--warning)

Info
var(--info)

Surface
var(--surface)

Background
var(--background)

Typography

Style	Example	Usage	Specs
H1	Heading Level 1	Page titles, major sections	40px / Bold
H2	Heading Level 2	Section headers	32px / Bold
H3	Heading Level 3	Subsections	26px / Semibold
H4	Heading Level 4	Component titles	22px / Semibold
H5	Heading Level 5	Card headers	18px / Semibold
H6	Heading Level 6	Minor headers / labels	16px / Semibold
Subheader	Subheader text supporting a title	Secondary intro text under headers	18px / Medium
Body	This is standard body copy used for paragraphs and general interface text.	Primary reading content	16px / Regular
Emphasis	Emphasized text for key points	Highlighting key information	16px / Semibold
Warning Text	Warning or system alert text	System warnings and notices	14px / Semibold / Tracking +
Caption	Caption or helper text	Hints, helper labels, metadata	12px / Regular

Spacing System

This system uses a 4px base unit for consistent spacing and layout rhythm.

--space-1 = 4px

--space-2 = 8px

--space-3 = 12px

--space-4 = 16px

--space-5 = 24px

--space-6 = 32px

Space 1 (4px)

Space 2 (8px)

Space 3 (12px)

Space 4 (16px)

Space 5 (24px)

Space 6 (32px)

Buttons

Form Fields

Name

Warning Field

Range Slider 50

Description

Choose Option

Option A Option B

Select Features

Feature 1 Feature 2

Search Country

Enable Notifications

Off

Tabs

Overview

Analytics

Settings

Modals

Modals use semantic color and elevation to communicate urgency and importance.

Usage Guidelines

Primary buttons represent the main action on a page
Use cards for grouped content, not simple lists
Tabs are for same-level content, not navigation
Use color semantics consistently (danger, success, etc)

Figma Structure

Foundations/ Color Styles Typography Spacing Elevation Components/ Buttons Forms Navigation Cards Patterns/ Dashboards Tables Detail Views

React Architecture

/components /Button Button.tsx Button.styles.ts /Card /Tabs /Input /tokens color.ts spacing.ts elevation.ts

Case Study

This design system was created to unify fragmented enterprise tools into a single scalable interface language. It reduced UI inconsistency, improved accessibility compliance, and enabled faster product delivery by providing reusable components and tokenized styling.

The system was designed to support data-heavy dashboards, AI-driven insights, and cross-platform enterprise workflows.