Agentation

Overview

Agentation is a visual feedback tool that bridges the gap between human designers and AI coding agents by transforming UI annotations into structured, machine-readable context. The brand embodies a "Technical Clarity" aesthetic—combining the precision of developer tooling with the accessibility of modern SaaS design. The interface uses a clean, light-dominant palette punctuated by vibrant accent colors (electric blue #3b82f6 for primary actions, warm orange #f97316 for secondary emphasis, and indigo #6155f5 for tertiary highlights), creating a visual language that feels both professional and approachable. The emotional response is one of empowerment: users feel they're unlocking a new layer of communication between design and code.

The brand voice is direct, technical yet conversational, and action-oriented. Agentation speaks to developers and designers as peers, avoiding marketing jargon in favor of concrete, task-focused language. Vocabulary patterns emphasize clarity ("Click any element, add a note, paste the output") and agency ("You control the feedback"). The tone is confident without being arrogant, helpful without being patronizing. Example sentence in brand voice: "Click the icon in the bottom-right corner to activate—your annotations become structured data instantly."

Colors

The color system is anchored by a light, neutral surface (#ffffff) with a carefully calibrated gray scale for depth and hierarchy. Primary (#3b82f6, a vibrant electric blue) is reserved exclusively for the most important interactive elements—primary CTAs, focus states, and key affordances. This color appears in the hero section's annotation demo and the "Add" button, signaling the core action of the product. Secondary (#f97316, a warm orange) supports workflows and highlights secondary actions, creating visual rhythm without competing with primary. Tertiary (#6155f5, a deep indigo) is used sparingly for accent elements and brand identity markers.

The surface stack uses a minimal but intentional range: surface (#ffffff) for main content areas, surface-container-low (#f0f0f0) for input fiel

Typography

The type system pairs IBM Plex Serif for headlines (display, headline-lg, headline-md) with Inter for body text and UI labels, creating a sophisticated yet modern aesthetic. Serif headlines (500 weight, -0.02em letter-spacing at display size) convey authority and editorial polish, while sans-serif body text (400 weight, 16px) ensures legibility at smaller sizes. The hierarchy is reinforced through size and weight: display at 60px/68px line-height for hero statements, headline-lg at 40px for section titles, and body-md at 16px/24px for descriptive copy. Labels use Inter at 14px/600 weight with 0.01em letter-spacing for UI controls, and code samples use Cascadia Code monospace at 14px for technical accuracy. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) on small labels (label-sm) when pla

Layout

The page uses a fluid, single-column layout with a max-width container of 980px, centered on the viewport. The grid system is 12 columns with a 24px gutter, providing flexible spacing for responsive design. White-space is generous and intentional: section separation uses lg spacing (40px) for breathing room, while internal component padding uses md spacing (24px) for grouped content. The hero section pairs a left-aligned navigation sidebar with a right-aligned content area, creating visual balance. Cards and containers use md padding (24px) internally, with sm spacing (12px) between nested elements. The annotation demo screenshot is the focal point, sized to showcase the tool's UI without overwhelming the viewport. Container max-width of 980px ensures readability on desktop while maintaini

Elevation & Depth

Visual hierarchy is achieved through a restrained shadow system and subtle border treatments rather than dramatic depth. Level 1 (Base): flat surfaces with no shadow, using only a 1px border at outline-variant (#cccccc) for definition. Level 2 (Cards & Inputs): elevation.sm shadow (0 1px 4px rgba(0, 0, 0, 0.08)) with a 1px border, creating a gentle lift. Level 3 (Modals & Popovers): elevation.md shadow (0 4px 24px rgba(0, 0, 0, 0.12)) with a 1px border for prominent surfaces. The annotation popup uses a specialized shadow stack: 0 4px 24px rgba(0, 0, 0, 0.3) paired with a 1px border at rgba(25

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently but not aggressively, balancing approachability with precision. Buttons use rounded.xl (1.5rem / 24px) for a friendly, modern feel that invites interaction. Cards and containers use rounded.lg (1rem / 16px) for a slightly more structured appearance. Input fields use rounded.md (0.75rem / 12px) to signal form elements without excessive softness. Small UI elements like badges and close buttons use rounded.full (50% / 9999px) for circular affordances. The annotation popup uses rounded.xl (1.5rem) to match button stylin

Components

Action Elements Buttons are the primary interactive affordance. Primary buttons use {colors.primary} (#3b82f6) with white text, 44px height, 12px 24px padding, and rounded.xl (24px). On hover, the background transitions to #2563eb (0.15s ease) with a subtle box-shadow (0 2px 8px rgba(59, 130, 246, 0.3)). Secondary buttons use a transparent background with a 1px outline at {colors.outline} (#999999), maintaining the same dimensions. On hover, they shift to {colors.surface-container-low} (#f0f0f0) with a darker outline. Accent buttons (secondary actions) use {colors.secondary} (#f97316) with white text, following the same sizing and hover behavior but transitioning to #ea580c. All buttons use label-md typography (14px, 600 weight) and include a 0.15s ease transition for smooth state chan

Do's and Don'ts

**Do**

• Do use primary blue (#3b82f6) exclusively for the most critical user actions—primary CTAs, focus states, and key affordances—to maintain visual hierarchy and prevent color fatigue.
• Do pair serif headlines (IBM Plex Serif, 500 weight) with sans-serif body text (Inter, 400 weight) to create a sophisticated yet modern aesthetic that signals both authority and accessibility.
• Do apply consistent rounded corners across component families—buttons at 24px, cards at 16px, inputs at 12px—to create a cohesive, recognizable design language.
• Do use the full elevation stack (sm/md/lg shadows) to signal depth and interactivity, transitioning smoothly (0.15s ease) on hover rather than jumping between states.
• Do maintain generous white-space with lg spacing (40px) between sections and md spacing (24px) within containers to ensure the interface feels calm and focused, not cramped.

**Don't**

• Don't use primary blue for secondary or tertiary actions—reserve it for the most important interactions to preserve its signal strength and prevent visual noise.
• Don't mix serif and sans-serif fonts within a single component or section; keep serif for headlines and sans-serif for body/UI to maintain typographic clarity.
• Don't apply rounded corners inconsistently—avoid mixing 8px, 12px, and 16px radii on similar component types, as this creates a fragmented, unprofessional appearance.
• Don't use harsh, high-contrast shadows (e.g., 0 10px 40px rgba(0, 0, 0, 0.4)) on light backgrounds; stick to subtle shadows (0.08–0.12 opacity) to maintain the clean, modern aesthetic.
• Don't override the focus state styling on inputs or buttons—always provide a clear visual indicator (border color change + shadow) to ensure keyboard accessibility and user confidence.