# Scale — Design System
> A professional, minimalist error state interface for a data-centric platform.
- **Canonical:** https://uiuxskills.com/library/scale
- **Source:** https://scale.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:00.312Z

---

---
version: alpha
name: Qualified
description: Conversational sales and marketing platform for B2B websites.
tone: Professional, direct, and efficient. The tone is focused on utility and immediate engagement.
color-scheme: light
colors:
  primary: "#000000"
  on-primary: "#FFFFFF"
  surface: "#FFFFFF"
  surface-container: "#F4F4F5"
  surface-bright: "#E7E7E9"
  on-surface: "#000000"
  outline: "#888F91"
  error: "#D32F2F"
  success: "#388E3C"
  neutral: "#6E7879"
typography:
  display-lg:
    fontFamily: system-ui, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: system-ui, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: system-ui, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: system-ui, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: system-ui, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: system-ui, sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: system-ui, sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: system-ui, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: system-ui, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#000000"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.surface-container}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.neutral}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.surface-container}"
    height: 1px
  badge-error:
    backgroundColor: "#FDECEA"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-outline:
    backgroundColor: "{colors.outline}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Qualified utilizes a high-contrast, minimalist aesthetic built on a strict black, white, and neutral gray palette. The visual language is designed for enterprise utility, prioritizing immediate clarity and functional, direct user interaction.

## Colors

The color strategy relies on a monochromatic base to minimize visual noise, using black and white to establish a clear hierarchy. Semantic colors are reserved strictly for status indicators to maintain the platform's professional focus.

*   Primary (#000000): Main CTAs and interactive elements.
*   On-primary (#FFFFFF): Text color for primary buttons.
*   Surface (#FFFFFF): Main background color for the application interface.
*   Surface-container (#F4F4F5): Secondary background for cards and containers.
*   Surface-bright (#E7E7E9): Hover or active state for container surfaces.
*   On-surface (#000000): Primary text color for headings and body content.
*   Outline (#888F91): Border and icon color for secondary elements.
*   Error (inferred) (#D32F2F): Semantic color for error states.
*   Success (inferred) (#388E3C): Semantic color for success states.
*   Neutral (#6E7879): Muted text color for secondary information.

## Typography

The typography system uses `system-ui` exclusively to ensure high performance and native readability across enterprise environments. Hierarchy is established through size and weight rather than font variety.

*   Display-lg (inferred): Large display text for hero sections.
*   Headline-lg (inferred): Primary section headings.
*   Body-md (inferred): Standard body text.
*   Label-md (inferred): Button and label text.

## Layout

The layout utilizes a standard grid system with a 4px base unit for spacing, ensuring consistent alignment across all containers. Content is typically centered in constrained containers to maintain focus, with consistent gaps between elements to prevent visual clutter.

## Elevation & Depth

Elevation is applied sparingly using subtle, single-layer shadows to lift interactive elements from the background.

*   Elevation.sm: Subtle lift for cards.
*   Elevation.md: Standard lift for dropdowns and popovers.
*   Elevation.lg: Higher lift for modals and drawer overlays.

## Shapes

A consistent 8px border-radius (`rounded.md`) is applied to interactive components, balancing a soft, approachable feel with the platform's professional, enterprise-grade utility.

## 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
Primary buttons use `{colors.primary}` with `{typography.label-md}`, while secondary buttons use `{colors.surface-container}`. Use these for all user actions; ensure hover states transition to `{button-primary-hover}` for immediate feedback.

### Card
Cards use `{colors.surface}` as a base, often paired with `{colors.surface-container}` for borders or backgrounds. Use these to group related content blocks; apply `{rounded.md}` to maintain the platform's shape language.

### Input Field
Input fields use `{colors.surface}` with an `{colors.outline}` border. On focus, the border must transition to `{colors.primary}` to indicate active state.

### Badge
Badges use `{colors.surface-container}` for background and `{colors.on-surface}` for text. Use these for metadata or status tags; for success states, use `{badge-success}`.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use colors outside the black/white/gray palette. |
| Use `{colors.on-surface}` for primary headings. | Do not use `{colors.error}` for non-critical alerts. |
| Apply `{rounded.md}` to all buttons and input fields. | Do not use rounded corners larger than `{rounded.lg}` for cards. |
| Maintain `{spacing.md}` between form elements. | Do not use `{spacing.xs}` for primary layout gutters. |
| Use `{typography.label-md}` for button text. | Do not mix font families; stick to `system-ui`. |
| Use `{colors.surface-container}` for background panels. | Do not use excessive shadows on flat UI elements. |
| Use `{colors.outline}` for secondary borders and icons. | Do not use high-saturation colors for decorative elements. |
| Use `{typography.body-md}` for standard copy. | Do not use decorative display fonts for body text. |

## Content Style

CTA style: Labels should use imperative verbs, sentence case, and remain short and direct to facilitate quick decision-making.

Heading tone: Headlines must be concrete benefit statements, maintaining a professional and clear voice that avoids marketing fluff.

Copy density: Content should be scannable, using short paragraphs and clear hierarchy to ensure the user can parse information quickly.

## Imagery & Icons

Icons are simple, monochromatic, and utilize a consistent stroke weight to match the minimalist design language. Defer to simple, functional iconography rather than complex illustrations.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Qualified, a minimal enterprise B2B platform. Match its professional, utility-first tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or raw font families.
2. Use only the components defined under `components:`. Do not invent variants (e.g. a "ghost" button or "pill" badge) that the spec does not list.
3. Apply the spacing scale (`{spacing.xs}` through `{spacing.2xl}`) for all padding, margin, and gap values. The base unit is 4px; respect it in every layout decision.
4. Consult the Do's and Don'ts table before generating any interactive or decorative element. If a user request conflicts with a rule in that table, surface the conflict explicitly before proceeding.
5. Apply elevation tokens (`{elevation.sm}`, `{elevation.md}`, `{elevation.lg}`) only at the levels described — cards, dropdowns, and modals respectively. Do not add shadows to flat UI elements.

## Output contract

**Must:**
- Use named tokens for every color, type, radius, spacing, and elevation value.
- Include hover, focus, and disabled states for all interactive components when the spec defines them (`{button-primary-hover}`, `{input-field-focus}`).
- Apply `{rounded.md}` to buttons and inputs; keep cards at `{rounded.md}` and never exceed `{rounded.lg}`.
- Write CTA labels as short, imperative-verb phrases in sentence case per the Content Style section.

**Must NOT:**
- Introduce any color, font, or radius outside the spec — the palette is strictly black, white, and neutral gray with semantic-only exceptions.
- Use generic utility defaults (e.g. `text-gray-500`, `rounded-md`) when a named token exists.
- Apply `{colors.error}` or `{colors.success}` for anything other than status indicators.
- Add emoji, decorative illustrations, or high-saturation colors.
- Rewrite page copy, button labels, headings, or navigation items not explicitly authored by the product team.

## When in doubt
- If a required value is not in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens or variants.
- For ambiguous background roles, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`; for muted secondary text, use `{colors.neutral}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) exists, those values take precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.