BoardUI Dashboard Design System

Overview

The BoardUI Dashboard presents as a polished, data-rich SaaS administration surface built for daily operational workflows. The design language prioritizes information density without visual clutter — a near-monochromatic foundation of whites and cool grays allows the strategic application of brand voltage to guide attention precisely where it matters most. The dominant mood is one of calm competence: this is a tool for people who need to glance at metrics, scan recent activity, and take action within seconds.

Brand voltage lives selectively across the interface. The primary action color — an electric blue ({colors.accent}) — appears almost exclusively on the {component.button-primary} ("Create ticket"), active navigation states in the {component.sidebar}, and interactive tab controls within {component.chart-container} components. Positive metric deltas pulse in lime green ({colors.success}), creating instant semantic recognition for growth indicators alongside the neutral black ink of absolute values. The activity heatmap introduces a violet accent ({colors.heatmap-cell}) that adds warmth to an otherwise cool palette, distinguishing temporal data from quantitative KPIs.

The typography system hinges on Inter at modest-to-medium weights (400–600), never venturing into bold territory. Hierarchy is achieved through size differential and color contrast rather than weight extremes. The {typography.metric-value} role at 28px/600 weight represents the heaviest moment in the entire system, reserved exclusively for the large numerals inside KPI cards. Body text sits comfortably at 14px/500 — slightly heavier than conventional web defaults — which improves readability against the light-gray card surfaces.

Shape language favors restraint. The default corner radius ({rounded.DEFAULT}) of 6px applies to most interactive elements, while cards and containers breathe slightly more generously at 10px ({rounded.lg}). Fully rounded forms ({rounded.pill}) appear only on avatars, search fields, notification badges, and the user identity button — a deliberate pattern that signals "identity or input" versus "content or action." The overall impression is softened but not playful; these are the curves of a professional tool, not a consumer app.

Two distinct sub-systems organize the dashboard's content regions. The KPI dialect comprises metric cards, spark-adjacent bar/line charts, and stat grids — all sharing {colors.surface-soft} backgrounds, {rounded.lg} corners, and consistent 8px internal padding. The activity dialect encompasses user cards, recent-hire carousels, and contribution heatmaps — these introduce avatar circles, role badges, and the violet color token to signal human-centric data. Both dialects sit atop the same foundational tokens but diverge in their micro-layout patterns.

Key Characteristics

