Infisical

Overview

Infisical is a developer-first identity security platform that transforms secrets management from a compliance burden into an elegant, intuitive experience. The design system embodies "Technical Minimalism with Neon Accent"—a philosophy that pairs clean, neutral surfaces (white backgrounds, dark text at rgb(26, 26, 26), subtle grays at #9ca3af) with a bold, high-saturation lime-yellow primary color (#e7f256 in light mode, #dbf530 as the container variant). This accent is used sparingly but decisively on CTAs, highlights, and key interactive elements, creating visual hierarchy without visual noise. The brand personality is precise, confident, and approachable: engineers trust it because it's transparent about what it does, and it never condescends. Voice example: "Your secrets are encrypted at rest and in transit—no exceptions, no backdoors."

Colors

The color system operates on a dual-mode foundation: light mode (default) uses a near-white surface (#ffffff) with warm grays for hierarchy, while dark mode inverts to a near-black surface (#1a1a1a) with cooler grays. Primary color is the signature lime-yellow (#e7f256 light / #dbf530 dark), applied exclusively to high-priority CTAs ('Get started for free'), focus states, and accent highlights in data visualizations. Secondary color (#374151, a warm charcoal) supports navigation, labels, and secondary CTAs. Tertiary (#0078d4, a professional blue) is reserved for links, status indicators, and tertiary actions. The surface stack is granular: surface-container-lowest (#f9fafb) for subtle backgrounds, surface-container (#ebebeb) for cards and panels, surface-container-high (#e5e7eb) for hover

Typography

The type system pairs Alliance (a geometric sans-serif used for headlines and display text) with Poppins (a rounded, friendly sans-serif for body and UI labels). Display and headline levels (60px, 40px, 28px) use Alliance at fontWeight 600, with tight negative letter-spacing (-0.02em to -0.01em) to convey technical precision. Body text (18px, 16px) uses Poppins at fontWeight 400 with 1.5x line-height (28px, 24px) for readability over long-form content. Labels and buttons use Poppins at fontWeight 600, fontSize 14px, with 0.01em letter-spacing to maintain clarity at small sizes. When displaying code or technical identifiers, apply JetBrains Mono at fontFamily 'JetBrains Mono, ui-monospace' with a 1px solid border at rgba(231, 242, 86, 0.3) and background rgba(231, 242, 86, 0.05) to distingu

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. Horizontal padding (gutter) is 24px on desktop, reducing to 16px on tablet and 12px on mobile. Vertical rhythm is governed by the spacing scale: section separation uses lg (40px), component padding uses md (24px), and internal element spacing uses sm (12px). The hero section spans full-width with a 56px top padding and 40px horizontal padding, creating breathing room around the headline. Cards and containers use rounded-lg (1rem / 16px) for a slightly softer appearance than the default 0.5rem, reinforcing the 'approachable' brand voice. Container max-width is enforced at 1280px to prevent text lines from exceeding 75 characters, maintaining readability. White-space is generous: avoid stacking components

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle border treatments rather than dramatic layering. Level 1 (base surfaces, cards) uses elevation-sm: 0 1px 2px rgba(0, 0, 0, 0.05), creating a barely-perceptible lift. Level 2 (hovered cards, modals) uses elevation-md: 0 4px 12px rgba(0, 0, 0, 0.08), adding presence without drama. Level 3 (dropdowns, tooltips) uses elevation-lg: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for floating UI that must stand above all other content. All cards and containers also use a 1px solid border at {colors.outline} (#9ca3af light, #333333 dark) to def

Shapes

The shape philosophy is "Geometric Clarity"—rounded corners are used to soften technical interfaces without sacrificing precision. Buttons and inputs use rounded-DEFAULT (0.5rem / 8px), providing a subtle roundness that feels modern without being playful. Cards and larger containers use rounded-lg (1rem / 16px), creating a more pronounced softness for content areas. Badges and pills use rounded-full (9999px) to signal compactness and status. Avoid rounded-xl (1.5rem) and rounded-full on primary CTAs; the 8px radius on 'Get started for free' buttons maintains focus and urgency. The rationale: 8

Components

Action Elements Buttons come in three variants: primary (solid lime-yellow background, black text), secondary (transparent with 1px outline), and ghost (no border, no background). Primary buttons use backgroundColor: {colors.primary} (#e7f256), textColor: {colors.on-primary} (#1a1a1a), padding: 8px 16px, height: 40px, rounded: 0.5rem, fontWeight: 600. On hover, transition to backgroundColor: {colors.primary-container} (#dbf530) over 150ms. Secondary buttons use a 1px solid border at {colors.outline}, transparent background, and on hover, fill the background with {colors.surface-container-high} (#e5e7eb). All buttons use the label-md typography (14px Poppins, 600 weight) and apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth state changes.

Containers & Surfaces Car

Do's and Don'ts

**Do**

• Do use the lime-yellow primary (#e7f256) exclusively on high-priority CTAs and focus states—never on backgrounds or body text.
• Do maintain at least 24px vertical spacing between major sections; use the lg spacing token consistently for rhythm.
• Do apply Alliance font to all headlines and display text; reserve Poppins for body, labels, and UI controls.
• Do transition all interactive state changes (hover, focus, active) over 150ms using cubic-bezier(0.4, 0, 0.2, 1) easing.
• Do use 1px solid borders at {colors.outline} to define card and container edges; never rely on shadow alone for definition.
• Do apply rounded-DEFAULT (8px) to buttons and inputs, rounded-lg (16px) to cards, and rounded-full (9999px) to badges.

**Don't**

• Don't use the primary yellow on body text, backgrounds, or non-interactive elements—it's reserved for CTAs and accents.
• Don't apply rounded-xl (24px) or rounded-full to buttons; use 8px for technical precision.
• Don't stack components without whitespace; minimum 24px vertical separation between sections.
• Don't use system-ui or generic sans-serif fallbacks; always specify Alliance or Poppins with explicit fallbacks.
• Don't apply shadows without borders; always pair elevation with a 1px outline at {colors.outline}.
• Don't animate state changes faster than 150ms or slower than 200ms; use cubic-bezier(0.4, 0, 0.2, 1) for consistency.