Design System & Style Guide

/// Section 01

Tripartite Color Architecture

The palette pairs an organic sage green identity anchor with warm earthy khaki and cool faded denim accents. Every token is calibrated to guarantee accessible contrast ratios compliant with WCAG 2.1 Level AA/AAA standards across both light and dark display modes.

Sage Green

PRIMARY

The primary brand anchor for key interactions, focus states, verified indicators, and core navigation affordances.

Base (#69a280)
rgb(105, 162, 128)
Light Tint (#e5f0ea)
Text: #2e5840 (5.2:1)
Dark Layer (#182d21)
Text: #9fd0b3 (9.4:1)

Khaki Sand

ACCENT 1

A warm, architectural earth tone representing institutional stability, capability tags, version markers, and spec grids.

Base (#b8a88a)
Sand Earth
Light Tint (#f6f3eb)
Text: #665739 (4.9:1)
Dark Layer (#2b251a)
Text: #ded4be (10.2:1)

Faded Jeans Denim

ACCENT 2

A washed indigo denim tone conveying clarity and technical rigor, applied to concept tags, scholarly archives, and directory badges.

Base (#7a9eb3)
Washed Denim
Light Tint (#edf3f7)
Text: #35596e (5.5:1)
Dark Layer (#1b2a33)
Text: #a5c8dc (9.1:1)

Standard IBM Carbon Neutral Foundations

IBM Carbon Light Scale (White / G10)

Bg: #ffffff
L1: #f4f4f4
L2: #e0e0e0
L3: #c6c6c6
Text: #161616
Sec: #525252

IBM Carbon Dark Scale (G100 Deep Dark)

Bg: #161616
L1: #262626
L2: #393939
L3: #525252
Text: #f4f4f4
Sec: #c6c6c6

/// Section 02

Typography & The IBM Plex Scale

All typography is powered by the complete, locally served IBM Plex font family—specifically designed to capture IBM’s spirit of engineered precision and humanistic craftsmanship.

01 / DISPLAY & UI

IBM Plex Sans

A grotesque sans-serif with engineered clarity, ideal for UI controls, navigation, and display headers.

The quick brown fox jumps over the lazy dog. 0123456789

02 / EDITORIAL READING

IBM Plex Serif

A contemporary transitional serif crafted for high readability in extended essays and academic articles.

The quick brown fox jumps over the lazy dog. 0123456789

03 / CODE & DATA

IBM Plex Mono

Monospaced clarity for technical specs, personal data schemas, timestamps, and LaTeX expressions.

FULL_NAME: César Manuel Caldeira; SPEC_V1.0

Hierarchy & Scale Tokens

.cds--type-display-01

Display 01 (42px / 2.625rem, 300)

Hero Statements & Main Brand Concepts

.cds--type-heading-05

Heading 05 (32px / 2.0rem, 400)

Primary Section Titles (Bio, Services, Archive)

.cds--type-heading-04

Heading 04 (28px / 1.75rem, 600)

Card & Capability Headers

.cds--type-body-long-01

Body Long 01 (14px / 0.875rem, 400, line-height 1.6). Balanced for multi-sentence narrative reading and prose.

Narrative Body Copy

.cds--type-caption

Caption (12px / 0.75rem, 400). Small helper notes and timestamps.

Metadata & Helper Annotations

/// Section 03

IBM Design Philosophy & 2x Grid

Rooted in the mid-century corporate design renaissance initiated by Thomas J. Watson Jr., Eliot Noyes, and Paul Rand, our implementation adheres to fundamental tenets of clarity, mathematical structure, and functional honesty.

01

The 2x Grid

Strict 16-column mathematical layout structured on 8px mini-units and 4px baseline vertical rhythm, bounded within a 1440px max viewport frame.

02

Honesty in Materials

Zero skeuomorphism or artificial embellishment. Digital surfaces are rendered with high-contrast planes, crisp 1px borders, and clear semantic affordances.

03

Accessibility Default

Uncompromising commitment to WCAG 2.1 AA/AAA compliance, full keyboard tab-stop navigation, visible focus indicators, and semantic ARIA landmark structures.

/// Section 04

Interactive Component Catalog

Live Carbon component building blocks styled with the new theme tokens.

Skeletons & Shimmer Loading States

Low-fidelity shimmer UI placeholders rendering content silhouettes before asynchronous data loads.

Text & Heading Skeletons

Card / Media Skeleton

Buttons

Tags & Badges

Sage Green Khaki Sand Faded Jeans Teal Anchor Slate Violet Warning Red Neutral Gray Outline Spec Clickable Tag ↗

Accordions

100% of vendor scripts, stylesheets, mathematical rendering engines (KaTeX), vector tiles, and IBM Plex typefaces are permanently self-hosted locally under static/.
Parses machine-readable CSVW datasets with schema type-coercion, client-side FlexSearch filtering, column sorting, and pagination.

Tabs & Contained Panels

Multi-subdomain monorepo compiling into 5 independent static deployment targets with zero runtime React or Node dependency.

Token-based styling via CSS custom properties (--cds-*) across White, Gray 10, Gray 90, and Gray 100 modes.

Full WCAG 2.1/2.2 AA conformance with keyboard tab-stops, semantic HTML landmarks, and 2px focus rings.

Progress Bars & Step Indicators

Tokens
Step 1
Components
Step 2
Deploy
Step 3

Contained & Structured Lists

hub.example.com Main Production Portal & Overview
Active
docs.example.com Technical Documentation & Guides
Active

Feature	Standard
Typography	IBM Plex Sans / Serif / Mono
Layout Grid	16-Column 2x Grid (8px Mini-units)

Form Controls, Switchers & Toggles

Sample Text Input

Standard Carbon input with subtle border and focus ring

WASM Acceleration Remember state

Content Switcher

Notifications & Alerts

Dependency Audit Complete

All 124 Carbon React component references, SCSS packages, and local font sets verified.

Zero external CDN dependencies.

Standard Inline Notification

Used for contextual, non-disruptive feedback directly within the document stream.

/// Section 05

Token Implementation & Code Guidelines

Direct reference for utilizing the CSS custom properties in SCSS and HTML templates.

/* CSS Variable Usage Examples */

/* 1. Primary Interactive Elements */
.my-primary-btn {
  background-color: var(--cds-interactive-01); /* Sage Green #69a280 */
  color: var(--cds-text-inverse);
  outline-color: var(--cds-focus);
}

/* 2. Tripartite Accents */
.my-khaki-badge {
  background-color: var(--cds-tag-background-warm-gray);
  color: var(--cds-tag-color-warm-gray);
  border: 1px solid var(--cds-tag-border-warm-gray);
}

.my-denim-card {
  background-color: var(--cds-tag-background-blue);
  color: var(--cds-tag-color-blue);
  border-left: 3px solid var(--cds-color-jeans);
}

/* 3. Standard IBM Surfaces */
.my-container {
  background-color: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle-00);
  color: var(--cds-text-primary);
}

Carbon Design System & Visual Style Guide