Documenso

Overview

Documenso is an open-source e-signature platform that democratizes enterprise-grade document signing for developers, businesses, and enterprises of any scale. The design system embodies a philosophy of "Accessible Clarity"—combining a vibrant, energetic lime-green accent (#a2e771) with a clean, minimal light interface to convey trustworthiness, modernity, and approachability. The brand personality is confident yet humble: technical without being intimidating, professional without being corporate. The UI celebrates openness through generous whitespace (surface: #ffffff, surface-container-high: #e7e7e7), a carefully curated monochromatic text hierarchy (on-surface: #171717, on-surface-variant: #4d4d4d), and strategic pops of the signature lime green on interactive elements. Voice: direct, empowering, solution-focused. Example sentence: "Sign anywhere, build anything—Documenso handles the complexity so you don't have to."

Colors

The color system is anchored by a vibrant lime-green primary (#a2e771, rgb(162, 231, 113)) that signals action, trust, and forward momentum. This accent appears exclusively on primary CTAs (Sign Up, Get Started buttons), focus states, and key interactive affordances. The supporting palette includes a warm golden secondary (#ffcc00) for highlights and secondary actions, and a deep magenta tertiary (#b83e7b) for accent highlights and brand moments. The surface stack is deliberately light and neutral: surface (#ffffff) as the base, surface-container-high (#e7e7e7) for subtle depth, and surface-container-lowest (#fbfbfb) for card backgrounds. Text hierarchy uses on-surface (#171717) for primary content and on-surface-variant (#4d4d4d) for secondary/tertiary information. The outline color (#888

Typography

The type system uses Inter exclusively across all weights (400, 500, 600, 700) to maintain a cohesive, modern aesthetic. Display (56px, 700 weight, -0.02em letter-spacing) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) establish clear information hierarchy for section titles and card headers. Title-lg (22px, 600 weight) bridges headlines and body text for subsections and form labels. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) provide comfortable reading for descriptive copy and UI text. Label-md (14px, 600 weight, 0.01em letter-spacing) and label-sm (12px, 500 weight, 0.02em letter-spacing) handle button text, badges, and micro-copy. All body text us

Layout

The layout follows a 12-column grid system with a max-width container of 1120px, centered on the viewport. The gutter spacing is consistently 24px (md unit), creating a predictable rhythm across all breakpoints. Hero sections use lg spacing (40px) for vertical separation between major content blocks, while card stacks and list items use md spacing (24px) for breathing room. The page rhythm emphasizes whitespace: the hero headline sits with 40px below it, followed by body copy at 24px margin-bottom, then CTAs at 24px spacing. Sections are separated by xl spacing (64px) to create distinct visual zones. Container padding is 24px on all sides (md unit), scaling down to sm (12px) on smaller viewports. The design avoids cramped layouts—every interactive element has at least 12px of breathing roo

Elevation & Depth

Depth is conveyed through a restrained shadow system that prioritizes clarity over drama. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle card backgrounds and input fields, md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns and tooltips. Default buttons use sm elevation to sit flush with the page, transitioning to md on hover to signal interactivity. Cards use sm elevation on default state, escalating to md on hover or focus. The shadow system avoids blur-heavy effec

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the precision of a data-heavy interface without sacrificing clarity. Buttons use md radius (0.75rem / 12px) for a friendly, approachable feel that still reads as actionable. Cards and containers use lg radius (1rem / 16px) to create visual breathing room and reduce visual harshness. Input fields use DEFAULT radius (0.5rem / 8px) for a compact, form-like appearance that signals data entry. Badges and small UI elements use full radius (9999px) to create pill-shaped affordances that feel lightweight and mode

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use {colors.primary} (#a2e771) background with {colors.on-primary} (#1f3d0a) text, {typography.label-md}, {rounded.md} (12px), and padding 10px 24px for a 40px total height. Default state includes {elevation.sm} (0 2px 4px rgba(0, 0, 0, 0.08)). On hover, background transitions to {colors.inverse-primary} (#5cb31e) with box-shadow expanding to 0 4px 12px rgba(162, 231, 113, 0.3) over 200ms. Active state darkens to #5cb31e. Secondary buttons use transparent background with 1px solid {colors.outline-variant} (#d1d1d1) border, {colors.on-surface} text, and the same padding/height. On hover, background becomes {colors.surface-container-high} (#e7e7e7) and border shifts to {colors.outline} (#888888). All button text

Do's and Don'ts

**Do**

• Do use the primary green (#a2e771) exclusively on CTAs, focus states, and key interactive affordances—never on passive elements or backgrounds.
• Do maintain 24px (md) gutter spacing between sections and 12px (sm) between inline elements to preserve the clean, spacious aesthetic.
• Do apply {elevation.sm} to default interactive states and escalate to {elevation.md} on hover to signal interactivity without overwhelming the interface.
• Do use Inter 600 weight for all button and label text to ensure clarity and visual hierarchy at small sizes.
• Do pair lime-green accents with the light surface palette (#ffffff, #f6f6f6) to maximize contrast and accessibility (WCAG AA minimum 4.5:1 ratio).
• Do use rounded corners at 12–16px for buttons and cards to balance friendliness with professionalism—avoid sharp corners or excessive rounding (>20px).

**Don't**

• Don't use the primary green (#a2e771) on backgrounds, text, or non-interactive elements—reserve it exclusively for actions and focus states.
• Don't apply shadows deeper than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12))—the design rejects theatrical depth in favor of clarity.
• Don't mix typefaces—Inter is the sole font family across all weights. Avoid system fonts, serif fonts, or display fonts outside the approved set.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements or below {spacing.md} (24px) on card containers—whitespace is a core design principle.
• Don't use color alone to communicate state—always pair color changes with shadow, border, or text weight changes for accessibility.
• Don't apply border-radius below 8px (DEFAULT) on buttons or cards—the design language requires soft, approachable corners.