Agentsure Design System Reference

Incident Response Platform

Agentsure Design System

Premium, technical-forward design language for DevOps and incident response. Deep forest green anchors trust and control, with warm earth accents for precision.

12 Color tokens 20 Type styles Flat elevation 4 Radius tokens Inter Tight + JetBrains Mono

Foundation

Color Tokens

The full color palette extracted from Agentsure's design system, including primary brand green, warm accents, neutrals, and surfaces.

Primary Green

#005032

Primary CTA · Active states · Brand accent

Link Blue

#0000EE

Hyperlinks · Focus ring

Accent Burnt Orange

#E68846

Italic prose highlight · Code IDs · Decorative

Error Red

#C0392B

Destructive actions · Error states

Canvas

#FFFFFF

Page background · Card surfaces · Label fills

Body Text

#0D1016

Body copy · Primary text

Ink

#000000

Headings · Maximum contrast

Muted

#1A1A1A

Code blocks · Incident logs · Terminal UI

Faint

#68655E

Captions · Secondary text · Placeholders

Hairline

#E6E6E6

Borders · Dividers · Input strokes

Neutral Tan

#F2E9DA

Palette reserve

Neutral Gray

#888888

Palette reserve

Typography

Type Scale

Inter Tight for UI and prose, with tight negative letter-spacing on display sizes for technical precision. JetBrains Mono for code and incident logs.

Primary Inter Tight Headings · Body · Buttons · Navigation

Monospace JetBrains Mono Code · Incident IDs · Terminal UI

Display XL Build with precision 72px · 400 · −1.8px

Display LG Incident response redesigned 48px · 400 · −1.06px

Heading MD Subsection header 28px · 500 · −0.5px

Body LG Large body text with medium weight 18px · 500 · −0.18px

Body MD The primary body copy text at standard size 15.5px · 400 · 1.6

Body SM Reduced body text size 15px · 400 · 1.6

Button Button label 14px · 500 · 1

Label Form label 14.5px · 400 · 1.4

Code XL INC-2024-08847 13px · 400 · monospace

Code LG Status: CRITICAL_OUTAGE 12.5px · 400 · 1.7

Layout

Spacing & Shapes

4px base grid — every spacing token is a multiple of 4. Border radii follow context: sharp corners for full-width sections, 9999px for CTAs.

Spacing Scale

4px xxs

8px xs

12px sm

16px md

20px lg

24px xl

28px xxl

32px xxxl

36px section

40px band

Border Radius

None 0px

XS 6px

SM 8px

Full 9999px

Border Widths

Thin 1px

Opacity

Full 100%

Hover Muted 70%

Disabled 60%

Z-index / Layering

Tier 1 50

Tier 2 55

Tier 3 60

Elevation

Depth & Surfaces

Flat elevation system — depth achieved through color blocking and subtle transforms, not shadows. Y-axis translateY on hover conveys interaction.

Canvas

Default surface — page background, card fills, label backgrounds

L0 · #FFFFFF

Surface

Subtle surface — component backgrounds with minimal contrast

L1 · #f9f8f6

Code / Terminal

Dark container for incident logs and monospace content

Code · #1A1A1A

Canvas #FFFFFF

Surface #f9f8f6

Hairline #E6E6E6

Muted #1A1A1A

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, typography, and hover states.

Buttons

Interactive CTAs — Primary, Outline, Ghost, Disabled

.btn

Primary: #005032 bg · #FFFFFF text · 9999px radius · 13px 16px padding · 42px height · translateY(-1px) on hover. Outline: transparent bg · #E6E6E6 border. Ghost: link-style, no fill.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #E6E6E6 border · 6px radius · 42px height. Focus: #0000EE border · 3px focus ring rgba(0,0,238,.1).

Card

Content container — elevated surface with no shadow

.card

Incident Summary

Production database connection timeout. Severity P1. Initiated response at 14:32 UTC.

#FFFFFF bg · #E6E6E6 border · 8px radius · no shadow. Title: 14px/500/#0D1016. Body: 13px/#68655E. CTA: primary green button.

Badges

Status indicators — Success, Error, Info

.badge

Resolved Critical Investigating

12px/500 · 4/8px padding · 12px radius. Success: #005032. Error: #C0392B. Info: #0000EE.

Guidelines

Do's & Don'ts

Principles for consistent application of the Agentsure design language across all surfaces and contexts.

Do — Embrace

Use the pill-shaped button (#005032) for all primary CTAs — it's the signature interactive element
Apply tight letter-spacing on display sizes (48px+) — it reinforces technical precision
Employ generous padding (32–40px) and vertical rhythm via typography, not chrome
Stack colors for depth: white backgrounds on light canvases separate content without shadows
Reserve JetBrains Mono for incident IDs, code blocks, and terminal UI only
Use the warm accent (#E68846) sparingly as italic text highlight in prose — never as UI fills
Apply micro-elevation via translateY(-1px) on button/link hover for subtle interaction feedback

Don't — Avoid

Do NOT use shadows for depth — rely on color blocking and transforms instead
Do NOT add unnecessary borders or visual chrome beyond the hairline (#E6E6E6)
Do NOT over-tighten or loosen body line-height — 1.6× is optimized for readability
Do NOT apply border-radius to full-width containers (hero, nav, footer remain sharp)
Do NOT mix primary green with secondary UI — it signals CTAs and active states only
Do NOT apply the unused accent colors (#C9BBA3, #888888) to UI components
Do NOT create multi-tier shadow systems — this is a flat design with color blocking

agentsure.us

Preview