# Infisical · Design system migration spec

> Source: https://infisical.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a clean, professional SaaS/developer tool interface that prioritizes clarity, trust, and readability through a restrained, monochromatic design system.

## 1. Identity DNA

Infisical's design system is engineered with the precision of a high-security vault, where every component has a single, clear purpose. Like a utility built for infrastructure, it prioritizes absolute clarity and unwavering focus over decorative flourish, creating a trustworthy environment for managing critical secrets.

**One-liner:** An all-in-one platform to securely manage secrets, certificates, and AI agents across any stack.
**Keywords:** Security · Infrastructure · Secrets Management · Developer-first
**Analogy:** A clean, high-precision utility for securing infrastructure

## 2. Color

The color system is a study in restraint, employing a strictly monochromatic scale from cool grays to near-black. This deliberate absence of saturated hues directs all attention to content and function, building a foundation of professional clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F3F4F6` | main background |
| `--bg-soft` | `#F9FAFB` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#1E1F22` | body text |
| `--ink-soft` | `#475569` | secondary text |
| `--muted` | `#A3A3A3` | placeholder |
| `--muted-soft` | `#E5E7EB` | weak hint |
| `--line` | `rgba(204, 204, 206, 1)` | divider |

**Color principle:** Monochromatic scale from cool grays to near-black, emphasizing clarity and focus.

The principle is functional monotony: color is a tool for hierarchy and state, never for decoration.

## 3. Typography

A single transitional-serif typeface, 'alliance,' provides a consistent and sophisticated voice across all scales. This unified typographic choice merges editorial gravitas with technical precision, suitable for both dense documentation and impactful headlines.

- **Display:** transitional-serif
- **Body:** transitional-serif
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.5 | 400 | 0 | Hero headings and section titles |
| body | 16px | 1.5 | 400 | 0 | Primary body text and UI copy |
| small | 14px | 1.5 | 400 | 0 | Secondary text, captions, and metadata |

**Type rules:**
- 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.

## 4. Spacing

A consistent 4px grid underpins a rhythm of measured, generous whitespace, framing content with deliberate calm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent spacing based on a 4px grid, with generous white space to frame content and create a sense of calm and precision.

## 5. Surfaces

Depth is conveyed through minimal means: thin 1px borders and a single, subtle shadow define surfaces. This flat, bordered approach creates a clean, layered interface without visual noise.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0 1px 3px rgba(0, 0, 0, 0.1)
- **Borders:** Thin 1px solid borders using #E5E7EB or #CC00CE for subtle separation.

## 6. Layout

The layout skeleton is a centered, single-column system that enforces visual hierarchy through structure, not ornament. Generous padding and alignment create a spacious, ordered field that guides the eye logically from one section to the next.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean, centered grid system with generous padding and clear visual hierarchy.

## 7. Motion & Interaction

Motion is employed as subtle, functional feedback rather than spectacle. Smooth 0.3-second transitions on hover states and simple fades for appearing elements provide state changes with quiet, reassuring smoothness.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and background-color transitions on hover states.
  - Subtle fade-in effects for page sections and modals.

- **Hover:** Color changes on text links and background-color transitions on buttons.
- **Click:** Standard button and link click behavior with immediate feedback.
- **Transition:** All interactive elements use a 0.3s cubic-bezier transition for smooth state changes.
- **Keyboard:** Standard tab navigation with focus rings for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional and direct, offering clear, benefit-oriented statements without ambiguity. It speaks with the confidence of a reliable tool, explaining necessary concepts without resorting to casual slang or unexamined jargon.

- **Tone:** Professional, confident, and reassuring.
- **Headline style:** Direct, benefit-oriented statements that clearly communicate value.
- **CTA style:** Action-oriented and clear, such as 'Get a Demo' or 'Get Started'.
- **Avoid:** Avoid overly casual or slang language. / Avoid jargon without explanation. / Avoid vague or ambiguous claims.

### Don'ts
- ❌ 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.

They deliberately do not use bright accents, decorative fonts, or complex layouts, adhering strictly to their monochromatic, high-contrast, and minimalist principles.

## System Prompt (paste into AI tool)

```
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.
```