10 · APP PLATFORM · FOR THE TECH TEAM

10

The app platform.

The marketing library is reading-shaped. Apps need different bones. This section is the foundation the tech team builds product on — Media Analysis Tool, internal dashboards, client dashboards, MediaINSIGHTS. One shell. One 12-col grid. One set of primitives.

Audience
Tech team · App engineers
Surfaces
Internal · Client-facing
Namespace
.app-*
Status
v0.1 · Foundation

WHY .APP-* IS SEPARATE FROM .LIB-*

Two languages. One brand.

The marketing library is editorial — single column, generous spacing, optimized for reading. App surfaces are dense — full viewport, fixed chrome, scrollable main, real data. They share the same brand tokens (color, type, motion) but the layout DNA is different. Mixing .lib- and .app- on the same page is a smell.

.app-* is for

Product dashboards. Internal tools. Client-facing surfaces. Anywhere the user is operating on live data, not reading a story.

.lib-* is for

Foundations, components, patterns, sales decks, marketing pages. Anywhere the brand is being read, not operated.

DEMOS · OPEN IN NEW TAB

See the platform in motion.

Live demo · 10.01

Dashboard

The Media Analysis Tool composed end-to-end: shell, topbar, rail, 4 KPI tiles, chart card, recommendation card, data table, activity panel. Every primitive in one page.

Open the dashboard ↗

Reference · 10.02

Shell anatomy

The app-shell layout: top bar + left rail + main + optional right panel. Full-viewport, scroll-inside-main, with-panel variant for activity / detail views.

Open shell docs ↗

Reference · 10.03

12-column grid

The .app-grid system. Span helpers .app-col-1 through .app-col-12. Auto-collapses to 6 / then 12 cols on narrower viewports.

Open grid docs ↗

PRIMITIVES · WHAT SHIPS IN v0.1

Eight pieces, composable.

  • .app-shell — full-viewport grid layout. Topbar + rail + main, with --with-panel variant for a right column.
  • .app-topbar — page title + breadcrumb + search + action button + avatar.
  • .app-rail — left navigation. Dark navy. Grouped sections, active state on red, count badges.
  • .app-grid + .app-col-{1..12} — 12-col responsive layout grid. Auto-collapses at 1080px and 720px.
  • .app-tile — KPI tile. Label, big tabular number, delta with direction, optional sparkline.
  • .app-card — generic content surface with head (title + meta) and body.
  • .app-table — dense data table. Mono numerics, hover row, inline status pills.
  • .app-toolbar + .app-btn (+ --primary, --accent) — filter / action bar with consistent button system.
  • .app-empty — empty state. Icon, title, body, optional action.
  • .app-status — live / paused / alert pill with dot prefix.

NEXT · v0.2 BACKLOG

What's missing on purpose.

v0.1 is the structural foundation. These ship next, scoped per real app build, not pre-built generically.

  • Real charts (Recharts / D3 conventions). Sparklines today are CSS placeholders.
  • Form patterns (field stacks, inline editing, multi-step).
  • Modals + side drawers + toasts.
  • Detail view (master-detail with deep-link state).
  • Loading + error states (skeletons, error boundaries).
  • Tabs within content area.
  • Density toggle (compact / comfortable rows).
  • Saved-view system for tables (column choice + filter persistence).

Brand tokens carry the system. Layout primitives carry the products.

App Platform north star