Minutes

Overview

Minutes is an open-source, privacy-first conversation memory system designed for knowledge workers, developers, and AI agents who demand ownership of their data. The aesthetic is **Architectural Minimalism**—clean, purposeful, and evidence-based. The UI strips away proprietary UI chrome and replaces it with plain Markdown files, searchable metadata, and durable local storage. The emotional response is one of clarity and control: users feel they are building a "folder of truth" rather than feeding a black-box service. The brand personality is precise, calm, and technically rigorous. Voice is direct and unsentimental—no breathless marketing language. Example: "Capture, transcribe, diarize, recall. Nothing leaves your machine."

Colors

The color system balances warm, earthy neutrals with a single, confident accent. **Primary (#c96b4e)** is a burnt-orange used exclusively on call-to-action buttons ("Download Minutes"), hover states, and interactive focus rings. It appears sparingly, making it unmissable when present. **Surface stack** ranges from warm cream (#f8f4ed, the page background) through progressively darker containers (#efebe2, #e8e2d8, #e0dace) to support layered card hierarchies and elevated UI states. **On-surface (#1a1916)** is a near-black used for body text and primary labels, ensuring 16:1 contrast against the light background. **Secondary (#2e7d46)** is a forest green reserved for success states and positive indicators (e.g., "transcribed locally"). **Tertiary (#bf5af2)** is a vibrant purple used sparingl

Typography

The type system pairs **Instrument Serif** (display, headlines) with **GeistSans** (body, UI labels) and **GeistMono** (buttons, metadata, code snippets). Instrument Serif at 62px / 400 weight / -0.04em letter-spacing creates a confident, editorial voice for the hero headline ("Your AI remembers every conversation"). Body copy uses GeistSans at 16px / 400 weight / 24px line-height for comfortable reading at any screen size. Monospace labels (GeistMono, 11px, 600 weight, 0.1em tracking) appear on buttons and small UI elements, reinforcing the technical, evidence-based brand. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (≤12px) when layered over busy backgrounds to ensure legibility. Headline hierarchy uses serif at 48px (headline-lg), 36px (headline-md), and 20px (title-

Layout

The layout uses a **fixed-width container model** with max-width: 840px for content sections, centered with mx-auto. The page rhythm is built on a 4px unit grid (spacing.unit), with semantic spacing keys: {spacing.sm} (8px) for tight component gaps, {spacing.md} (16px) for standard padding and section dividers, {spacing.lg} (24px) for major section separation, and {spacing.xl} (40px) for hero-to-content transitions. The hero section spans full viewport width with asymmetric left-right layout: copy on the left (max-width: 560px), product visualization on the right. Gutter padding is 24px on desktop, 16px on tablet, 12px on mobile. White-space is generous—sections are separated by 40–64px vertical rhythm, creating breathing room between ideas. The grid uses 12 columns for responsive breakpoi

Elevation & Depth

Depth is achieved through **soft, warm shadows and subtle background shifts** rather than harsh contrast. Level 1 (Base): the page background (#f8f4ed) with no shadow. Level 2 (Standard Card): background #f0ebe4 with 1px border (#d4cfc7) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modal): background #e8e2d8 with 1px border (#d4cfc7) and box-shadow: 0 12px 32px rgba(26, 25, 22, 0.09). Interactive elements (buttons, inputs) use a 3px focus ring at rgba(201, 107, 78, 0.1) when focused, creating a warm halo without harsh outlines. Hover states shift the background one step up

Shapes

The shape philosophy is **Soft-Technical**: corners are slightly rounded to feel approachable, but not so rounded as to lose precision. Buttons use {rounded.DEFAULT} (4px) for a clean, modern look that reads as clickable without softness. Cards and containers use {rounded.lg} (6px) to add visual warmth and distinguish them from the background. Input fields use {rounded.DEFAULT} (4px) to align with buttons and maintain visual consistency. Badges and pills use {rounded.full} (9999px) for a fully rounded appearance, signaling secondary or metadata content. The rationale: 4–6px radii feel contempo

Components

Action Elements Buttons use GeistMono at 11px / 600 weight / 0.1em tracking to signal precision and code-like reliability. Primary buttons ("Download Minutes") are {colors.primary} (#c96b4e) with {colors.on-primary} text, 40px height, 10px vertical / 22px horizontal padding, {rounded.DEFAULT} (4px), and no border. On hover, background shifts to #b85a3e (--accent-hover) with a 150ms ease transition. On focus, add a 3px ring at rgba(201, 107, 78, 0.1). Secondary buttons ("See Minutes in Motion") are transparent with a 1px border at {colors.outline-variant}, same height and padding, and on hover shift to {colors.surface-container-high} background. Disabled buttons reduce opacity to 50% and set cursor: not-allowed.

Containers & Surfaces Cards use {colors.surface-container-low} (#f0ebe

Do's and Don'ts

**Do**

• Do use {colors.primary} (#c96b4e) exclusively on CTAs and interactive focus states—it's the brand's signature accent and must remain rare and impactful.
• Do maintain 1px borders on all cards and containers using {colors.outline-variant} (#d4cfc7) to define edges without harsh contrast.
• Do pair Instrument Serif headlines with GeistSans body copy to balance editorial confidence with technical clarity.
• Do use {spacing.lg} (24px) or {spacing.xl} (40px) between major sections to create generous white-space and visual breathing room.
• Do apply soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and 0 12px 32px rgba(26, 25, 22, 0.09) to modals for warm, approachable depth.
• Do use GeistMono at 11px / 600 weight / 0.1em tracking on buttons and metadata labels to reinforce the technical, evidence-based brand voice.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) anywhere—stick to the defined surface and on-surface tokens for warmth and consistency.
• Don't apply {colors.primary} to body text, backgrounds, or non-interactive elements; it must remain a rare, high-contrast accent.
• Don't exceed 6px border-radius on any component; softness should feel intentional, not toy-like.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur values greater than 32px; the aesthetic is warm and approachable, not dramatic.
• Don't mix serif and sans-serif fonts within a single headline or body paragraph; maintain clear typographic hierarchy.
• Don't reduce padding below {spacing.sm} (8px) on interactive elements; buttons and inputs need breathing room to feel clickable and accessible.