A premium consultancy for AI agents, balancing technical depth with approachable, human-centric storytelling.
02
Color
#302E2DInk
#716F6CInk soft
#FFFFFFBG
#F6F5F3BG soft
#E4E0DCMuted
rgba(228, 224, 220, 1)Line
Warm Neutrals: A palette grounded in warm grays and earthy tones, relying on high-quality photography for visual interest rather than synthetic accents.
03
Typography
grotesque-sans · monospace
display56px · 500
headline44px · 400
subhead24px · 400
body16px · 400
caption14px · 400
Use tight tracking (-1.3px to -0.38px) for large display text to create a refined, editorial feel. · Maintain a strict 400 weight for almost all text; 500 is used very sparingly for specific emphasis. · Ensure generous line-height (1.4-1.5) for body text to maintain readability.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
80px
Generous and structured, using large padding (80px) for major sections and consistent 8/16/24px increments for internal spacing to create a clean, breathable layout.
A centered, responsive layout with a max-width container, transitioning from a full-bleed editorial hero to a structured, multi-column UI for dashboards.
07
Motion & Interaction
220msmicro
250mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Standard transitions for color, background-color, and opacity (0.25s) · Slightly longer transitions for complex properties like filter (0.5s) · Subtle transforms for interactive elements
Smooth color and background transitions on interactive elements like buttons and navigation links. · Subtle transform (scale/translate) or opacity change on primary CTAs.
08
Components
buttonPill-shaped (999px radius) with white background and dark ink text, or subtle outline for secondary actions.
cardClean containers with 16px border-radius and subtle 1px borders on soft backgrounds.
chipMinimal, often using just text with subtle background or border treatments.
inputClean fields with subtle borders, often accompanied by small icons and 4px/8px internal padding.
heroFull-viewport, photographic backgrounds with large, left-aligned display typography and a single, high-contrast pill CTA.
09
Voice & Don'ts
ToneConfident, clear, and approachable.
HeadlinesShort, impactful statements that clearly state the value proposition.
CTAsDirect and action-oriented, often using a single 'Learn more' or 'Sign in'.
Don't use vibrant synthetic accents — screenshot shows a palette grounded in warm grays and earthy photographic tones.
Don't set large headlines with loose tracking — screenshot shows tight tracking (e.g., -1.3px) for a refined, editorial feel.
Don't use heavy font weights for body copy — screenshot shows almost exclusive use of weight 400.
Don't clutter the UI with heavy shadows or borders — screenshot shows subtle 1px borders and minimal shadow usage.
Don't use sharp, geometric border-radius on buttons — screenshot shows fully rounded pill shapes (999px).
Don't rely on color for primary emphasis in the UI — screenshot shows reliance on typography scale and spacing.
Avoid: Jargon-heavy language without context
Avoid: Aggressive or overly enthusiastic marketing speak
Avoid: Cluttered UI that distracts from the core message
Avoid: High-contrast neon or synthetic accent colors
Captured from the live site · real computed styles
11
System prompt
Sierra is a premium AI agent platform that positions itself through a human-centric, editorial lens. Its visual DNA is defined by a warm, neutral color palette (ink #302E2D, soft background #F6F5F3) that lets high-quality photography do the emotional heavy lifting. The typography is a refined grotesque-sans with tight tracking on large displays, creating a clean, sophisticated feel. The UI components are simple, using pill-shaped buttons and subtle borders. Critical donts: avoid synthetic accents, keep tracking tight for headlines, use light font weights for body text, and maintain generous, breathable spacing. The overall feel is trustworthy and professional, yet approachable.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
