# Dimension — Design System
> An AI-powered work assistant that integrates with your existing tools to automate daily tasks and workflows.
- **Canonical:** https://uiuxskills.com/library/dimension
- **Source:** https://www.dimension.dev
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:07.906Z

---

---
version: alpha
name: Dimension
description: >-
  An AI-powered work assistant that integrates with your existing tools to automate daily tasks and
  workflows.
tone: >-
  Professional, efficient, and modern. The tone is direct and utility-focused, aimed at busy
  professionals.
color-scheme: dark
colors:
  primary: "#FFB300"
  secondary: "#1E88E5"
  surface: "#0C0C0C"
  surface-container: "#161616"
  on-surface: "#FFFFFF"
  on-primary: "#000000"
  error: "#D32F2F"
  outline: "#BDBDBD"
  focus-ring: "#D8B4FE"
  surface-bright: "#262626"
typography:
  display-lg:
    fontFamily: DM Sans
    fontSize: 48px
    fontWeight: 700
  headline-lg:
    fontFamily: DM Sans
    fontSize: 32px
    fontWeight: 700
  headline-md:
    fontFamily: DM Sans
    fontSize: 24px
    fontWeight: 700
  body-md:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 400
  body-sm:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 400
  label-md:
    fontFamily: DM Sans
    fontSize: 14px
    fontWeight: 500
  label-sm:
    fontFamily: DM Sans
    fontSize: 12px
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "#474747"
    textColor: "#161616"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#666666"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: "#FFFFFF"
    textColor: "#161616"
    typography: "{typography.label-md}"
  card:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.xl}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.secondary}"
  link-hover:
    textColor: "#60A5FA"
  badge:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "#FFFFFF"
  swatch-primary:
    backgroundColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0.0, 0.2, 1)
elevation:
  sm: 0 2px 4px rgba(0, 0, 0, 0.1)
  md: 0 4px 8px rgba(0, 0, 0, 0.2)
  lg: 0 8px 16px rgba(0, 0, 0, 0.3)
---

## Overview

Dimension features a sophisticated, dark-themed aesthetic that emphasizes clarity and focus. The visual language is professional and modern, utilizing high-contrast typography and subtle gradients to create a sense of depth and intelligence.

## Colors

The color palette is designed for a high-contrast, dark-mode environment, prioritizing readability and focused user attention through strategic accent usage.

