--- version: alpha name: AgentTrail description: Observability and guardrails for AI coding agents. Calm, precise, navy-first, with one functional brand blue. colors: primary: "#0748FE" on-primary: "#FFFFFF" brand-100: "#B3C7FF" brand-200: "#80A1FE" brand-300: "#4D7CFE" brand-400: "#0748FE" brand-500: "#013DE5" brand-600: "#012FB2" brand-700: "#01227F" brand-800: "#00144C" navy: "#0B0F1E" navy-surface: "#11182A" navy-border: "#28334A" ink: "#151D31" mist: "#F8F9FC" white: "#FFFFFF" border: "#DCE2ED" muted-on-light: "#536078" muted-on-dark: "#A6B1C8" link-on-dark: "#6EA0FF" success: "#10B981" warning: "#EAB308" danger: "#EF4444" typography: display: fontFamily: Inter fontSize: 60px fontWeight: 500 lineHeight: 1.08 letterSpacing: -0.035em headline: fontFamily: Inter fontSize: 40px fontWeight: 500 lineHeight: 1.14 letterSpacing: -0.03em title: fontFamily: Inter fontSize: 22px fontWeight: 600 lineHeight: 1.4 body-lg: fontFamily: Inter fontSize: 18px fontWeight: 400 lineHeight: 1.625 body: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.5 label: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 1.4 caption: fontFamily: Inter fontSize: 12px fontWeight: 500 lineHeight: 1.4 rounded: control: 10px card: 16px panel: 24px pill: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 40px section: 96px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" height: 44px padding: 0 20px typography: "{typography.label}" button-primary-hover: backgroundColor: "{colors.brand-500}" textColor: "{colors.on-primary}" button-primary-active: backgroundColor: "{colors.brand-600}" textColor: "{colors.on-primary}" card-light: backgroundColor: "{colors.white}" textColor: "{colors.ink}" borderColor: "{colors.border}" rounded: "{rounded.card}" padding: 24px card-dark: backgroundColor: "{colors.navy-surface}" textColor: "{colors.white}" borderColor: "{colors.navy-border}" rounded: "{rounded.card}" padding: 24px --- ## Overview This is the design reference for **AgentTrail**, in the [DESIGN.md](https://github.com/google-labs-code/design.md) format. Put it in your project root next to the logo files so AI coding agents (Claude Code, Cursor and others) generate UI that matches the brand. AgentTrail is observability and guardrails for AI coding agents. The look is calm and precise: a navy-first canvas, quiet neutrals, crisp 1px borders and a single brand blue used as a functional accent, never as decoration. Surfaces feel like well-made tools rather than marketing. ## Brand kit files | File | Use it for | | --- | --- | | `svg/agenttrail-logo-color.svg` | The default logo, on light backgrounds. Prefer SVG wherever it is supported. | | `svg/agenttrail-logo-white.svg` | Dark backgrounds and photography. | | `svg/agenttrail-logo-black.svg` | Single-color print, or when color is unavailable. | | `svg/agenttrail-icon-{color,white,black}.svg` | Avatars, app icons, favicons, and anywhere the full logo would be too small. | | `png/…` | Raster copies of all six: logos 2400px wide, icons 1024×1024, transparent. | | `avatars/agenttrail-avatar-light.png` | Profile picture: blue icon on white, 1024×1024. Survives a round crop. | | `avatars/agenttrail-avatar-blue.png` | Profile picture: white icon on brand blue, 1024×1024. | Use these files as they are. Don't redraw the logo or set the wordmark in a font. ## Colors - **Primary / brand blue (`#0748FE`).** The icon, primary buttons, active states, focus rings and links on light backgrounds. Reserve it for things the reader can act on or should look at first. - **Brand scale (`brand-100` to `brand-800`).** Shades of the same blue. `brand-500` is the hover state of a primary button and `brand-600` the pressed state. Lighter shades (`brand-100`, `brand-200`) are for tints and chart series; darker ones for emphasis on light backgrounds. - **Navy (`#0B0F1E`).** The dark canvas, and the default theme. It is a blue-black, not pure black, so dark surfaces still belong to the brand. Cards sit one step up on `navy-surface` with a `navy-border` edge. - **Ink (`#151D31`) and Mist (`#F8F9FC`).** Text and canvas for the light theme. Cards are white with a `border` edge. - **Muted text.** `muted-on-light` and `muted-on-dark` for secondary copy, captions and labels. - **Status colors.** `success` (green) for passed or allowed, `warning` (amber) for needs attention, `danger` (red) for blocked or destructive. These carry meaning, never brand: don't use blue to mean success, or green as an accent. ### Contrast `#0748FE` as **text** on navy is only about 3.2:1 and fails WCAG AA. Use `link-on-dark` (`#6EA0FF`) or `brand-300` (`#4D7CFE`) for blue text and icons on dark backgrounds. White text on a `#0748FE` button passes (about 6.2:1). ## Typography One typeface: **[Inter](https://rsms.me/inter/)**, weights 400 to 700. - Large headings are **medium weight (500) with tight negative tracking**: `display` for page titles, `headline` for section titles. On phones, scale the display size down to about 32 to 44px. - Body copy is regular weight with generous line height. Lead paragraphs under a heading use `body-lg` in the muted color. - Use sentence case for headings, buttons, labels and badges. **No all-caps labels** and no wide letter-spacing. - Write the name as **AgentTrail** in text, and **AgentTrail Guard** and **AgentTrail OS** for the products. The lowercase `agenttrail` appears only in the logo itself and in commands, package names and domains. ## Layout - Content sits in a centered column up to 1152px wide, with a 20 to 24px side gutter. Long-form reading text stays under about 720px. - Pages are a stack of full-width bands separated by hairline borders, each with roughly 56 to 104px of vertical padding. Alternate a faint tint between bands for rhythm. - Section headings are centered: a small blue-dot eyebrow, the headline, then a muted lead. - Every layout must work at 320px wide with no horizontal scroll, and touch targets are at least 44px. ## Elevation and depth Depth comes from **borders and tone, not shadows**. On navy there are no shadows at all; each layer is a slightly lighter navy with a 1px border. In the light theme, a shadow is at most a 1px, near-invisible lift. A soft radial glow of brand blue may sit behind a single hero or "moment" element. Never put it behind dense data such as tables, charts or feeds. ## Shapes - **Buttons are pills** (`rounded.pill`) at every size: 36px for nav, 44px by default, 48px for large. - **Cards** use `rounded.card` (16px); large closing panels use `rounded.panel` (24px). - Small controls such as menu rows and inputs use `rounded.control` (10px). - Icons are line icons ([Lucide](https://lucide.dev)) at a 1.5 to 2px stroke, sized 14 to 20px next to text. ## Components - **Primary button.** Brand blue fill, white label, pill shape. The hover and pressed states step down the brand scale. Use one per view for the main action. - **Secondary button.** A translucent wash of the text color (about 10% opacity) with no border, so it reads on either theme. For the second action in a pair. - **Destructive button.** Solid `danger` with white text, only for confirms that delete or revoke something. - **Cards.** Surface color, 1px border, 16px radius, 24px padding. Clickable cards turn their border brand blue on hover. Nothing else animates. - **Badges and status pills.** A 10 to 15% tint of the status color with text in a stronger shade of the same hue, for example green text on a pale green fill. - **Charts.** Use shades of the brand blue for ordinary series; keep green, amber and red for series that mean status or severity. Axis text is muted slate (`#94A3B8`). - **Motion.** Restrained: content fades and rises a few pixels as it enters, and interactive elements respond to hover and press. No looping ambient animation. Respect `prefers-reduced-motion`. ## Voice and tone We write the way we'd explain something to a friend on the team: straight, specific and without the sales voice. Our readers run AI coding agents all day, and they can smell hype from the first line. - **Plain over clever.** If a developer wouldn't say it out loud, we don't write it. Tell people what the thing does, in the words they'd use. Write "Blocks the command before it runs", not "AI-powered next-generation governance". - **Specific over vague.** Vague copy asks people to trust you. Specific copy gives them a reason to. So we name the agent, the command and the number. Write "Protected in two commands. No account.", not "Get started in minutes". - **Honest about limits.** Trust is the whole product, so we never stretch the truth. We're clear about what works today and what's still on the way ("Claude Code and Cursor today, more agents coming"), and if your current setup already does the job, we'll say so. - **Show, don't claim.** Anyone can call their product powerful. We'd rather show a real session or a real rule and let people make up their own minds. Write "See it work before you trust it", not "the most powerful platform". - **Calm, not alarmist.** We like AI agents, and we want people using more of them, not fewer. Our job is to make that feel safe, not scary: "Give your AI agents room to work. Keep the guardrails in your hands." ### The small stuff - Talk to the reader: "your agent", "your repo". Say "we" when it really is us. - Keep sentences short, one idea each. A fragment in a headline is fine. - Sentence case, and no shouting: no all caps, exclamation marks or emoji. - US spelling, no serial comma ("secrets, paths and names"). - The words we reach for: agent, session, guardrail, rule, trace, block, hold, approve. - If a word sounds like it came from a pitch deck (seamless, leverage, unlock, supercharge, game-changing), there's a plainer one. ## Do's and Don'ts ### Do - Use the SVG logo wherever possible, and the white logo on dark or busy backgrounds. - Leave clear space around the logo at least the height of the icon's base. - Keep the full logo at least 96px wide on screen. Use the icon alone below that. - Keep brand blue for actions, focus and the one thing that matters most on a screen. - Check WCAG AA contrast (4.5:1 for body text) for every text and background pair. ### Don't - Don't recolor, stretch, rotate, outline or add shadows and effects to the logo. - Don't put the color logo on a dark or busy background. - Don't rebuild the wordmark in another typeface or remove the icon from the lockup. - Don't use brand blue decoratively, or a status color as an accent. - Don't use pure black (`#000000`) as a page background; use navy. - Don't use the logo in a way that suggests a partnership or endorsement. Questions: sales@agenttrail.sh · https://www.agenttrail.sh/brand