Design System · v1.0

Brand
Style Guide

The complete visual language of Agentic Users — every token, specimen, and component that defines how we look and feel.

01

Brand Identity

On Light

"All companies are software companies."

On Dark

"All companies are software companies."

Brand Mark
AU

Monogram · for avatars & favicons

Min size: 20px height
Clear space: 1× cap-height on all sides
Never stretch or rotate
Never recolor the logotype
02

Color System

Brand

Brand #FF3E00 Primary CTA, accents, links
Brand Dark #CC3200 Hover states, active
Brand Darker #991E00 Pressed, deep shadows
Brand 40 rgba(255,62,0,0.4) Focus rings, divider accents
Brand 20 rgba(255,62,0,0.15) Hover fills, badge bg
Brand 10 rgba(255,62,0,0.08) Subtle tints, section bg

Ink (Text)

Ink #0C0C0C Primary headings, body
Ink 80 #1A1A1A Secondary headings
Ink 60 #333333 Navigation, body text
Ink 40 #666666 Descriptions, hints
Ink 20 #999999 Timestamps, captions

Surface & Line

White #FFFFFF Primary page background
Surface #FAFAF9 Section fills, inputs
Surface 2 #F3F3F1 Card backgrounds
Line #E5E3DF Dividers, borders

Semantic

Success #16A34A Confirmations, success states
Success Tint rgba(22,163,74,0.1) Success badge backgrounds
Error #DC2626 Errors, destructive actions
Error Tint rgba(220,38,38,0.1) Error badge backgrounds
Warning #D97706 Warnings, caution states
03

Typography

Display · Cormorant

Aa Bb Cc

Serif, high-contrast. Use for all headings, numbers, and display text. Weights: 400 · 500 · 600 · 700 and italics.

Body · Sora

Aa Bb Cc

Sans-serif, geometric. Use for all body copy, UI labels, navigation, and captions. Weights: 300 · 400 · 500 · 600.

Display XL Cormorant · 600 · clamp(3.5rem,8.5vw,8.5rem) · leading-[1.0] · tracking[-0.015em]

All companies are
software companies.

Display L Cormorant · 600 · clamp(2.75rem,6vw,5rem) · leading-[1.05] · tracking[-0.01em]

Build what comes next.

Heading 2 Cormorant · 600 · clamp(2rem,4.5vw,3.5rem) · leading-[1.1]

Intelligent Workspace Solutions

Heading 3 Cormorant · 600 · clamp(1.5rem,3vw,2rem) · leading-[1.15]

AI Agent Teams & Orchestration

Heading 4 Cormorant · 600 · 1.4rem · leading-[1.2]

Skills, Custom MCPs & Data Pipelines

Body Large Sora · 400 · 1.125rem · leading-[1.7]

We build full-stack intelligent solutions on top of Google Workspace and Microsoft 365 — powered by GCP and Azure.

Body Sora · 400 · 1rem · leading-[1.65]

From custom apps and cloud-native backends to Workspace Studio automations, we extend the platforms your team already uses with AI-native capabilities that scale.

Body Small Sora · 400 · 0.875rem · leading-[1.6]

Ships in 6 weeks. Built with Claude and Gemini. Designed for teams of 50–100.

Label / Eyebrow Sora · 600 · 0.65rem · tracking-[0.2em] · uppercase

Services · What we build

Caption Sora · 400 · 0.625rem · leading-[1.5]

© 2026 Agentic Users. All rights reserved. Built with AI. Designed for humans.

04

Spacing Scale

space-1
4px
Icon gap, tight padding
space-2
8px
Inline items, small gaps
space-3
12px
Badge padding, list gaps
space-4
16px
Card inner, form fields
space-6
24px
Section padding (mobile)
space-8
32px
Card grids, section padding
space-12
48px
Large internal sections
space-14
56px
Section vertical padding
space-20
80px
Full section padding (desktop)

Max-widths

1280px · max-w-7xl — Primary content container
1024px · max-w-4xl — Secondary pages
680px · Forms & modals
64ch · Prose / body copy
05

Components

Buttons

Primary
bg:#FF3E00 · white · px-6 py-3 · rounded-sm · hover:bg:#CC3200 hover:-translate-y-px
Secondary / Outline
border:1.5px solid #0C0C0C · transparent bg · hover:bg:#F3F3F1
Text / Link
color:#FF3E00 · no border · hover:underline · tracking-wide
Disabled
opacity: 0.35 · cursor: not-allowed · any variant

Navigation Pill

Home About Work Services Contact Talk to us
Fixed · backdrop-blur(24px) saturate(180%) · bg:rgba(255,255,255,0.82) · border:rgba(0,0,0,0.08) · border-radius:100px

