Obvious

Overview

Obvious is a productivity-focused AI agent platform designed for teams that prioritize outcomes over conversation. The design system embodies "Grounded Minimalism"—a philosophy that combines warm, earthy neutrals (beige #f7f6f2, taupe #605d58, charcoal #1c1d1b) with a confident sage-green accent (#3d5638) to create an interface that feels both approachable and professional. The aesthetic rejects the sterile coldness of tech-forward design in favor of a tactile, human-centered experience. Users encounter a calm, organized workspace where every visual element serves a functional purpose. The brand voice is direct, confident, and outcome-oriented: "Less Chat. More Work." Example: "Your agent just completed the campaign roadmap—review it in the shared board."

Colors

The color system is anchored in a warm, neutral palette that evokes natural materials and craftsmanship. Primary (#3d5638, a muted sage-green) is reserved exclusively for call-to-action buttons, active states, and key interactive elements—it signals agency and trust without aggression. Secondary (#605d58, warm taupe) provides subtle contrast for secondary UI elements and disabled states. Tertiary (#16a34a, a brighter green) is used sparingly for success states, badges, and confirmatory feedback. The surface stack progresses from bright (#fbfaf7) for elevated cards to dim (#edece8) for recessed areas, with the base surface at #f7f6f2 (a warm off-white). On-surface text is always #1c1d1b (near-black with warmth), never pure black, to reduce eye strain and maintain the brand's approachable to

Typography

The type system pairs Sharp Grotesk (display and headlines) with Booton (body and UI text) to create a distinctive voice that balances geometric precision with warmth. Sharp Grotesk's geometric letterforms convey clarity and modernity at large sizes (46px–60px for headlines), while Booton's softer curves humanize smaller text (14px–18px for body). Headlines use a tight letter-spacing of -0.02em to -0.04em to create visual density and confidence; body text uses 0em spacing for legibility. All interactive labels (buttons, links) use font-weight 600 at 14px–15px with 0.01em letter-spacing to ensure they stand out without shouting. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) to body text over busy backgrounds (e.g., hero image overlays) to maintain contrast. Line-height is set to 1.5x the

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid but controlled composition. The gutter is consistently 24px, creating a rhythm that feels spacious without wasting real estate. Section separation uses the lg spacing token (40px) between major content blocks, while internal card padding uses md spacing (24px). The hero section spans full-width with a 64px top margin and 40px bottom margin to establish breathing room. Container widths are set at 1040px for main content, 810px for narrow editorial layouts, and 1200px for full-bleed image sections. White-space is treated as a design material: empty space around text and buttons is never less than 12px (sm spacing) to prevent cognitive overload. The design avoids centered layouts except for hero headlines;

Elevation & Depth

Depth is conveyed through a subtle shadow system that respects the brand's grounded aesthetic. Level 1 (base surface) has no shadow; Level 2 (standard cards) uses box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) with a 1px solid border at rgba(0, 0, 0, 0.08) to define edges without harshness. Level 3 (elevated modals, popovers) uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border at rgba(0, 0, 0, 0.12). Level 4 (floating action buttons, tooltips) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12). Hover states on interactive elements transition the shadow from Level 2 to Level 3 over 200ms

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the geometric precision of the interface without sacrificing clarity. Buttons use rounded.lg (1rem / 16px) to create a friendly, approachable tap target while maintaining visual weight. Cards and containers use rounded.xl (1.5rem / 24px) to establish a softer, more inviting surface. Input fields and small UI elements use rounded.DEFAULT (0.5rem / 8px) to maintain visual hierarchy and prevent the interface from feeling overly rounded. The hero image and large feature images use rounded.xl (1.5rem / 24px) t

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses backgroundColor: rgb(61, 86, 56), textColor: rgb(251, 250, 247), padding: 10px 24px, height: 48px, borderRadius: 16px, and fontWeight: 600. On hover, the background shifts to rgb(90, 122, 82) with a box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) applied over 150ms. On active/pressed, the background darkens to rgb(61, 86, 56) and the shadow is removed. The button-secondary component uses a transparent background with a 1px border at rgba(0, 0, 0, 0.08), padding: 6px 12px, height: 40px, and textColor: rgb(28, 29, 27). On hover, the background becomes rgba(227, 226, 222, 0.5) and the border shifts to rgba(0, 0, 0, 0.12). Ghost buttons (navigation links, tertiary actions) have no background or b

Do's and Don'ts

**Do**

• Do use the sage-green primary (#3d5638) exclusively for CTAs, active states, and focus indicators—never for passive UI.
• Do apply the warm taupe secondary (#605d58) for disabled states, secondary labels, and subtle dividers to maintain visual hierarchy.
• Do pair Sharp Grotesk headlines with Booton body text; never mix typefaces within a single component.
• Do use the full surface stack (surface, surface-container, surface-container-high) to create depth without relying on shadows alone.
• Do apply rounded.lg (16px) to all buttons and rounded.xl (24px) to all cards to maintain visual consistency.
• Do use the lg spacing token (40px) between major sections and md spacing (24px) within cards to establish rhythm.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) on hover to signal interactivity; never use larger shadows.
• Do use the tertiary green (#16a34a) only for success states, confirmations, and positive feedback—never for primary actions.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; always use the warm variants (#1c1d1b, #fbfaf7).
• Don't apply the primary color to passive UI elements like dividers, borders, or disabled states—reserve it for interactive elements only.
• Don't mix Sharp Grotesk and Booton within the same text block; use Sharp Grotesk for headlines (32px+) and Booton for body (18px and below).
• Don't use rounded.full (9999px) for buttons or cards; reserve it for badges, pills, and status indicators.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.12); excessive shadow depth contradicts the grounded aesthetic.
• Don't use the error color (#fb2c36) for warnings or non-critical feedback; reserve it for destructive actions and critical errors only.
• Don't center-align body text or card content; use left-alignment (text-align: left) to optimize readability and maintain visual hierarchy.
• Don't apply letter-spacing greater than 0.1em or less than -0.04em; maintain the range -0.04em to 0.02em for all typography.