A clean, high-precision utility for securing infrastructure
02
Color
#1E1F22Ink
#475569Ink soft
#F3F4F6BG
#F9FAFBBG soft
#FFFFFFBG quiet
#A3A3A3Muted
rgba(204, 204, 206, 1)Line
Monochromatic scale from cool grays to near-black, emphasizing clarity and focus.
03
Typography
transitional-serif · monospace
display48px · 400
body16px · 400
small14px · 400
Use 'alliance' for all display and body text to maintain a consistent, elegant typographic voice. · Maintain a strict typographic scale with 48px, 24px, 16px, and 14px as the primary steps. · Ensure line heights are consistently set at 1.5 (24px for 16px text) for optimal readability.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Consistent spacing based on a 4px grid, with generous white space to frame content and create a sense of calm and precision.
05
Surfaces
sm · 4px
md · 8px
lg · 12px
pill · 999px
Thin 1px solid borders using #E5E7EB or #CC00CE for subtle separation.
0 1px 3px rgba(0, 0, 0, 0.1)
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
A clean, centered grid system with generous padding and clear visual hierarchy.
07
Motion & Interaction
200msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
Smooth color and background-color transitions on hover states. · Subtle fade-in effects for page sections and modals.
Color changes on text links and background-color transitions on buttons. · Standard button and link click behavior with immediate feedback.
08
Components
buttonSolid black buttons for primary actions, white with black borders for secondary, and simple text links with arrows.
cardClean, bordered cards with subtle shadows and generous internal padding.
chipSimple, bordered badges or labels with minimal styling.
inputClean, bordered input fields with clear labels and placeholders.
heroLarge, centered typographic hero with clear CTAs and a supporting visual.
09
Voice & Don'ts
ToneProfessional, confident, and reassuring.
HeadlinesDirect, benefit-oriented statements that clearly communicate value.
CTAsAction-oriented and clear, such as 'Get a Demo' or 'Get Started'.
Don't use bright, saturated accent colors — screenshot shows a monochromatic palette of grays and black.
Don't use decorative, rounded fonts — screenshot shows a clean, transitional-serif typeface.
Don't use complex, busy layouts — screenshot shows a clean, centered, single-column structure.
Don't use heavy drop shadows or 3D effects — screenshot shows minimal, flat design with subtle borders.
Don't use multi-colored buttons or elements — screenshot shows primarily black, white, and gray UI components.
Don't use large blocks of color or gradients — screenshot shows a predominantly white and light gray background.
Captured from the live site · real computed styles
11
System prompt
Infisical is a developer-first security platform for managing secrets, certificates, and AI agents. The design is clean, professional, and highly structured, using a monochromatic palette of near-black (#1E1F22), cool grays (#F3F4F6, #A3A3A3), and white (#FFFFFF) with no dominant accent color. Typography relies on a transitional-serif font ('alliance') for both display and body text, creating a sophisticated, editorial feel. The layout is spacious and centered, emphasizing clarity and trust. Key donts: Avoid using bright, saturated colors or gradients; maintain the monochromatic, high-contrast palette. Don't use rounded, playful fonts; stick to the clean, transitional-serif typeface. Don't create cluttered layouts; keep the design minimal and focused on clear typographic hierarchy and generous white space.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