Cards

Default
01 · Service
Intelligent Workspace
AI capabilities built into platforms your team already uses.
bg:rgba(255,255,255,0.4) · border:rgba(0,0,0,0.08) · radius:12px · p:28px
Hover State
02 · Service
AI Agent Teams
Autonomous systems that work alongside your people.
translateY(-4px) · shadow:0 12px 32px rgba(0,0,0,0.1) · border:rgba(255,62,0,0.2)

Form Inputs

Default
bg:rgba(255,255,255,0.55) · border:rgba(0,0,0,0.08) · radius:8px · p:12px 14px
Focus
border:#FF3E00 · bg:#fff · box-shadow:0 0 0 3px rgba(255,62,0,0.12)
Error

Please enter a valid email address.

border:#DC2626 · box-shadow:0 0 0 3px rgba(220,38,38,0.1)
Disabled
opacity:0.5 · cursor:not-allowed · bg:Surface-2

Badges & Tags

AI-Native Google Workspace Shipped Breaking Beta Claude Code Skills MCP ADK
Sora · 0.6rem · 600 · tracking-[0.12em] · uppercase · px:10px py:4px · radius:100px
06

Visual Language

Glass surface
AI-powered content rendered here

Glassmorphism Surfaces

Cards and overlays use semi-transparent white with backdrop blur. Creates depth without heavy shadows. backdrop-filter: blur(24px) saturate(180%)

bg:rgba(255,255,255,0.4–0.55) · blur(24px) · saturate(180%) · border:rgba(0,0,0,0.08)
Ambient field

Ambient Gradient Backgrounds

Three layered radial gradients create a warm atmospheric backdrop. Orange + lavender blend at extremes, multiply blend mode, heavy blur — never distracting.

radial-gradient · orange + lavender/blue · blur(50–70px) · mix-blend-mode:multiply · opacity:0.35–0.55
Headline appears first
Sub text follows
CTA completes the sequence

Scroll-Triggered Reveals

Elements fade up from 24px below with blur. IntersectionObserver adds .is-visible on entry. Stagger delays of 50–120ms per sibling create sequential choreography.

opacity:0→1 · translateY(24px→0) · blur(4px→0) · duration:700ms · easing:cubic-bezier(0.16,1,0.3,1)
07

Animation & Motion

Easing Curves

Standard
cubic-bezier(0.22, 1, 0.36, 1)

Default for all UI transitions. Smooth ease-out with slight spring feel.

Spring
cubic-bezier(0.16, 1, 0.3, 1)

Reveals, page enters. More pronounced deceleration with bounce.

Linear
linear

Marquee scrolls, looping animations, progress bars.

Ease In-Out
ease-in-out

Modals, drawers, step transitions. Symmetric feel.

Duration Tokens

TokenValueEasingUse Cases
instant 0ms — Toggled visibility, JS-only changes
fast 150ms Standard Hover fills, color transitions, opacity
standard 250ms Standard Button hover, card lift, input focus
slow 500ms Spring Step transitions, tab switches, modals
reveal 700ms Spring Scroll reveals, page hero entrance
long 1200ms Spring Staggered hero text animation
marquee 28s Linear Client marquee, infinite scroll

Stagger Delays

d-1 · 50ms
d-2 · 120ms
d-3 · 200ms
d-4 · 280ms
d-5 · 360ms
d-6 · 450ms
08

Brand Voice

Tone Attributes

Confident
We state things directly. We don't hedge or over-qualify.
Technical
We go deep. Jargon is fine when the audience knows it.
Precise
Every word earns its place. Short sentences over long ones.
Human
We build with AI but speak to people. No robot-speak.
Urgent
Weeks, not quarters. The window for AI advantage is now.
Honest
Proof, not promises. We cite clients, timelines, and numbers.

Do / Don't

Do
Ships in 6 weeks.
"We make it real."
All companies are software companies.
Proof, not promises.
Built on Claude and Gemini.
If you think AI could do it, it probably can.
Don't
Leverage synergistic AI solutions.
"We're passionate about innovation!"
Unlock the full potential of your digital transformation journey.
Best-in-class enterprise AI platform.
Powered by cutting-edge technology.
We help businesses thrive in the AI era.

Sample Copy

Hero headline
"All companies are software companies."
Sub-headline
"If you think AI could do it, it probably can. We make it real."
CTA
"Talk to us"
Service intro
"We build on top of Google Workspace and Microsoft 365 — making your existing stack intelligent."
Value prop
"Your platforms, supercharged. Your AI workforce, deployed. In six weeks."
Trust signal
"6 companies. 98% satisfaction. Built with AI. Designed for humans."