Infisical — design system & UI screens

Security · 1 screen · 10 sections · https://infisical.com/

Light hero with a yellow highlight over a dark network graphic and a Wise/VW/LG logo wall.

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/infisical.

Decoded design system

Infisical's decoded design system: background #FFFFFF, text #000000, accent #DBF530, link #DBF530, primary #56A600; type scale h1 48.8px / h2 56px / body 16px; 4px spacing base; 2px base radius. The single interactive/action color is #DBF530 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#EFEFEF`
border	`#D8D8D8`
text	`#000000`
text_muted	`#606060`
primary	`#56A600`
accent	`#DBF530`
link	`#DBF530`
secondary	`#A16207`
button_bg	`#DBF530`
button_text	`#000000`

Using these colors

Action color #DBF530 — the single interactive color; only on things you click or must notice, never large fills.
accent, link, button_bg are all #DBF530 — one role, not several (the action color).
accent #DBF530 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #56A600 — a brand color — but the call-to-action uses #DBF530, not this.
secondary #A16207 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Poppins
Body: Poppins
Mono: JetBrains Mono
h1: 48.8px
h2: 56px
body: 16px

Spacing

base unit: 4px
scale: 2px, 3px, 4px, 5px, 7px, 8px, 10px, 12px, 18px, 24px

Radii

base: 2px
button: 0px

Shadows (elevation)

subtle: rgb(0, 0, 0) 0px 0px 0px 1px
card: oklab(0.64807 -0.133788 0.133842 / 0.28) 0px 0px 28px 0px
overlay: rgba(14, 18, 27, 0.1) 0px 16px 32px -12px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 200ms · 280ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease
animated properties: opacity, background-color, color, border-color

Native design tokens

Token	Value
`--v2-color-bg`	`#ffffff`
`--v2-color-bg-page`	`#f3f4f6`
`--v2-color-border`	`#eaeaea`
`--v2-color-frame`	`#d1d1d1`
`--v2-color-accent-deep-green`	`#23776a`
`--v2-color-accent-green`	`#56a600`
`--v2-color-error`	`#8a1208`
`--v2-color-accent-lime`	`#dbf530`
`--v2-color-volt`	`#f5f841`
`--v2-color-void`	`#000000`

…and 110 more measured on the page.

Button states (measured)

primary hover: color #171717
primary focus: box-shadow rgb(194, 214, 43) 0px 0px 0px 2px

Layout (measured)

container max-width: 1280px
nav: 56px fixed

Motion choreography (measured)

Load order: div.flex×2 → div.c15t-card → div×4 → div×4

Scroll reveal: 15 elements rest at opacity 0, translateY(8px), animate in over 0.3s ease-out.

Overlay recipe (measured)

dialog panel: rgba(0, 0, 0, 0) · radius 0px

Responsive (measured)

breakpoints: 640px · 768px · 1024px · 1280px · 1536px
mobile (390px): hero 32px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Secure secrets, certificates, and AI agents