• Canvas is pure white ({colors.canvas} — #ffffff); all card surfaces use {colors.surface-soft} (#f7f7f7) for subtle stratification.
• Primary actions render in electric blue ({colors.accent} — #2563eb) with white text; secondary surfaces use {colors.surface-strong} (#ebebeb).
• All text defaults to near-black ({colors.ink} — #030000) for headings and {colors.body} (#300000) for body copy.
• Positive metrics display in lime green ({colors.success} — #84cc16) on a pale green background ({colors.success-bg}).
• Activity heatmaps use violet ({colors.heatmap-cell} — #7c3aed) with lighter tints for reduced intensity.
• Corner radii follow a tight scale: 3px for small badges, 6px for buttons, 8–10px for cards, pill for avatars/search.
• Spacing operates on a 2px base unit with common values at 8px, 10px, 12px, and 24px.
• Shadows are extremely subtle — the strongest elevation ({extensions.shadows.lg}) barely exceeds 12px spread.
• Inter font serves every role from 12px captions to 28px metric values, weights 400–600.

Colors

Brand & Accent

• Primary ({colors.primary} — #030000): Near-black used for the highest-emphasis text elements — page titles, metric values, and primary navigation labels. Functions as the "ink" of the system rather than a traditional brand color.
• Primary Hover ({colors.primary-hover} — #1a1a1a): Slightly lifted black for interactive hover states on text-heavy elements.
• Primary Active ({colors.primary-active} — #000000): Pure black for pressed/active states.
• Accent ({colors.accent} — #2563eb): Electric blue reserved for primary call-to-action buttons ({component.button-primary}), active sidebar navigation items ({component.sidebar-nav-item-active), and focus ring outlines. This is the sole source of "brand color" in the traditional sense.
• Accent Hover ({colors.accent-hover} — #1d4ed8): Darkened blue for hover states on {component.button-primary} and accent-colored interactive elements.
• Accent Active ({colors.accent-active} — #1e40af): Deepest blue for pressed/active states on accent buttons.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white background for the main content area, sidebar, top navigation, and all elevated card interiors. The foundational surface upon which all other layers rest.
• Surface Soft ({colors.surface-soft} — #f7f7f7): Cool light gray used as the background for KPI cards ({component.kpi-card}), chart containers ({component.chart-container}), and any content region requiring visual separation from the canvas without the weight of a border.
• Surface Strong ({colors.surface-strong} — #ebebeb): Medium gray for secondary buttons ({component.button-secondary}), search field backgrounds ({component.sidebar-search}), theme toggles, and divider-like decorative surfaces.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White surface with shadow elevation — used for dropdowns, modals, and floating panels that must appear visually "above" the canvas.
• Surface Tertiary ({colors.surface-tertiary} — #ebebeb): Equivalent to surface-strong in value; used specifically for input-like backgrounds such as the sidebar search field and certain container fills.

Text & Ink

• Ink ({colors.ink} — #030000): Near-black for headlines, page titles ("Welcome Mertcan"), metric values, and any text requiring maximum contrast and emphasis. The darkest tone in the palette.
• Body ({colors.body} — #300000): Very dark red-tinted black (appears nearly black) for body text, navigation labels, user names, and standard interface copy. Slightly warmer than pure ink.
• Muted ({colors.muted} — #737373): Medium gray for secondary text — timestamps, role descriptions, chart axis labels, placeholder text, and inactive navigation items.
• Muted Soft ({colors.muted-soft} — #a3a3a3): Light gray for tertiary text — hints, disabled labels, and decorative elements that must register as present but unimportant.
• On Primary ({colors.on-primary} — #ffffff): White text rendered on {colors.primary} or {colors.accent} backgrounds. Used in {component.button-primary} and {component.sidebar-nav-item-active}.
• On Accent ({colors.on-accent} — #ffffff): White text on blue accent backgrounds; functionally identical to on-primary in this system.
• On Dark ({colors.on-dark} — #ffffff): White text on dark backgrounds like {colors.error} badges and notification counters.

Hairlines & Borders

• Hairline ({colors.hairline} — #e5e5e5): Light gray borders separating major regions — card edges, sidebar boundaries, and container outlines. Nearly invisible at a glance but provides structural definition.
• Hairline Soft ({colors.hairline-soft} — #f0f0f0): Very light gray for subtle dividers between list items, table rows, and internal card partitions.
• Border Strong ({colors.border-strong} — #d4d4d4): Medium-gray borders for focused states, active inputs, and elements requiring clearer delineation than hairline provides.
• Border Focus ({colors.border-focus} — #2563eb): Blue focus ring color matching {colors.accent}, used for keyboard-focus indicators on interactive elements per WCAG guidelines.

Semantic Colors

• Success ({colors.success} — #84cc16): Lime green for positive metric changes ("+14.8%", "+9.4%", "+5.3%"), checkmarks, and any indicator representing favorable outcomes.
• Success Background ({colors.success-bg} — #ecfccb): Pale green background for metric change badges ({component.kpi-card-change-positive}), providing a subtle colored field behind the green percentage text.
• Success Text ({colors.success-text} — #365314): Dark olive-green text for readability against {colors.success-bg} backgrounds.
• Error ({colors.error} — #dc2626): Red for negative metrics ("-2.1%"), validation errors, and destructive action indicators.
• Error Background ({colors.error-bg} — #fef2f2): Pale red background for negative change badges ({component.kpi-card-change-negative}).
• Warning ({colors.warning} — #eab308): Amber/yellow for caution states (not prominently visible in the current screenshot but present in the token set for form validation and alerts).
• Info ({colors.info} — #2563eb): Blue matching the accent color, used for informational tooltips and link-like interactive text.

Data Visualization

• Chart Bar ({colors.chart-bar} — #84cc16): Lime green fill for bar chart columns in the "Earned so far" visualization.
• Chart Line ({colors.chart-line} — #84cc16): Green stroke for the Revenue line chart path.
• Chart Line Fill ({colors.chart-line-fill} — #ecfccb): Pale green gradient fill beneath the Revenue line chart, fading to transparent at the baseline.
• Heatmap Cell ({colors.heatmap-cell} — #7c3aed): Violet/purple for high-intensity cells in the "Contributions this year" activity grid.
• Heatmap Cell Light ({colors.heatmap-cell-light} — #ddd6fe): Light lavender for medium-intensity heatmap cells.
• Heatmap Cell Muted ({colors.heatmap-cell-muted} — #e5e7eb): Very light gray for zero or low-intensity heatmap cells.

Typography

Font Family

The entire system runs on Inter, a geometric humanist sans-serif designed by Rasmus Andersson specifically for screen readability. The font-face declaration loads Inter in weights 100–900 (variable font range), though the design system constrains actual usage to 400 (regular), 500 (medium), and 600 (semibold). A carefully crafted fallback stack includes "Inter Fallback" (an Arial-based metric-matching proxy), system UI fonts (ui-sans-serif, system-ui), and full emoji support via platform-specific emoji fonts. This ensures graceful degradation if the Inter WOFF2 files fail to load while maintaining precise vertical rhythm through the fallback's ascent/descent overrides.

Inter plays every role in this system — there is no serif counterpoint, no monospace exception for code (despite JetBrains Mono being loaded in the font faces, it does not appear in the extracted type scale). The typeface's tall x-height, open apertures, and distinctive dotless 'i' (in some weights) give the dashboard its modern, approachable technical character.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 24px | 600 | 1.33 (-0.02em) | -0.02em | Page titles ("Welcome Mertcan") | | {typography.display-lg} | 20px | 500 | 1.3 | -0.01em | Card section headers ("Recent hires", "Revenue") | | {typography.title-md} | 16px | 500 | 1.5 | 0 | Stat grid values, sub-section titles | | {typography.metric-value} | 28px | 600 | 1.2 | -0.02em | Large KPI numbers ($7,462, 56, 958) | | {typography.body-md} | 14px | 500 | 1.43 | 0 | Body text, nav labels, user names, button text | | {typography.body-sm} | 13px | 400 | 1.38 | 0 | Secondary descriptions, timestamps | | {typography.caption} | 12px | 400 | 1.33 | 0 | Axis labels, "Joined today", role badges | | {typography.button} | 14px | 500 | 1.25 | 0 | Button label text | | {typography.label} | 12px | 500 | 1.33 | 0.02em | Form field labels, uppercase-style markers | | {typography.metric-change} | 13px | 500 | 1.38 | 0 | Percentage change badges (+14.8%, -2.1%) |

Principles

The BoardUI typography system trusts size and color to carry hierarchy far more than weight. Notice that both the page title ({typography.display-xl} at 24px) and card headers ({typography.display-lg} at 20px) sit at weight 500 or 600 — the same weight as body text and buttons. The 28px {typography.metric-value} at weight 600 represents the single heaviest moment in the entire interface, and even that stops short of true bold (700). This restraint ensures that nothing ever feels "shouted" — the dashboard speaks in a measured, professional voice.

Color contrast provides the second hierarchical lever. The {colors.ink} near-black reserves itself for titles and metric values; {colors.body} handles names and primary labels; {colors.muted} steps back for timestamps and descriptions; {colors.muted-soft} nearly disappears into the background for hints. A reader scanning the page instinctively follows the gradient from dark to light, from large to small.

Letter spacing receives minimal intervention. Display roles carry -0.02em or -0.01em tracking to optically tighten large settings (a standard practice for headlines at Inter's proportions). The {typography.label} role uniquely applies +0.02em tracking at 12px/500, giving form labels slight expansion for scannability. All other roles use normal (0) letter spacing, trusting Inter's native spacing.

Uppercase and italic are essentially absent from the interface. Text transforms are not applied via CSS classes; everything renders in sentence case. Italic appears nowhere in the extracted styles. The system achieves emphasis through the mechanisms already described — never through case or slant.

Note on Font Substitutions

Inter is available as a free Google Font (https://fonts.google.com/specimen/Inter), making substitution straightforward for implementations that cannot bundle the WOFF2 files. To substitute, define the following CSS variable mapping:

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

If Inter is unavailable, Plus Jakarta Sans serves as the closest Google Fonts alternative — it shares Inter's geometric humanist skeleton, tall x-height, and similar weight distribution. DM Sans is a acceptable second choice. Avoid system-ui-only fallbacks for headline roles, as the metric overrides in the "Inter Fallback" face are critical for maintaining vertical rhythm.

Layout

Spacing System

• Base unit: 2px ({spacing.xxs}). All other spacing tokens derive from multiples or near-multiples of this atomic unit.

• Tokens:

  • {spacing.xxs} (2px): Tight internal gaps, focus ring offsets, badge padding.
  • {spacing.xs} (4px): Icon-text gaps inside buttons, small internal padding.
  • {spacing.sm} (5px): Uncommon odd value appearing in specific component gaps.
  • {spacing.md} (6px): Common gap between sibling elements in dense lists.
  • {spacing.base} (8px): Standard card internal padding ({component.kpi-card}, {component.chart-container}), sidebar nav item padding.
  • {spacing.lg} (10px): Button padding vertical, search field padding, comfortable touch targets.
  • {spacing.xl} (12px): Button padding horizontal, user card internal padding, wider gutters.
  • {spacing.2xl} (16px): Section margins, larger card padding contexts.
  • {spacing.3xl} (24px): Main content area top/bottom padding, major section breaks.
  • {spacing.section} (24px): Vertical rhythm for full-width content bands.

• Section padding (vertical): {spacing.3xl} (24px) — applied to the <main> content wrapper as padding: 24px 12px 12px.

• Card internal padding: KPI cards and chart containers use {spacing.base} (8px) uniformly; user cards use {spacing.xl} (12px) for slightly more breathing room around avatar+name combinations.

• Gutters: The main content area maintains ~12px horizontal gutter from the viewport edge; the sidebar sits in a 234px fixed column with 2px internal edge padding.

Grid & Container

• Max content width: The main content area renders at approximately 1168px wide (extracted from the <main> element's computed width). This is not a hard max-width constraint but rather the natural width at the screenshot's viewport size.
• Editorial vs. app density: This is firmly an app-density layout. Information packs tightly into multi-column grids: the top row stacks two KPI cards side-by-side (recent hires + earned so far), the middle row pairs revenue chart with contributions heatmap, and the bottom row begins a three-column stat grid (customers, units sold, orders, support tickets). White space exists between cards (~8–12px) but not within them.
• Desktop grid behavior: At desktop widths, the content area uses a fluid grid that naturally arranges cards in 2-column and 4-subcolumn layouts. The "Recent hires" section occupies roughly 45% width with "Earned so far" taking the remainder. Below that, "Revenue" takes ~55% while "Contributions" takes ~45%. The bottom stat row divides into four equal quarters.
• Hero/column splits: No traditional hero section exists (this is a dashboard, not a landing page). The closest analogue is the top content row where "Welcome Mertcan" (left-aligned title) shares horizontal space with the action cluster (notifications, filters, Create ticket button — right-aligned).

Whitespace Philosophy

The system practices efficient whitespace — enough room to prevent visual crowding, but never so much that it wastes screen real estate. Card backgrounds in {colors.surface-soft} provide visual separation where a landing page might use 40–60px of empty space. Internal card padding stays tight at 8px because the light-gray background already creates a "container" feeling. This is a tool for power users who want maximum data per viewport, not a narrative experience.

Header Architecture

┌─────────────────────────────────────────────────────────────────────────────┐
│ [≡]  Board team  ›  Mertcan  ›  🏠 Home              [🔔5] [☰Filters] [+Create]│
└─────────────────────────────────────────────────────────────────────────────┘
       ↑ breadcrumb trail                                   ↑ action cluster

The top navigation bar ({component.top-nav}) spans the full width of the content area (excluding the sidebar). Left side: breadcrumb trail showing hierarchy (Board team → Mertcan → Home) with chevron separators in {colors.muted}. Right side: notification bell with red {component.badge-notification} count, Filters button (ghost style), and {component.button-primary} ("Create ticket"). Height is approximately 48px with no bottom border — separation from content comes from the natural spacing below.

Hero Section (Dashboard Header)

┌───────────────────────────────────────────────────────────────────┐
│ Welcome Mertcan                                    [🔔] [Filters] [+Create] │
├───────────────────────────────┬───────────────────────────────────┤
│ Recent hires          [Board team ▾] │ Earned so far         [Weekly] [Monthly] [Yearly] │
│ 56                             │ $7,462  +14.8%                   │
│ ┌─────────┐ ┌─────────┐        │ ▓▓▓                            │
│ │ Avatar  │ │ Avatar  │        │ ▓▓▓▓▓   (bar chart)             │
│ │ Livia   │ │ Jaydon  │        │ ▓▓▓                            │
│ └─────────┘ └─────────┘        │                                  │
│ ┌─────────┐ ┌─────────┐        │                                  │
│ │ Avatar  │ │ Avatar  │        │                                  │
│ │ Maria   │ │ Ann     │        │                                  │
│ └─────────┘ └─────────┘        │                                  │
│ [← Previous]   [Next →]        │                                  │
└───────────────────────────────┴───────────────────────────────────┘

The dashboard opens with a two-column layout. Left column (~45% width): "Welcome Mertcan" in {typography.display-xl}, followed by the "Recent hires" KPI card showing count 56, a team selector dropdown, a 2×2 grid of {component.user-card} entries with avatars/names/roles/timestamps, and pagination controls. Right column (~55% width): "Earned so far" KPI with value $7,462 and green +14.8% change badge, time-period tabs (Weekly/Monthly/Yearly), and a lime-green bar chart showing monthly earnings distribution.

Chart & Activity Section

┌───────────────────────────────────────┬───────────────────────────────────────┐
│ Revenue                  [W][M][Y]    │ Contributions this year                │
│ $18,240  +9.4%                  │ 958  +14.8%                        │
│ ╱╲    (line chart)               │ 9B          562.7M    12h54m  62 days  │
│╱  ╲╱╲    with green fill        │ Lifetime    Peak      Longest  Top     │
│    ╱  ╲                         │ tokens      tokens   task    streak  │
│   ╱    ╲                        │                                      │
│  ╱      ╲ (rising trend)        │ [Activity Heatmap - violet cells]    │
│                              │ Jan Feb Mar Apr May Jun Jul Aug...    │
└───────────────────────────────────────┴───────────────────────────────────────┘

Middle band splits into two roughly equal columns. Left: Revenue line chart in green ({colors.chart-line}) with pale green fill ({colors.chart-line-fill}) beneath, showing an upward trend through the year. Right: "Contributions this year" with total count 958, +14.8% change badge, a 4-column stat grid (Lifetime tokens, Peak tokens, Longest task, Top streak), and a GitHub-style activity heatmap using {colors.heatmap-cell} violet tones across months.

Bottom Stats Row

┌──────────┬──────────┬──────────┬──────────┐
│ 👤        │ 📦        │ 🛒        │ 😊        │
│ Customers │ Unit sold│ Orders   │ Support  │
│ 11,592    │ 385       │ 1,394     │ 708      │
│ +5.3%     │ -2.1%     │ 0.00%     │ +12.8%   │
└──────────┴──────────┴──────────┴──────────┘

Four equal-width stat cards in a single row, each with an icon, label in {typography.caption}/{colors.muted}, large value in {typography.title-md}/{colors.ink}, and a change badge (green for positive, red for negative).

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} or {colors.surface-soft} background | Sidebar, top nav, main content background, flat cards | | 1 — Hairline outline | 1px {colors.hairline} border, no shadow | Card edges, input fields, container boundaries | | 2 — Soft drop | {extensions.shadows.sm} — 0 1px 2px rgba(0,0,0,0.05) | Elevated cards, dropdown menus, floating panels | | 3 — Medium lift | {extensions.shadows.md} — 0 1px 3px rgba(0,0,0,0.08) | Modal dialogs, popover menus, tooltip containers | | 4 — Prominent | {extensions.shadows.lg} — 0 4px 12px rgba(0,0,0,0.08) | Toast notifications, drag previews, overlay panels | | Focus ring | {extensions.shadows.focus-ring} — 2px blue ring + 4px spread | Keyboard focus state on buttons, links, inputs |

The depth philosophy is layered-minimalist. Unlike consumer apps that use dramatic shadows to create "card stacks," BoardUI treats elevation as a functional signal rather than a decorative one. Most cards sit at Level 0 or Level 1 — distinguished by background color ({colors.canvas} vs {colors.surface-soft}) and a 1px hairline border, not by shadow. Shadows appear only when an element must literally float above content (dropdowns, modals, the {component.floating-action-panel} visible at the bottom-right of the viewport).

Color-block separation dominates over shadow-based depth. The sidebar and main content area share the same {colors.canvas} white but are separated by layout position, not by a shadow or border. Cards use {colors.surface-soft} to recess themselves visually from the canvas. This "color-as-elevation" approach keeps the interface feeling clean and reduces visual noise.

Shadows that do exist are cool-toned and transparent — the alpha values never exceed 0.08 for the largest shadow, and the blur spreads are modest (max 12px). There is no warm tint, no dramatic offset, no "floating card" aesthetic. If a shadow is visible, it's just enough to confirm the element is above the surface — nothing more.

Decorative Depth

The line chart in the Revenue panel introduces a gradient fill treatment: the area beneath the green line fades from {colors.chart-line-fill} (pale green) at the line itself to fully transparent at the X-axis baseline. This creates a subtle sense of volume without adding shadow complexity. The bar chart columns in "Earned so far" are flat {colors.chart-bar} solid fills with {rounded.sm} (3px) top corners only — no gradients, no inner shadows, no bevels. The activity heatmap creates depth through color intensity rather than physical elevation: darker violet cells represent higher activity, creating a visual "topography" of contribution density.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 3px | Small badges, metric change tags, bar chart tops, minimal UI elements | | {rounded.DEFAULT} | 6px | Default button corners, standard interactive elements | | {rounded.md} | 8px | Primary buttons, input fields, select dropdowns | | {rounded.lg} | 10px | KPI cards, chart containers, user cards, large content panels | | {rounded.xl} | 12px | Floating action panel, modal dialogs, prominent containers | | {rounded.2xl} | 16px | Large feature cards (rare in current view) | | {rounded.pill} | 9999px | Avatars, search fields, notification badges, user identity button, role tags | | {rounded.full} | 9999px | Icon button circular hits, theme toggle track |

The shape vocabulary is intentionally limited. Three radii handle 90% of cases: 3px for micro-elements, 6–8px for interactive controls, and 10px for content cards. The pill radius (9999px / full) acts as a semantic signal — whenever you see a fully rounded shape, it represents either a person (avatar, user button) or a text input (search). This pattern helps users intuitively categorize elements before reading their labels.

Photography Geometry

User avatars render as 40×40px perfect circles ({component.user-avatar} with {rounded.full}). They contain photographic headshots cropped to a centered circle with no border, no shadow, and no ring decoration — just the image filling the circle entirely. The avatar sits to the left of the user name in {component.user-card}, vertically center-aligned with the text baseline. No other imagery (product photos, illustrations, 3D renders) appears in the current dashboard view — this is a data-driven interface where icons and charts carry all visual weight.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & Actions

{component.button-primary} — The principal call-to-action button, exemplified by "Create ticket" in the top-right. Background {colors.accent} (electric blue), text {colors.on-accent} (white), type {typography.button} (14px/500), rounded {rounded.md} (8px), padding 8px 16px. Features a subtle shadow on press state via {extensions.shadows.button-inset} (white highlight + blue inner border). State variants: {component.button-primary-hover} darkens to {colors.accent-hover}, {component.button-primary-active} deepens further to {colors.accent-active}.

{component.button-secondary} — A toned-down action button for less-important operations. Background {colors.surface-strong} (#ebebeb), text {colors.ink}, same type and rounding as primary. Used for pagination controls ("Previous", "Next") and utility actions that shouldn't compete with the primary CTA.

{component.button-ghost} — Transparent background with {colors.body} text, for inline actions that need minimal visual weight. Appears in tab-like contexts and filter triggers.

{component.icon-button} — Square 32×32px hit target (size: "32px") with {rounded.full} (circle), transparent background, {colors.ink} icon. Used for the notification bell, sidebar collapse toggle, and standalone icon triggers. Includes a focus-visible ring matching {extensions.shadows.focus-ring}.

{component.icon-button-secondary} — Identical structure to icon-button but with {colors.muted} icon color, indicating a disabled or lower-priority action (e.g., the icon beside the user name in the top nav).

{component.badge-notification} — Small circular badge (18×18px, {rounded.pill}) with {colors.error} background and white {typography.caption} text. Overlays on the notification bell icon to show unread count (displays "5" in the screenshot).

Navigation

{component.sidebar} — Fixed left rail (234px wide) with {colors.canvas} background. Contains the user identity button at top, {component.sidebar-search} field, vertical navigation list, theme toggle, and bottom account switcher. Padding is minimal (0 2px) to maximize content width in the narrow column.

{component.sidebar-nav-item} — Individual navigation rows in the sidebar. Transparent background, {colors.body} text at {typography.body-sm}, {rounded.lg} (10px) corners, 8px 12px padding. Each item includes a leading icon (16–20px) and label text. The "Home" item shows an active state variant.

{component.sidebar-nav-item-active} — The currently-selected navigation item (Home in the screenshot). Background shifts to {colors.accent} (blue), text to {colors.on-accent} (white), creating strong affordance for current location. A small "152" badge appears inline on the active item, likely indicating unread notifications or items in that section.

{component.sidebar-search} — Full-width search input styled as a pill-shaped bar. Background {colors.surface-tertiary} (#ebebeb), {rounded.pill} (fully rounded), 8px padding, containing a search icon and "Quick Search ⌘Lplaceholder text. Transitions to slightly different background/radius on focus (per CSS classhover:bg-background-tertiary-hover/55`).

{component.top-nav} — Horizontal bar spanning the main content area above the dashboard grid. {colors.canvas} background, ~48px height, flex layout with breadcrumbs left-aligned and action cluster right-aligned. No border-bottom — relies on spacing to separate from content below.

{component.top-nav-breadcrumb} — Text chain showing navigation hierarchy ("Board team › Mertcan › 🏠 Home"). {colors.muted} text, {typography.body-sm}, chevron separators. Each segment may be individually clickable (though only the final segment appears as current-page styling).

{component.user-avatar-button} — Circular button in the sidebar header showing "Mertcan Esmergul" with a small avatar circle and dropdown chevron. {rounded.pill} (full round on the avatar, pill on the container), transparent background, {colors.ink} text. Likely opens a user menu on click.

Data Display Cards

{component.kpi-card} — The fundamental metric display unit. Background {colors.surface-soft} (#f7f7f7), {rounded.lg} (10px), 8px internal padding. Contains a label (e.g., "Recent hires"), a large numeric value, and optionally a change badge. Used for "Recent hires" (56), "Earned so far" ($7,462), "Revenue" ($18,240), and "Contributions this year" (958). May also contain embedded charts or user grids.

{component.kpi-card-label} — Small caption text above the metric value. {colors.muted}, {typography.caption} (12px/400). Examples: "Recent hires", "Earned so far", "Revenue", "Contributions this year".

{component.kpi-card-value} — The large number inside a KPI card. {colors.ink}, {typography.metric-value} (28px/600, -0.02em tracking). This is the single heaviest typographic moment in the system — reserved exclusively for numbers that matter.

{component.kpi-card-change-positive} — Inline badge showing positive percentage change. Background {colors.success-bg} (pale green), text {colors.success-text} (dark olive), {typography.metric-change} (13px/500), {rounded.sm} (3px), 2px 6px padding. Examples: "+14.8%", "+9.4%", "+5.3%", "+12.8%". The green-on-green combination instantly communicates "good news."

{component.kpi-card-change-negative} — Inline badge showing negative percentage change. Background {colors.error-bg} (pale red), text {colors.error} (red), same typography and sizing as positive variant. Example: "-2.1%" on the "Unit sold" card.

{component.user-card} — Horizontal card displaying a team member. {colors.canvas} background (one level lighter than KPI cards, creating visual grouping), {rounded.lg}, 12px padding. Layout: 40px circular {component.user-avatar} left, then stacked text (user name in {typography.body-md}/{colors.ink}, timestamp in {typography.body-sm}/{colors.muted}), then a {component.user-role} badge below. Used in the "Recent hires" 2×2 grid.

{component.user-avatar} — 40×40px circular image container. {colors.surface-strong} fallback background (if no image), {rounded.full} (perfect circle). Displays a photographic headshot cropped to fill the circle.

{component.user-name} — Name text in user cards. {colors.ink}, {typography.body-md} (14px/500). Examples: "Livia Saris", "Jaydon Aminoff", "Maria Lubin", "Ann Press".

{component.user-role} — Pill-shaped role tag below the user name. {colors.surface-soft} background, {colors.muted} text, {typography.caption} (12px/400), {rounded.pill}, 2px 10px padding. Examples: "Backend Engineer", "UI Designer", "User Researcher", "DevOps Engineer". The pill shape signals "category label" distinctly from actionable buttons.

Charts & Visualizations

{component.chart-container} — Wrapper for any chart or graph. {colors.surface-soft} background, {rounded.lg}, 8px padding. Contains a header row (title + time-period tabs) and the visualization area below. Consistent container for bar charts, line charts, and heatmaps.

{component.chart-header} — Title text in the chart container header. {colors.muted}, {typography.caption}. Examples: "Revenue", "Earned so far", "Contributions this year".

{component.chart-tab} — Time-period selector tab (Weekly / Monthly / Yearly). Transparent background, {colors.muted} text, {typography.button}, {rounded.sm}, 4px 10px padding. Appears as understated text buttons in the upper-right of chart containers.

{component.chart-tab-active} — Currently selected time period tab. Same structure as {component.chart-tab} but with {colors.ink} text and increased font-weight (600), creating clear selected-state indication without background color change.

{component.stat-grid-item} — Individual cell in the four-column stats row at the bottom. Contains an icon, label, value, and change badge. Transparent background with {colors.ink} text at {typography.body-md}.

{component.stat-label} — Label text in stat grid items. {colors.muted}, {typography.caption}. Examples: "Customers", "Unit sold", "Orders", "Support tickets".

{component.stat-value} — Numeric value in stat grid items. {colors.ink}, {typography.title-md} (16px/500). Examples: "11,592", "385", "1,394", "708".

Inputs & Forms

{component.text-input} — Standard text entry field. {colors.canvas} background, {colors.ink} text, {typography.body-md}, {rounded.md} (8px), 8px 12px padding, 1px {colors.hairline} border. The sidebar search field is a specialized variant with {rounded.pill} and {colors.surface-tertiary} background.

{component.text-input-focus} — Focused state of text input. Retains {colors.canvas} background but gains {colors.border-focus} (blue) border or {extensions.shadows.focus-ring} outline. Transition timing follows {extensions.motion.duration} (300ms) with {extensions.motion.easing}.

{component.select-input} — Dropdown selector (e.g., "Board team" dropdown in Recent hires). Transparent background, {colors.ink} text, {typography.body-md}. Renders as text with a chevron indicator, no visible border until interacted with.

Miscellaneous

{component.pagination-button} — Navigation control for carousel/grid pagination ("← Previous", "Next →"). {colors.canvas} background, {colors.ink} text, {typography.button}, {rounded.md}, 8px 16px padding. Styled identically to {component.button-secondary} in the current view.

{component.floating-action-panel} — Fixed-position panel visible at bottom-right of the viewport (partially visible in screenshot). {colors.canvas} background, {rounded.xl} (16px), 12px padding, subtle shadow elevation. Contains AI assistant or quick-action controls. Appears to be a persistent utility panel that doesn't scroll with content.

{component.theme-toggle} — Small control for switching between light/dark mode. {colors.surface-strong} background, {colors.muted} icon, {rounded.pill} shape, 4px padding. Shows sun/moon icons indicating current mode (light mode active in screenshot).

Do's and Don'ts

Do

• Do reserve {colors.accent} (#2563eb) exclusively for primary actions and active states — never use it for body text, borders, or decorative elements. The blue should feel scarce and intentional.
• Do apply {rounded.pill} (9999px) to all avatars, search fields, and category badges — this shape is your semantic marker for "identity or classification" elements.
• Do wrap positive percentage changes in {component.kpi-card-change-positive} with {colors.success-bg} background and {colors.success-text} text — the green-on-green pattern is instantly recognizable as "good news."
• Do keep KPI card internal padding at {spacing.base} (8px) — the light-gray background already provides visual containment; more padding would waste space in a data-dense dashboard.
• Do use {typography.metric-value} (28px/600) only for the large numbers inside KPI cards — this is the single heaviest type moment and loses impact if overused.
• Do maintain {colors.surface-soft} (#f7f7f7) as the universal card background — consistency here lets users instantly recognize "this is a content module" versus the {colors.canvas} page background.
• Do apply {extensions.shadows.focus-ring} (2px blue + 4px spread) to all focus-visible states — keyboard users rely on this high-contrast ring to locate their position.
• Do keep the sidebar navigation at {rounded.lg} (10px) for active/item backgrounds — this matches card corner radius and creates visual harmony between navigation and content regions.
• Do use {colors.heatmap-cell} violet (#7c3aed) exclusively for activity/intensity visualizations — introducing violet elsewhere would confuse the semantic color mapping.
• Do constrain all font weights to 400, 500, and 600 — Inter at 700+ feels aggressive and contradicts the system's measured voice.

Don't

• Don't substitute {colors.primary} (#030000) for {colors.accent} (#2563eb) on buttons — primary is a text color (near-black ink), not a button background. Buttons use accent blue.
• Don't bold display headings beyond weight 600 — the {typography.display-xl} at 600 is the maximum; anything heavier looks shouting and unprofessional.
• Don't add gradient backdrops to the hero/dashboard header area — the canvas is {colors.canvas} white, full stop. Depth comes from card background color differences, not atmospheric gradients.
• Don't expand the radius vocabulary beyond {rounded.sm}/{rounded.md}/{rounded.lg}/{rounded.pill} for 95% of components — the 3px/8px/10px/pill quartet handles virtually every shape need.
• Don't use shadows thicker than {extensions.shadows.lg} (0 4px 12px rgba(0,0,0,0.08)) — this system believes in color-block separation, not dramatic elevation. Heavy shadows look out of place.
• Don't apply {colors.success} green to anything except metric change indicators and chart data — green buttons, green borders, or green text elsewhere break the semantic contract.
• Don't reduce KPI card padding below {spacing.base} (8px) — the 8px internal margin is the minimum comfortable spacing for metric value + label + change badge to coexist without cramping.
• Don't mix serif or display fonts into the dashboard — Inter carries every role from 12px captions to 28px metrics. Introducing a second typeface fragments the visual voice.
• Don't make the sidebar wider than 234px or narrower than 200px — this width balances navigation label length against content area real estate at typical dashboard viewports.
• Don't use {colors.ink} (#030000) for body paragraphs or descriptions — reserve it for headings and metric values; body text uses the slightly warmer {colors.body} (#300000).

Motion & Animation

Transition Tokens

--transition-base: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-width: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-gap: gap 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-expand: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-resize: width 0.2s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-reveal: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transform-slide: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), translate 0.3s cubic-bezier(0.4, 0, 0.2, 1), scale 0.3s cubic-bezier(0.4, 0, 0.2, 1), rotate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-search: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Keyframe Animations

• ai-chat-text-shimmer — Subtle shimmer effect moving across AI-generated text, suggesting "thinking" or "streaming" content.
• number-fade — Smooth numerical transition when KPI values update (e.g., metric ticking from $7,460 to $7,462).
• flap-fall / flap-rise — Vertical motion for collapsible sections or accordion panels, likely used in sidebar sub-menus.
• row-grow-in / row-slide-in / row-fade-in — Entrance animations for table rows or list items appearing in user grids/data tables.
• row-collapse-out / row-slide-out / row-fade-out — Exit animations for removed list items or dismissed notifications.
• label-out / label-in — Label text transitions for form field focus states or animated counters.
• check-draw — SVG stroke animation for checkmark icons appearing in task completion states.
• cell-pop — Scale-and-fade entrance for individual heatmap cells or grid tiles.
• bar-rise — Vertical grow animation for bar chart columns animating from 0 to full height on chart reveal.
• chart-reveal — Coordinated entrance for entire chart containers (bars rising, lines drawing, labels fading in).
• bui-agent-thinking-star / bui-agent-thinking-dash — Pulsing animations for AI assistant "thinking" indicators.
• bui-composer-loader-dash / bui-composer-mic-bars — Audio-visualizer-style animations for voice input or composition loading states.

Interaction Patterns

• Sidebar search expand: The {component.sidebar-search} field transitions width, border-radius, and background-color over 300ms when focused, likely expanding from a compact state to a wider input.
• Sidebar collapse: The entire sidebar column transitions width over 300ms (matching --transition-width) when toggled, compressing to an icon-only rail or hiding entirely on smaller viewports.
• KPI number tickers: Metric values animate via number-fade when data refreshes, creating a smooth count-up/count-down effect rather than abrupt text replacement.
• Chart entrance: Bar charts animate columns upward via bar-rise on scroll-into-view or mount; line charts draw their paths; the activity heatmap cells pop in sequentially via cell-pop.
• Focus rings: All interactive elements (buttons, inputs, nav items) transition a {extensions.shadows.focus-ring} blue ring on :focus-visible, with 150ms duration (shorter than the 300ms base for immediate feedback).
• Hover lifts: While hover states aren't documented (per policy), the transition tokens suggest buttons and cards likely apply subtle transform: translateY(-1px) or background-color shifts on :hover.
• Accordion/sub-menu: Sidebar navigation items with children (implied by the presence of flap-fall/flap-rise keyframes) animate their height and opacity when expanding/collapsing sub-navigation.
• Toast notifications: The {component.floating-action-panel} and any toast messages likely use row-slide-in/row-fade-in for entrance and row-slide-out/row-fade-out for dismissal.

Imagery Style

• Photographic avatars: User profile images are real photographic headshots cropped to 40×40px circles, displaying faces with neutral-to-friendly expressions. No illustrations or icons substitute for photos — every user card shows an actual person.
• No product/marketing imagery: The dashboard contains no hero illustrations, lifestyle photography, product screenshots, or 3D renders. This is purely a data-visualization interface where charts, numbers, and icons carry all visual communication.
• Icon-driven visual language: In the absence of photography, the system relies on a custom SVG icon set (see Icon System section) for visual interest — icons accompany every navigation item, stat card, and action button.
• Chart-as-imagery: Bar charts, line charts, and heatmaps serve as the primary "visual elements." The lime-green bars and violet heatmap cells provide color and shape interest that would otherwise come from illustrations in a marketing context.
• Avatar treatment: Circular crops with no border, no shadow, no ring. The photograph fills the circle completely. Background falls back to {colors.surface-strong} gray if no image is loaded.
• Color fidelity: User photographs appear unfiltered — no Instagram-style warming, no duotone overlays, no grayscale treatment. Raw, professional headshot aesthetics.

Icon System

• Library: Custom SVG icons (no detected third-party library — TailwindLikely flag is true but iconLibs array is empty, indicating hand-crafted or in-house SVG components).
• Specific icons observed:
  • Home/house (sidebar nav, breadcrumb)
  • Layout/grid (Project board)
  • Megaphone (Marketing)
  • Calendar grid (Calendar)
  • Bank/building (Finance)
  • Cross/asterisk (Medical Report)
  • Chat bubble (AI Chat)
  • Image landscape (AI Image Generation)
  • User circle (Profile)
  • Headphones (Support)
  • Gear (Settings)
  • Search magnifying glass (Quick Search)
  • Bell/notification (top nav)
  • Filter lines (Filters button)
  • Plus sign (Create ticket)
  • Sun/moon (theme toggle)
  • Chevron right (breadcrumbs, Next button)
  • Chevron left (Previous button)
  • Chevron down (dropdown indicators)
  • Users/people (Customers stat)
  • Package box (Unit sold stat)
  • Shopping cart (Orders stat)
  • Smiley face (Support tickets stat)
• Treatment: Stroke-based icons (not filled), rendered in currentColor for seamless color inheritance. Default icon color matches parent text color — {colors.muted} for secondary icons, {colors.ink} for primary icons.
• Size: Icons appear at 16px (inline with {typography.body-sm} text), 20px (sidebar navigation), and 24px (stat card leaders). The {component.icon-button} uses a 32px hit target with a centered 16–20px icon.
• Alignment: Icons are vertically center-aligned with adjacent text using flexbox (items-center). In sidebar nav items, icons have a small right gap (~8px) before the label text. In stat cards, icons appear above the label text with vertical stacking.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Remix — the font-loading strategy, 
                  server-component architecture, and Tailwind integration suggest 
                  a modern React meta-framework with SSR/SSG capabilities.
- Styling:        Tailwind CSS v3.4+ with custom design tokens extended via 
                  tailwind.config.js. Utility-first approach matches the 
                  extracted class naming conventions (flex, rounded-full, etc.).
- Fonts:          Self-hosted Inter WOFF2 files (variable font, weights 100-900) 
                  loaded via @font-face with font-display: swap. Fallback to 
                  "Inter Fallback" (Arial-metric-matched) then system fonts.
- Animation:      CSS transitions + keyframes defined in global CSS or Tailwind 
                  @keyframes blocks. No JS animation library required — the 
                  extracted transitions are all CSS-native.
- Icons:          Custom SVG components (React components rendering <svg> elements) 
                  with strokeWidth and currentColor props. Consider extracting 
                  to a local icon library or adopting Lucide React for 
                  consistency if custom maintenance is burdensome.
- Component lib:  Headless UI (@headlessui/react) or Radix Primitives for 
                  accessible dropdowns, dialogs, and popovers. The focus-ring 
                  management and keyboard interaction patterns suggest 
                  accessible component primitives under the hood.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Sidebar collapses to hamburger menu; grid collapses to single column; stat row stacks vertically; charts shrink to full-width stacked layout. | | Tablet | 640px – 1024px | Sidebar becomes an overlay drawer (fixed positioned, slides in/out); 2-column dashboard grid persists where possible; KPI cards may stack 1-column. | | Desktop | 1024px – 1280px | Sidebar visible as fixed left rail (234px); full 2-column dashboard layout; all grid arrangements visible. | | Wide | > 1280px | Content area maxes at ~1168px with centered margin; sidebar remains 234px; additional whitespace appears on viewport edges. |

Touch Targets

• {component.button-primary}: ~40px height (8px padding × 2 + 14px font ≈ 36–40px), exceeds WCAG AAA 44×44px minimum when including horizontal padding.
• {component.button-secondary}: Same dimensions as primary, passes touch-target guidelines.
• {component.icon-button}: 32×32px explicit size — below WCAG AAA 44×44px recommendation. Should be enlarged to 44×44px or wrapped in an invisible 44px hit-area extension for mobile.
• {component.sidebar-search}: Pill-shaped, ~36–40px height depending on font metrics. Acceptable but could benefit from 44px minimum on mobile.
• {component.sidebar-nav-item}: ~40px height (8px padding × 2 + 14px font). Marginal — consider increasing to 44px for mobile touch interfaces.
• {component.text-input}: ~40px height with 8px vertical padding. Adequate for desktop, increase to 44px+ for mobile forms.

Collapsing Strategy

• Sidebar navigation: On tablet and below (< 1024px), the fixed left rail converts to an overlay drawer triggered by a hamburger icon. The CSS class lg:hidden on the mobile sidebar container confirms this behavior. The drawer likely uses {transform-slide} transitions for smooth enter/exit.
• Dashboard grid: The 2-column layout (Recent hires | Earned so far) collapses to single-column stacking on mobile. The 4-column stat row (Customers | Units | Orders | Support) becomes a 2×2 grid on tablet and a single column on mobile.
• Hero/header: The top navigation's action cluster (notifications, filters, Create ticket) may move to a overflow menu or stack vertically on narrow viewports. Breadcrumb trail truncates with ellipsis on intermediate segments.
• Charts: Bar charts and line charts maintain aspect ratio but reduce in width. The activity heatmap may hide month labels or reduce cell size. Touch interactions replace hover for chart tooltips.
• Floating action panel: The bottom-right {component.floating-action-panel} remains fixed-position on all breakpoints but may reduce in width or reposition on mobile to avoid obscuring content.
• Pagination controls: "Previous"/"Next" buttons remain visible but may convert to icon-only (arrows without text) on mobile to save horizontal space.

Image Behavior

• User avatars: Maintain 40×40px circle on all breakpoints. On mobile, the 2×2 user card grid becomes a single-column list, so avatars align vertically rather than in a square arrangement.
• Chart illustrations: Bar charts and line charts are CSS/SVG-based (not raster images), so they scale vectorially. The bar chart columns proportionally reduce width to fit narrower containers; the line chart maintains its aspect ratio via SVG viewBox.
• Heatmap: The activity heatmap cell grid reduces in cell size on mobile. Month labels may rotate 45 degrees or abbreviate (J, F, M, A...) to fit. Cell click/tap replaces hover for detail tooltips.

Iteration Guide

1. Initialize with Tailwind CSS — Set up a Next.js or Remix project with Tailwind v3.4+. Copy every color, font, radius, and spacing value from the YAML frontmatter into tailwind.config.js under theme.colors, theme.fontFamily, theme.borderRadius, and theme.spacing. Never hard-code a hex or px value that has a corresponding token — always reference theme('colors.primary') or the equivalent Tailwind token syntax.

2. Implement the layout shell first — Build the two-zone layout: fixed sidebar (234px, position: sticky; top: 24px; height: calc(100vh - 24px)) and fluid main content area (flex: 1; max-width: 1168px; margin: 0 auto). Use {spacing.3xl} (24px) for the main content padding. Verify the sidebar and content area share {colors.canvas} background with no border between them.

3. Build the sidebar navigation component — Implement {component.sidebar-nav-item} as a reusable component accepting icon, label, active, badgeCount, and onClick props. Active state applies {colors.accent} background and {colors.on-accent} text. Add the {component.sidebar-search} pill at the top with the expand-on-focus transition (--transition-search). Include the user identity button, theme toggle ({component.theme-toggle}), and bottom account switcher.

4. Create the KPI card component — Build {component.kpi-card} accepting label, value, change, changeType ('positive' | 'negative'), and optional children for embedded charts or user grids. Apply {colors.surface-soft} background, {rounded.lg}, {spacing.base} padding. Render the change badge using {component.kpi-card-change-positive} or {component.kpi-card-change-negative} based on changeType.

5. Implement the chart container pattern — Create {component.chart-container} with header slot (title left, tabs right) and body slot (chart visualization). Wire up {component.chart-tab} / {component.chart-tab-active} for time-period switching. Use CSS @keyframes for bar-rise and chart-reveal animations on mount.

6. Add all button variants with state classes — Implement {component.button-primary}, {component.button-secondary}, {component.button-ghost}, and {component.icon-button} as separate components (or variant classes). Include -hover and -active pseudo-variant styles even though they're inferred — developers will need them. Apply {extensions.shadows.button-inset} to the active state of primary buttons.

7. Wire up the animation system — Define all @keyframes listed in the Motion & Animation section in your global CSS. Create React hooks or Tailwind utilities for useAnimationOnScroll (triggering row-fade-in, cell-pop, bar-rise when elements enter the viewport via IntersectionObserver). Ensure all transitions use the 300ms cubic-bezier(0.4, 0, 0.2, 1) timing function.

8. Responsive breakpoint implementation — Use Tailwind's sm:, md:, lg:, xl: prefixes to collapse the sidebar to a drawer below lg: (1024px), stack grid columns below md: (768px), and adjust touch targets below sm: (640px). Test the {component.icon-button} 32×32px hit target on mobile — consider wrapping in a 44×44px invisible container.

9. Accessibility pass — Ensure every interactive element has focus-visible:{extensions.shadows.focus-ring} styling. Verify color contrast ratios: {colors.ink} on {colors.canvas} (~18:1, excellent), {colors.body} on {colors.surface-soft} (~14:1, excellent), {colors.on-accent} on {colors.accent} (~4.6:1, AA compliant for bold/large text). Add aria-label to icon-only buttons.

10. Run linting and validation — After implementation, run npx @google/design.md lint DESIGN.md (or manual review) to catch broken token references ({colors.nonexistent}), orphaned tokens (defined but never referenced in prose), and contrast ratio warnings. Verify every component in the frontmatter has a corresponding markdown entry in the Components section, and every typography role appears in the Hierarchy table.

Font Setup: The system uses self-hosted Inter variable font. For Google Fonts fallback, add this link tag:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

Define CSS variables:

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

If Inter is unavailable, substitute Plus Jakarta Sans as the closest match for the geometric humanist feel.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover background colors, transform values, and shadow changes are not documented. Implementation teams should derive these from the active/pressed states (slightly lighter than active, e.g., {colors.accent-hover} for button hover).
• Loading/skeleton states: No loading skeletons, spinners, or shimmer placeholders were visible in the static screenshot. The ai-chat-text-shimmer keyframe suggests shimmer patterns exist for AI content streaming, but general data-loading states (skeleton cards, pulsing dots) are undocumented.
• Form validation states: Beyond {component.text-input-focus}, error states (red border, error message text, icon feedback) and success states for form inputs are not represented in the current view. The {colors.error} and {colors.error-bg} tokens exist but their application to input chrome is inferred.
• Dark mode tokens: The {extensions.mode} is "light", and a theme toggle ({component.theme-toggle}) is present, but no dark-mode color mappings (surface-dark, text-on-dark, etc.) were extractable from the light-mode screenshot. A full dark-theme token set would need to be designed following Material Design 3 dark-surface guidelines.
• Authenticated/gated flows: Login, signup, password reset, onboarding, and permission-denied screens are not visible. These may introduce new layout patterns (centered auth cards, progress steppers) outside the dashboard shell.
• Modal/dialog specifications: While {extensions.shadows.md} and {extensions.shadows.lg} suggest elevation levels for modals, no actual modal component, backdrop treatment, close button, or header/body/footer structure was captured.
• Table component: The mention of "customers data table" in the page description implies a data table component exists somewhere in the template, but no table rows, headers, sort indicators, or pagination bars appear in the current screenshot. Table-specific tokens (row hover, selected-row background, sticky header) are absent.
• Dropdown menu internals: Select inputs and dropdown triggers exist ({component.select-input}), but the expanded dropdown panel (options list, highlighting, keyboard navigation, separator items) was not open during capture.
• Tooltip/popover specs: Chart hover tooltips, icon button tooltips, and help-text popovers are implied by the data-dense nature of the dashboard but not visually documented.
• CSS variable name mismatches: The source CSS references Lab-color tokens (e.g., lab(2.75381 0 0) for ink, lab(84.92 0 -0.0000119209) for surface-soft) and semantic names like --background-tertiary-default that don't map 1:1 to the design-token names in this spec. Implementers should use the hex values and token names from this DESIGN.md, not the raw CSS variable names, to avoid confusion.