# Cola — Design System
> An AI-driven project management platform operating directly within WhatsApp threads.
- **Canonical:** https://uiuxskills.com/library/cola
- **Source:** https://www.colaai.co/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-07-14T18:34:46.723Z

---

---
version: alpha
name: Cola
tagline: Run your project from WhatsApp
description: An AI-driven project management platform operating directly within WhatsApp threads.
tone: Modern, efficient, conversational, and highly organized.
color-scheme: light
colors:
  primary: "#C7F04C"
  on-primary: "#10151E"
  secondary: "#66758A"
  neutral: "#10151E"
  on-neutral: "#FFFFFF"
  surface: "#FFFFFF"
  surface-container: "#F5F5F7"
  surface-bright: "#FFFFFF"
  outline: "#E5E7EB"
  error: "#EF4444"
  success: "#10B981"
typography:
  display-lg:
    fontFamily: Helvetica Neue
    fontSize: 72px
    fontWeight: 800
    lineHeight: "1.02"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Helvetica Neue
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.04"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Helvetica Neue
    fontSize: 32px
    fontWeight: 700
    lineHeight: "1.1"
  headline-md:
    fontFamily: Helvetica Neue
    fontSize: 24px
    fontWeight: 600
    lineHeight: "1.2"
  headline-sm:
    fontFamily: Helvetica Neue
    fontSize: 20px
    fontWeight: 600
    lineHeight: "1.2"
  body-md:
    fontFamily: Helvetica Neue
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: Helvetica Neue
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.4"
  label-md:
    fontFamily: Helvetica Neue
    fontSize: 12px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Helvetica Neue
    fontSize: 10px
    fontWeight: 700
    lineHeight: "1"
    letterSpacing: 0.14em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  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}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 48px
    width: auto
    borderColor: transparent
  button-primary-hover:
    backgroundColor: "#B5DC3C"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 48px
    width: auto
    borderColor: transparent
  button-secondary:
    backgroundColor: "#FCFDFE"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 12px 24px
    height: 48px
    width: auto
    borderColor: "{colors.outline}"
  button-dark:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.on-neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: 10px 20px
    height: 40px
    width: auto
    borderColor: transparent
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.xl}"
    padding: 24px
    width: 100%
    borderColor: transparent
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.xl}"
    padding: 24px
    width: 100%
    borderColor: transparent
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px
    height: 44px
    width: 100%
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px
    height: 44px
    width: 100%
    borderColor: "{colors.primary}"
  link:
    backgroundColor: transparent
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    borderColor: transparent
  link-hover:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
    borderColor: transparent
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
    borderColor: transparent
  badge-error:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
    borderColor: transparent
  badge-success:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.full}"
    padding: 4px 8px
    borderColor: transparent
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
    width: 100%
    borderColor: transparent
  chat-bubble-user:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
    width: auto
    borderColor: transparent
  chat-bubble-agent:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 12px 16px
    width: auto
    borderColor: transparent
motion:
  duration-short: 200ms
  duration-medium: 500ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0, 0, 0, 0.05)
  md: 0 4px 6px rgba(0, 0, 0, 0.05)
  lg: 0 10px 15px rgba(0, 0, 0, 0.05)
---

## Overview

Cola is an efficient, AI-driven project management platform operating directly within WhatsApp threads. Its visual identity is clean, highly structured, and conversational, utilizing a high-contrast light theme with striking lime accents to feel both professional and approachable. The interface bridges the gap between casual chat and structured, enterprise-grade project tracking.

## Colors

The color strategy uses a high-contrast, light-mode palette designed to mimic a clean chat application while injecting a distinct, high-energy brand identity. A vibrant lime green serves as the primary action color, balanced by deep slate neutrals and soft, clean background surfaces that ensure readability during long-form conversational interactions.

