Getting Started with IDP

Learn how to integrate the Intrinsic Density Protocol into your projects and start building high-density, accessible interfaces.

Installation

Via npm

Install the IDP framework using npm or your preferred package manager:

npm install idp-framework

Via CDN

Or include the framework directly from a CDN:

<link rel="stylesheet" href="https://unpkg.com/idp-framework/dist/idp-framework.min.css">

Quick Start

Create a basic IDP layout with the cockpit shell structure:

<body class="idp-shell has-context">
  <nav class="region-nav">
    <!-- Navigation sidebar -->
  </nav>
  
  <main class="region-main">
    <!-- Main content -->
  </main>
  
  <aside class="region-context">
    <!-- Context panel -->
  </aside>
</body>

The idp-shell class creates the responsive cockpit layout, while has-context enables the right-side context panel.

Using the Bento Grid

The Bento Grid is IDP's solution to the single-column mobile stack. It automatically fits as many columns as possible based on container width:

<div class="bento-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

Card 1

Card 2

Card 3

Card 4

On mobile (390px), this renders 2 columns. On desktop, it expands to 4 or more, maximizing information density without compromising readability.

The Golden Ratio System

IDP uses the golden ratio (φ ≈ 1.618) throughout its design system. Every spacing value, typography scale, and layout proportion derives from this mathematical constant.

1.618033988749895

The golden ratio: nature's perfect proportion

Fibonacci Spacing Scale

Spacing values follow the Fibonacci sequence (1, 2, 3, 5, 8, 13, 21, 34, 55, 89), which approximates the golden ratio:

--s-xs = 3px (Fibonacci 3)
--s-sm = 5px (Fibonacci 5)
--s-md = 8px (Fibonacci 8)
--s-lg = 13px (Fibonacci 13)
--s-xl = 21px (Fibonacci 21)

Accessibility First

IDP prioritizes accessibility without sacrificing density. All components include:

Minimum 44×44px touch targets (WCAG 2.5.5)
Enhanced focus indicators for keyboard navigation
Proper ARIA labels and semantic HTML
Screen reader support with skip links
Reduced motion preferences
High contrast mode support

Component Library

IDP provides a comprehensive set of components designed for high-density interfaces. Each component follows the golden ratio spacing system and includes accessibility features.

Buttons

Dense, high-contrast buttons with multiple variants and sizes.

VARIANTS

SIZES

BUTTON GROUP

Cards

Container-query-driven adaptive cards with multiple variants.

Basic card with header and body sections.

Card with shadow elevation.

Retro/technical styling.

Hover me for effect!

Users

2,847

Revenue

$12.4K

Growth

+18%

Forms

Dense, inline-friendly form controls for high-density interfaces.

Text Input

Helper text for the input field.

Input Sizes

Select

Input Group

https://

Checkboxes & Radios

Checkbox 1 Checkbox 2 Radio 1 Radio 2

Toggle Switch

Enable feature

Tables

Dense data tables with variants for different density levels.

Name	Status	Value
Item Alpha	Active	$1,234
Item Beta	Pending	$567
Item Gamma	Inactive	$89

Badges & Tags

Compact indicators and labels for status, categories, and metadata.

COLORS

Default Primary Success Warning Danger Info

SUBTLE

Muted Primary Success Warning Danger

PILLS & DOTS

Pill Badge

Alerts & Callouts

Minimal vertical space alerts with high visibility.

ℹ️

Information

This is an informational alert message.

✓

Success

Operation completed successfully!

⚠️

Warning

Please review before proceeding.

Error

Something went wrong. Please try again.

💡 Pro Tip

Use the .alert--compact class for reduced padding in dense layouts.