# Operate — Design System
> A precision-built CRM designed for sales, built for founders.
- **Canonical:** https://uiuxskills.com/library/operate
- **Source:** https://operate.so
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:10:57.870Z

---

---
version: alpha
name: Operate
description: A precision-built CRM designed for sales, built for founders.
tone: >-
  Direct, confident, and slightly irreverent. The brand voice balances professional utility with a
  'founder-first' energy that embraces the chaos of early-stage sales.
color-scheme: light
colors:
  primary: "#117025"
  surface: "#FFFFFF"
  surface-container: "#E0E5E0"
  on-surface: "#292524"
  on-primary: "#FFFFFF"
  outline: "#292524"
  error: "#DC2626"
  success: "#117025"
  neutral-muted: "#4B5563"
  focus-ring: "#117025"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-md:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#0D5A1D"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#0D5A1D"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-on-primary:
    backgroundColor: "{colors.on-primary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-neutral-muted:
    backgroundColor: "{colors.neutral-muted}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1)
---

## Overview

Operate is a high-performance, minimalist CRM designed to bring clarity to the chaotic early stages of sales. The visual identity is stark and professional, utilizing a monochromatic base punctuated by a vibrant "waitlist-green" to signal action and progress. It balances a founder-first, irreverent energy with the precision of a tool built for speed.

## Colors

The color strategy focuses on high-contrast utility, using a neutral palette for structure and a single, high-impact accent color to drive user interaction.

*   Primary (#117025): The signature "waitlist-green" used for primary CTAs, success states, and focus indicators.
*   Surface (#FFFFFF) (inferred): The clean, white foundation for the entire application interface.
*   Surface-container (#E0E5E0): A subtle grey-green used for secondary containers, badges, and background segments.
*   On-surface (#292524): The primary text color, providing a deep, readable contrast against light surfaces.
*   Outline (#292524): The structural border color for inputs, cards, and dividers.
*   Error (#DC2626) (inferred): Used for destructive actions and validation feedback.
*   Neutral-muted (#4B5563): A secondary text color reserved for metadata and helper text.
*   Focus-ring (#117025) (inferred): The high-visibility indicator for keyboard navigation and active states.

## Typography

Typography is clean and functional, prioritizing readability and hierarchy to support a dense, information-rich interface.

*   Display-lg (inferred): Reserved for high-impact hero headlines.
*   Headline-lg (inferred) & Headline-md (inferred): Used for section and sub-section titles to maintain clear modular structure.
*   Body-md (inferred): The standard weight for paragraph text.
*   Body-sm: Used for secondary metadata and supplemental descriptions.
*   Label-md: The primary choice for button labels and interactive UI controls.
*   Label-sm: Used for small UI labels, status tags, and micro-copy.

## Layout

The layout follows a mobile-first, precision-oriented grid. Spacing is granular and tight, utilizing a scale that ranges from 4px (`spacing.xs`) to 48px (`spacing.2xl`) to ensure information density without clutter. The page structure follows a logical flow: nav, hero, features, team, waitlist, and footer. Responsive behavior is handled by transitioning from dense vertical stacks on mobile to multi-column grids on desktop, ensuring the interface remains usable across all viewports.

## Elevation & Depth

The design relies on minimal elevation, favoring borders and color contrast to define hierarchy rather than heavy drop shadows. When depth is required, the following tokens apply: `elevation.sm` for subtle card lift, `elevation.md` for popovers or dropdowns, and `elevation.lg` for modal or drawer overlays. These shadow values are inferred to maintain a clean, flat aesthetic.

## Shapes

The shape language is functional and deliberate. Sharp, tight corners (2px, 6px) are used for data-heavy components like input fields and tables to emphasize precision. In contrast, fully rounded corners (`rounded.full`) are reserved for primary CTAs and status badges, creating a distinct visual distinction between interactive elements and static data containers.

## 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 use `{typography.label-md}` and are styled for high visibility. Use `button-primary` for main actions, which features a vibrant background and white text, and `button-secondary` for tertiary actions, utilizing a transparent background and a defined `{colors.outline}` border.

### Card
Cards are the primary container for data, utilizing `{rounded.md}` and `{colors.outline}` to maintain a clean, structured look. Use `card` for standard content and `card-elevated` when specific items require subtle visual separation from the background.

### Input Field
Inputs are built for speed and clarity, using `{rounded.sm}` and `{colors.outline}`. Apply `input-field-focus` to provide clear visual feedback when an input is active, ensuring the user knows where their focus is within a dense form.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.primary}` for non-interactive text. |
| Apply `{rounded.md}` to all data cards. | Do not mix `{rounded.lg}` with `{rounded.sm}` in the same group. |
| Use `{typography.body-sm}` for secondary metadata. | Never use `{typography.display-lg}` for body copy. |
| Maintain `{spacing.md}` between major content sections. | Avoid large, loose margins; keep spacing tight. |
| Use `{colors.outline}` for all structural dividers. | Do not use soft shadows on input fields. |
| Apply `{rounded.full}` for status badges. | Do not use low-contrast colors for primary buttons. |
| Use `{input-field}` for form data entry. | Do not use `{card}` as an interactive button. |
| Use `{badge-success}` to highlight deal wins. | Do not use `{colors.error}` for non-destructive labels. |

## Content Style

CTA labels are imperative and action-oriented, using short, punchy verbs (e.g., "Request early access"). Avoid passive language; every button should clearly communicate the result of the interaction.

Headings are direct and benefit-driven, designed to address specific founder pain points immediately. They should be declarative and concise, avoiding unnecessary fluff.

Copy density is managed through scannable, short paragraphs. Use bullet points frequently to break up complex information and bold text to emphasize key signals within the narrative.

## Imagery & Icons

The imagery style is mixed, combining clean, high-contrast UI screenshots with simple, abstract iconography. Imagery is used sparingly and only to emphasize specific product functionality or to provide visual relief in data-heavy sections. Iconography should remain minimal and consistent with the brand's bold, monochromatic aesthetic.