*   Primary (#FFB300): High-visibility accent for primary call-to-action highlights.
*   Secondary (#1E88E5): Used for secondary actions and UI elements requiring distinct visual weight.
*   Surface (#0C0C0C): The foundational dark background color for the application interface.
*   Surface-container (inferred) (#161616): Used for cards and elevated containers to provide subtle separation from the background.
*   On-surface (#FFFFFF): Primary text color for high readability against dark backgrounds.
*   On-primary (inferred) (#000000): Text color for buttons with primary background colors.
*   Error (#D32F2F): Semantic color for error states and destructive actions.
*   Outline (#BDBDBD): Used for borders and dividers to maintain structure without visual clutter.
*   Focus-ring (#D8B4FE): Used for accessibility focus states on interactive elements.
*   Surface-bright (inferred) (#262626): Used for hover states and active UI components.

## Typography

The brand uses the DM Sans typeface exclusively, favoring a clean, geometric sans-serif aesthetic that reinforces the professional and utility-focused tone.

*   Display-lg: Used for primary hero headlines.
*   Headline-lg: Used for section titles.
*   Headline-md: Used for sub-section headers.
*   Body-md: Standard body text for paragraphs and descriptions.
*   Body-sm (inferred): Used for secondary information and labels.
*   Label-md (inferred): Used for button labels and navigation items.
*   Label-sm: Used for small UI captions and metadata.

## Layout

The site utilizes a centered container layout with a max-width constraint, ensuring readability across large screens. The spacing system is built on a 4px base unit, with consistent gutters and section margins to maintain rhythm. The page pattern follows a logical flow: nav, hero, features, integrations, and footer. The hero composition features a centered headline and subhead with a single primary CTA, set against a soft-focus background. The design is mobile-first, with navigation collapsing into a drawer and grid layouts stacking vertically on smaller viewports.

## Elevation & Depth

Depth is conveyed through subtle, single-layer shadows across three levels to distinguish interactive components from the background.

*   Elevation.sm: Subtle card lift.
*   Elevation.md: Standard depth for dropdowns and popovers.
*   Elevation.lg: High-emphasis depth for modals, drawers, or primary CTA containers.

## Shapes

The brand utilizes a rounded aesthetic to balance its professional, enterprise-grade utility with a approachable, modern feel. 

Buttons utilize `{rounded.full}` to create a distinct, pill-shaped silhouette, while cards and input fields use `{rounded.lg}` and `{rounded.md}` respectively to maintain a soft, cohesive geometry across the interface.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons are the primary interactive elements, utilizing `{rounded.full}` for a pill shape. The primary variant uses a dark background with `{typography.label-md}`, while the secondary variant provides a high-contrast alternative. Use primary buttons for the main action and secondary buttons for supporting tasks.

### Card
Cards are the primary container for content, utilizing `{colors.surface-container}` for background and `{rounded.lg}` for shape. Use them to group related information; ensure `{spacing.md}` is maintained between elements within the card to prevent visual crowding.

### Input Field
Input fields use `{colors.surface}` with a `{colors.outline}` border and `{rounded.md}` corners. When active, the border should transition to `{colors.focus-ring}` to meet accessibility standards for keyboard navigation.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary CTAs | Use `{colors.error}` for non-destructive actions |
| Apply `{typography.display-lg}` for hero headlines | Use `{typography.label-sm}` for primary body text |
| Use `{rounded.full}` for all buttons | Mix sharp corners with `{rounded.lg}` cards |
| Maintain `{spacing.md}` between card elements | Use `{spacing.xs}` for major section margins |
| Use `{colors.surface-container}` for card backgrounds | Use low-contrast text on `{colors.surface}` |
| Apply `{typography.body-md}` for primary paragraphs | Use `{typography.headline-lg}` for secondary labels |
| Use `{colors.focus-ring}` for input focus states | Ignore `{colors.outline}` for structural dividers |

## Content Style

CTA labels are written as imperative verbs in sentence case, focusing on direct, action-oriented language (e.g., "Get Started").

Headings are benefit-driven and concise, designed to communicate the value proposition of the AI assistant immediately.

Copy density is kept low; paragraphs are short and scannable, utilizing bullet points frequently to break down feature lists and technical capabilities.

## Imagery & Icons

The imagery style is mixed, combining clean UI screenshots with abstract, soft-focus background gradients to convey a modern, AI-driven atmosphere. Iconography should remain minimal and consistent with the DM Sans typeface weight. Avoid overly complex illustrations; prioritize imagery that highlights the product interface or provides atmospheric context.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Dimension, a dark-mode enterprise AI assistant brand with a direct, utility-focused tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its YAML token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, pixel sizes, or raw font weights.
2. Use only the component variants defined under `components:`. Buttons are always `{rounded.full}`; cards use `{rounded.lg}`; inputs use `{rounded.md}`. Do not invent new shapes or variants.
3. Follow the Layout section: centered container, mobile-first, nav → hero → features → integrations → footer. Collapse navigation to a drawer below 768px; stack grids vertically.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it (e.g., using `{colors.error}` for a non-destructive action), surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source exists (theme file, Storybook), those values take precedence.

## Output contract

**Must:**
- Use token names for every color, spacing, radius, typography, elevation, and motion value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{elevation.sm}` / `{elevation.md}` / `{elevation.lg}` at the correct depth levels per the Elevation section.
- Write CTA labels as imperative verbs in sentence case per Content Style.

**Must NOT:**
- Invent colors, radii, or font scales absent from the spec.
- Use generic utility defaults when a named token exists.
- Add emoji, filler text, or marketing copy.
- Reference any specific framework or toolchain.
- Rewrite, replace, or invent page copy, headings, or button labels.
- Alter navigation items, routes, or page section order as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the user rather than inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface-container}`; for text on dark surfaces, default to `{colors.on-surface}`.
- For unspecified breakpoints, apply mobile-first layout with a single breakpoint at 768px per the Layout section.
- Apply `{motion.duration-short}` with `{motion.easing-standard}` for micro-interactions; reserve `{motion.duration-medium}` for larger transitions such as drawers or modals.