# Chronicle — Design System
> Modern AI presentation software for professional, high-stakes business decks.
- **Canonical:** https://uiuxskills.com/library/chronicle
- **Source:** https://chroniclehq.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:24.238Z

---

---
version: alpha
name: Chronicle
description: Modern AI presentation software for professional, high-stakes business decks.
tone: >-
  Professional, authoritative, and confident. The voice is direct, benefit-oriented, and avoids
  marketing fluff, appealing to high-performing teams at top-tier firms.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-dim: "#F5F5F5"
  neutral: "#B3B3B3"
  on-primary: "#FFFFFF"
  on-surface: "#000000"
  outline: "#E5E5E5"
  error: "#DC2626"
  success: "#16A34A"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 24px
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 20px
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 16px
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 12px
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-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.neutral}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.neutral}"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FEE2E2"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  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

Chronicle is a premium, design-forward presentation platform built for high-stakes business environments. Its visual identity is defined by a minimalist, enterprise-grade aesthetic that prioritizes content clarity and editorial precision over decorative UI.

## Colors

The color palette is strictly monochromatic and high-contrast, designed to keep the focus entirely on the user's presentation content.

*   Primary (#000000): Used for primary actions, headlines, and high-contrast text to maintain a premium, editorial feel.
*   Surface (#FFFFFF): The primary background color for the application and marketing site.
*   Surface-dim (inferred) (#F5F5F5): Used for subtle section backgrounds and card containers.
*   Neutral (#B3B3B3): Used for secondary text, borders, and non-essential UI elements.
*   On-primary (inferred) (#FFFFFF): Text color for buttons and elements with primary backgrounds.
*   On-surface (inferred) (#000000): Primary text color for readability on light surfaces.
*   Outline (inferred) (#E5E5E5): Used for subtle dividers and input borders.
*   Error (inferred) (#DC2626): Standard semantic color for error states.
*   Success (inferred) (#16A34A): Standard semantic color for success states.
*   Focus-ring (inferred) (#000000): High-contrast focus ring for accessibility.

## Typography

The typography system uses the Inter typeface exclusively to ensure a clean, professional, and readable experience across all screen sizes.

*   Display-lg (inferred): Used for hero headlines to establish immediate authority.
*   Display-md (inferred): Used for major section titles.
*   Headline-lg (inferred): Used for sub-headers.
*   Headline-md (inferred): Used for feature titles.
*   Headline-sm (inferred): Used for card headers.
*   Body-md (inferred): The primary text size for all body copy.
*   Label-sm (inferred): Used for metadata, small UI labels, and button text.

## Layout

The layout strategy centers on a clean, 12-column grid system with a maximum container width of 1200px. Generous whitespace is used to separate content, with a standard {spacing.2xl} (48px) gap between major sections to maintain a breathable, premium feel. The page follows a consistent flow: hero, social-proof, features, templates, testimonials, and footer. The hero pattern features a centered headline and subhead, a primary CTA, and a high-fidelity product screenshot. Responsive behavior is mobile-first, with navigation collapsing into a menu drawer on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to maintain a flat, minimalist aesthetic. Subtle single-layer shadows are applied to provide just enough visual separation for interactive elements.
*   elevation.sm — subtle depth for small UI elements.
*   elevation.md — standard card lift for content containers.
*   elevation.lg — prominent overlay for modals or drawers.

## Shapes

The design employs a subtle rounding strategy to soften the professional look without appearing playful. The {rounded.md} (8px) token is the standard for cards and containers, while {rounded.sm} (4px) is reserved for inputs and smaller UI components.

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


### Buttons
Buttons use a high-contrast style with {colors.primary} backgrounds. The `button-primary` is for main actions, while `button-secondary` uses a transparent background with a {colors.neutral} border to reduce visual weight.

### Cards
Cards are the primary container for content, utilizing {rounded.md} corners and a {colors.outline} border. Use `card-elevated` when you need to distinguish a feature block from the background.

### Badges
Badges are used for status or metadata, utilizing {typography.label-sm}. Use `badge-success` for positive indicators and `badge-error` strictly for destructive or error-related states.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Do not use bright, saturated colors for UI elements. |
| Apply {typography.display-lg} for hero headlines. | Avoid using {typography.body-md} for headers. |
| Use {rounded.md} for all card components. | Do not use heavy drop shadows on cards. |
| Maintain {spacing.2xl} between major sections. | Never use {colors.error} for non-destructive actions. |
| Use {colors.neutral} for secondary text. | Do not exceed 1200px for content container width. |
| Ensure interactive elements have {colors.focus-ring}. | Avoid mixing too many font weights in one section. |
| Use {colors.outline} for subtle dividers. | Do not use thick, high-contrast borders. |
| Use {typography.label-sm} for button labels. | Avoid long, verbose button labels. |

## Content Style

CTA labels must be imperative and direct, using strong verbs like "Talk to sales" or "Watch video." Keep labels short to maintain the minimalist UI.

Headlines should be benefit-driven, professional, and concise. Avoid marketing fluff; focus on the direct value provided to the user.

Copy density should be kept low. Use short, scannable paragraphs and frequent bullet points to ensure the user can digest information quickly without feeling overwhelmed.

## Imagery & Icons

The imagery style is mixed, combining high-fidelity product screenshots with clean, simple line-art icons. Product imagery should be crisp and showcase the software in a professional context. Icons should be minimal and monochromatic, adhering to the brand's "less is more" philosophy.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Chronicle, a minimal enterprise presentation platform. Match its professional, authoritative 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 names.
2. Use only component variants defined under `components:` (`button-primary`, `button-secondary`, `card`, `card-elevated`, `badge`, `badge-success`, `badge-error`). Do not invent new variants.
3. Apply layout decisions per the Layout section: 12-column grid, 1200px max container width, `{spacing.2xl}` between major sections, mobile-first with navigation collapsing below 768px.
4. Apply `{elevation.sm}`, `{elevation.md}`, or `{elevation.lg}` sparingly as documented; never stack multiple shadows or apply heavy drop shadows to cards.
5. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use all tokens by their YAML names.
- Include hover, focus, and disabled states for every interactive component when the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`, `{colors.focus-ring}`).
- Use `{rounded.md}` for cards and containers; `{rounded.sm}` for inputs and small UI elements.
- Apply `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Use `{typography.label-sm}` for button labels; keep CTA copy imperative and short per Content Style.

**Must NOT:**
- Invent colors, font sizes, radii, or spacing values outside the spec.
- Use generic utility defaults (e.g., `gray-500`, `rounded-md` as a literal class) when a named token exists.
- Add emoji, filler text, or unsolicited marketing copy.
- Reference any specific framework or toolchain.
- Rewrite, replace, or extend page copy, headings, navigation items, or page sections — the spec governs visual tokens only.

## When in doubt
- If a value is not in the spec, ask the user rather than inventing one.
- Prefer combining existing components over introducing new tokens.
- For background roles use `{colors.surface}` or `{colors.surface-dim}`; for text on light surfaces use `{colors.on-surface}`; for primary actions use `{colors.primary}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, component metadata) exists, it overrides inferred values.
- When responsive breakpoints are unspecified, default to mobile-first with one breakpoint at 768px.