*   `colors.primary` (#C7F04C): Vibrant lime green used for primary call-to-actions and brand highlights.
*   `colors.on-primary` (#10151E): Dark slate/black used for text on top of the primary lime green background.
*   `colors.neutral` (#10151E): The dominant dark slate color used for body text, primary headings, and dark buttons.
*   `colors.on-neutral` (inferred) (#FFFFFF): White text used on dark neutral backgrounds.
*   `colors.secondary` (#66758A): Slate grey used for secondary text, labels, and subtle metadata.
*   `colors.surface` (#FFFFFF): The primary background color of the website and main interactive elements.
*   `colors.surface-container` (inferred) (#F5F5F7): A very soft grey used for container backgrounds, chat bubbles, and structured cards.
*   `colors.surface-bright` (inferred) (#FFFFFF): Bright white surface used for elevated cards and interactive elements.
*   `colors.outline` (#E5E7EB): Light grey border color used to define boundaries and input fields.
*   `colors.error` (inferred) (#EF4444): Standard semantic red used for error states and alerts.
*   `colors.success` (inferred) (#10B981): Standard semantic green used for success states and confirmations.

## Typography

The typography relies entirely on a clean, contemporary Helvetica Neue sans-serif stack to maintain a highly legible, neutral, and structured appearance that mirrors contemporary chat applications. Tracking is kept tight on larger display styles to create a bold, editorial feel that contrasts with the highly readable body copy.

*   `typography.display-lg`: Large, high-impact display size used for main hero headings.
*   `typography.display-md`: Medium display size used for section headers and prominent statements.
*   `typography.headline-lg` (inferred): Large headline size used for sub-sections and feature titles.
*   `typography.headline-md` (inferred): Standard headline size for card titles and chat headers.
*   `typography.headline-sm` (inferred): Small headline size for minor groupings and list headers.
*   `typography.body-md` (inferred): Standard body text size for paragraphs and chat messages.
*   `typography.body-sm` (inferred): Small body text size for secondary descriptions and captions.
*   `typography.label-md` (inferred): Standard label size for buttons, badges, and form labels.
*   `typography.label-sm`: Uppercase tracking label used for section overlines.

## Layout

*   **Grid & Spacing**: The layout relies on a clean, centered single-column grid for marketing copy, transitioning into structured chat-like interfaces and side-by-side comparisons, utilizing an 8px base unit (e.g., `spacing.sm` for tight groupings, `spacing.md` for content padding, and `spacing.xl` to `spacing.2xl` for section separation).
*   **Section Order**: The observed page pattern follows a top-to-bottom flow of `nav` → `hero` → `features` → `how-it-works` → `pricing` → `footer`.
*   **Hero Pattern**: A bold, left-aligned typographic headline introducing the product, followed by a structured, rounded container summarizing key features with emojis.
*   **Responsive Behavior**: The layout is highly responsive, collapsing multi-column chat previews and comparison tables into single-column scrollable elements on smaller viewports.

## Elevation & Depth

Depth is conveyed through soft, low-intensity single-layer shadows that subtly separate container elements from the flat white background.

*   `elevation.sm` (inferred): Used for minor interactive elements and small cards to provide a subtle lift.
*   `elevation.md` (inferred): Applied to standard container cards and dropdowns to establish a clear visual hierarchy.
*   `elevation.lg` (inferred): Reserved for prominent modal overlays, floating action buttons, or major interactive cards.
*   *Note*: All elevation values are inferred to maintain a soft, clean aesthetic without harsh contrasts.

## Shapes

The brand employs a highly rounded, friendly, and contemporary shape language that balances approachable conversational elements with structured professional containers. Interactive elements like buttons and badges utilize pill-shaped styling via `rounded.full` to invite interaction and feel tactile.

Content containers, chat bubbles, and input fields transition through a structured scale. Standard input fields use `rounded.md` for a clean, precise look, while chat bubbles use `rounded.lg` to feel soft and conversational. Larger content blocks and cards employ `rounded.xl` to establish distinct, friendly modules on the page.

## 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`

### Primary Button (`button-primary`)
The primary call-to-action button is built with a vibrant `colors.primary` background, `colors.on-primary` text, and a pill-shaped `rounded.full` border radius. It transitions to `button-primary-hover` on hover, shifting to a slightly darker lime green. Use this component exclusively for the main, high-priority actions on a page, such as initiating a signup or starting a chat.

### Secondary Button (`button-secondary`)
This button features a clean white `colors.surface` background with a subtle `colors.outline` border and dark `colors.neutral` text. It maintains the approachable `rounded.full` shape and standard height. Use this for secondary actions that sit alongside the primary button, offering users an alternative path without competing for visual dominance.

### Dark Button (`button-dark`)
A high-contrast button utilizing a solid `colors.neutral` background and `colors.on-neutral` text. It is slightly more compact in height and padding than the primary button, while still retaining the `rounded.full` shape. Use this for global navigation actions, utility controls, or secondary page-level triggers.

### Card (`card` & `card-elevated`)
The standard `card` uses a flat, non-elevated `colors.surface-container` background with generous `rounded.xl` corners and `spacing.lg` padding. The `card-elevated` variant uses a clean `colors.surface-bright` background paired with `elevation.md` to float above the canvas. Use standard cards for grouping secondary details and elevated cards to highlight key interactive tools or primary features.

### Input Field (`input-field`)
An input container featuring a white `colors.surface` background, `colors.outline` border, and `rounded.md` corners. Upon receiving focus, it transitions to `input-field-focus`, swapping the border to `colors.primary` to provide clear interactive feedback. Use this for all text inputs, search fields, and form entries.

### Chat Bubbles (`chat-bubble-user` & `chat-bubble-agent`)
These specialized containers mimic conversational threads. The `chat-bubble-user` uses a clean white `colors.surface` background, while `chat-bubble-agent` uses a soft grey `colors.surface-container` background, both styled with `rounded.lg` corners. Use these components to render interactive chat simulations, walkthroughs, or AI agent response logs.

### Badges (`badge`, `badge-error`, `badge-success`)
Small, pill-shaped metadata labels using `rounded.full` and a soft `colors.surface-container` background. They use `colors.secondary`, `colors.error`, or `colors.success` text to communicate status. Use these to display quick tags, status indicators, or system states.

### Divider (`divider`)
A minimal, 1px tall line spanning the full width of its container, colored with `colors.outline`. Use this component to separate distinct conversational steps, sections, or list items without introducing unnecessary vertical space.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons like `{components.button-primary}` to draw immediate attention. | Never use `{colors.primary}` for body text as it lacks sufficient contrast against `{colors.surface}`. |
| Apply `{rounded.full}` to all interactive buttons to maintain the friendly, approachable brand aesthetic. | Avoid applying sharp corners (less than `{rounded.md}`) to main content containers like `{components.card}`. |
| Use `{colors.surface-container}` as the background for secondary content blocks and agent chat bubbles like `{components.chat-bubble-agent}`. | Do not use `{colors.neutral}` for background surfaces, keeping the interface light and clean. |
| Ensure all headings use `{typography.display-md}` or `{typography.headline-lg}` with tight tracking for a bold, editorial feel. | Do not mix multiple font families; stick strictly to the Helvetica Neue sans-serif stack defined in `{typography.display-lg}`. |
| Separate distinct conversational steps or sections using `{components.divider}` to maintain clear visual hierarchy. | Avoid using `{typography.label-sm}` for long-form body copy, reserving it strictly for uppercase section labels. |
| Use `{colors.secondary}` for metadata and helper text to establish a clear typographic contrast. | Never use heavy, high-contrast shadows; stick to the soft, subtle values defined in `{elevation.lg}`. |
| Style user chat bubbles using `{components.chat-bubble-user}` with a `{colors.surface}` background to contrast against the agent bubble. | Don't apply `{colors.primary}` as a border color on inactive inputs; reserve it strictly for `{components.input-field-focus}`. |
| Apply `{spacing.lg}` or `{spacing.xl}` padding inside `{components.card}` to ensure text does not crowd the container edges. | Don't use `{typography.label-md}` for standard body paragraphs; keep it restricted to button labels and badges. |

## Content Style

*   **CTA Style**: Call-to-action labels must be highly action-oriented, direct, and conversational. Use first-person or direct-address phrasing that clearly states the immediate outcome (e.g., "Create my first Cola", "Talk to Gabi").
*   **Heading Tone**: Headlines must be direct, benefit-driven, and highly clear. They should explain exactly what the product or feature does without corporate fluff, maintaining a helpful and conversational tone.
*   **Copy Density**: Keep copy density low to medium. Rely on short, punchy paragraphs, bulleted lists accented with clear emojis, and visual chat logs to allow users to scan information quickly and efficiently.

## Imagery & Icons

The visual style uses a mixed treatment that combines clean, structured UI tables, emoji-based list items, and realistic WhatsApp chat simulations. This approach directly demonstrates the product's conversational interface in action. Icons are minimal and rely heavily on standard, highly recognizable emojis to maintain the familiar, native feel of a messaging application. Avoid abstract illustrations or heavy photographic treatments, keeping the focus entirely on clean, readable interface mockups.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Cola, a modern AI-driven project management platform with a clean, conversational, and highly organized tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, pixel sizes, or font sizes directly.
2. Use only the components listed under `components:` (`button-primary`, `card`, `chat-bubble-agent`, etc.). Do not invent variants the spec does not define.
3. Apply `{rounded.full}` to all interactive buttons; apply `{rounded.lg}` or `{rounded.xl}` to content containers per the Shapes notes. Never apply corners below `{rounded.md}` to cards.
4. Follow the Layout notes: centered single-column grid for marketing sections, chat-style layout for conversational UI, 8px base spacing rhythm throughout using `{spacing.xs}` through `{spacing.2xl}`.
5. Treat the Do's and Don'ts as authoritative. If a user request conflicts — for example, using `{colors.primary}` for body text or adding sharp-cornered cards — surface the conflict before proceeding.

## Output contract

**Must:**
- Use token names for every color, type style, radius, and spacing value.
- Cover hover, focus, and disabled states for any interactive component when the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.full}` to buttons and `{rounded.lg}`/`{rounded.xl}` to containers.
- Use `{colors.secondary}` for metadata, captions, and helper text; `{colors.neutral}` for headings and body text.
- Maintain contrast ≥ 4.5:1 on all body text per the accessible design style.

**Must NOT:**
- Invent colors, font families, or radii outside the spec.
- Substitute generic utility defaults when a named token exists.
- Add emoji, filler copy, or marketing language.
- Use `{colors.primary}` for body text or `{colors.neutral}` as a background surface.
- Rewrite page copy, button labels, headings, or alter navigation structure.

## When in doubt
- If a required token is absent from the spec, ask the user before inventing a value.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for secondary containers, use `{colors.surface-container}`.
- If breakpoints are unspecified, default to mobile-first with one breakpoint at 768px.
- Tokens marked "(inferred)" in spec prose are approximations; defer to any authoritative theme file if one exists.