Cotabby

Overview

Cotabby is a privacy-first, open-source AI autocomplete tool for macOS that embodies Scandinavian Minimalism with deliberate personality. The design system prioritizes clarity and warmth through a carefully curated palette of warm beige (#f1e8d4), bold black (#1c1c1c), and two strategic accent colors: a vibrant cobalt blue (#0071e3) for primary actions and a coral-salmon (#ff8273) for secondary emphasis. The brand evokes a sense of calm efficiency—the interface feels like a well-designed tool that respects the user's attention and privacy, never intrusive, always helpful.

The voice is conversational yet precise, technical without jargon, and playful without being frivolous. Cotabby speaks to developers and power users who value control and transparency. Example sentence in brand voice: "Everything stays on your Mac. No cloud, no tracking, just you and your thoughts flowing faster." The personality is embodied through the mascot (a playful black cat) and the consistent use of warm, human-scaled typography that feels handcrafted rather than corporate.

Colors

The color system is rooted in a warm, neutral foundation (#f1e8d4 surface, #1c1c1c on-surface) that creates a paper-like, approachable canvas. This warm beige is never cold or sterile; it's intentionally reminiscent of aged paper or linen, evoking trust and craftsmanship. Primary (#0071e3) is a bold, saturated cobalt blue reserved exclusively for high-confidence CTAs ("Download for Mac") and interactive states—it commands attention without aggression. Secondary (#ff8273) is a warm coral-salmon used for supporting accents, badges, and highlights; it complements the primary blue and adds personality to the interface. Tertiary (#e0a32e) is a muted gold used sparingly for status indicators and decorative elements. The surface stack progresses from #faf7f0 (brightest, used for elevated cards) t

Typography

The type system pairs Bricolage Grotesque (800 weight, display and headline levels) with Inter Tight (400–700 weights, body and label levels). Bricolage Grotesque is a geometric sans-serif with personality—its tight letterforms and high contrast create visual impact and authority, used exclusively for headlines and display text at sizes 28px and above. Inter Tight is a narrow, technical typeface that feels precise and modern; it's used for all body copy, labels, and UI text at 16px and below. This pairing creates a clear hierarchy: Bricolage commands attention with its bold, sculptural presence (e.g., "Write at the speed of thought" at 60px, -0.04em letter-spacing, 68px line-height), while Inter Tight provides readable, scannable content. For small labels over busy backgrounds or interacti

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid, responsive structure that adapts from mobile (px-3 padding, 12px gutter) to desktop (lg:px-6, 24px gutter). The page rhythm is established through consistent spacing: lg (40px) separates major sections, md (24px) separates cards and components, and sm (12px) provides breathing room within components. The hero section uses a large, bold headline (60px Bricolage Grotesque) paired with a warm beige background and a subtle grid pattern (96px × 96px, rgba(28, 28, 28, 0.10)) to add texture without distraction. Cards and containers use 24px padding with 2px borders, creating a structured, modular appearance. The container-max-width of 1280px ensures content never feels stretched on ultra-wide displays. White-spac

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of borders rather than dramatic layering. Level 1 (Base): The background (#f1e8d4) includes a subtle repeating diagonal pattern (rgba(255, 130, 115, 0.14) at 45°, 96px × 96px) and a grid overlay (rgba(28, 28, 28, 0.10), 96px × 96px) to add texture and visual interest without relying on shadows. Level 2 (Standard Cards): Cards use a 2px solid border at {colors.outline} (#1c1c1c) and a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This creates a subtle lift from the background while maintaining the flat, intentional

Shapes

The shape philosophy is "Structured Warmth"—rounded corners are used consistently but never excessively, reinforcing the brand's balance between technical precision and human approachability. Buttons and primary interactive elements use {rounded.lg} (1rem / 16px), creating a friendly, approachable feel without sacrificing professionalism. Cards and containers use {rounded.xl} (1.5rem / 24px), adding softness to larger surfaces. Input fields use {rounded.DEFAULT} (0.5rem / 8px), maintaining a compact, technical appearance. Badges and small accent elements use {rounded.full} (9999px) for a pill-

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 12px vertical and 28px horizontal padding. Primary buttons (#0071e3 background, white text, Inter Tight 600 weight, 14px) use {rounded.lg} and a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, the background shifts to #0052a3 and the shadow strengthens to 0 4px 12px rgba(0, 113, 227, 0.2), with a 150ms transition. Secondary buttons (#1c1c1c background, white text) follow the same structure but use a darker base color. Ghost buttons have a transparent background with a 2px border at {colors.outline} and shift to {colors.surface-container-high} on hover. All buttons use a focus state with a 3px inset ring at {colors.primary-container}.

Containers & Surfaces Cards use {rounded.x

Do's and Don'ts

**Do**

• Do use Bricolage Grotesque (800 weight) exclusively for headlines and display text (28px and above); it commands attention and reinforces brand personality.
• Do maintain the 2px border on all cards, containers, and interactive elements—it's a signature of the design system and creates visual cohesion.
• Do use the primary blue (#0071e3) only for high-confidence CTAs and focus states; overuse dilutes its impact.
• Do apply the warm beige background (#f1e8d4) consistently across all pages; it's the foundation of the brand's approachable, trustworthy aesthetic.
• Do use the subtle grid and diagonal pattern overlays on large background areas to add texture and visual interest without distraction.
• Do transition all interactive states (hover, focus, active) over 150ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, professional motion.

**Don't**

• Don't use shadows as the primary depth mechanism; rely on borders and background color shifts instead to maintain the flat, intentional aesthetic.
• Don't apply rounded corners larger than {rounded.xl} (24px) to functional elements like buttons or inputs; it reduces perceived precision.
• Don't mix Bricolage Grotesque and Inter Tight at the same size or weight; maintain clear typographic hierarchy with Bricolage for headlines and Inter Tight for body.
• Don't use the secondary coral (#ff8273) or tertiary gold (#e0a32e) for primary CTAs; reserve the cobalt blue (#0071e3) for actions that require user commitment.
• Don't remove or lighten the 2px borders on cards and containers; they're essential to the structured, intentional brand identity.
• Don't apply text-shadow to body text or labels under 14px unless the background is visually busy; it reduces readability on clean surfaces.