Frappe CRM

Overview

Frappe CRM is an enterprise-grade customer relationship management platform designed for teams managing complex sales pipelines, customer interactions, and operational workflows. The design system embodies 'Functional Minimalism'—a philosophy that strips away decorative elements to expose pure utility, allowing users to focus entirely on data and decision-making. The interface uses a neutral grayscale foundation (#171717 on #f8f8f8) punctuated by a precise blue accent (#0289f7) that guides attention to interactive elements and calls-to-action. The emotional response is one of clarity and control: users feel confident navigating dense information because every visual element serves a specific, unambiguous purpose.

The brand voice is direct, professional, and unadorned. Frappe CRM speaks in imperative, action-oriented language without marketing flourish. Vocabulary favors concrete nouns (records, pipelines, workflows) over abstract adjectives. The tone is calm and authoritative—never breathless or casual. Example: 'Create a new lead, assign it to your team, and track progress through each stage of your pipeline.'

Colors

The color system is built on a neutral-first philosophy: the dominant surface is a warm off-white (#f8f8f8), with a full grayscale stack from #ffffff (surface-bright) down to #171717 (primary/on-surface text). This creates a high-contrast, accessible reading environment suitable for extended data-entry sessions. The gray scale (#f3f3f3, #ededed, #e2e2e2, #c7c7c7, #999999, #7c7c7c, #525252, #383838) provides semantic layering: lighter grays (#ededed, #e2e2e2) define container boundaries and subtle dividers; mid-grays (#7c7c7c, #999999) serve as secondary text and disabled states; dark grays (#383838, #171717) anchor primary text and interactive elements.

The secondary accent is a vivid blue (#0289f7, primary-fixed) used exclusively for interactive elements: button fills, link text, focus s

Typography

The type system uses Inter (variable weight, 100–900 range) as the sole typeface, reinforcing the 'no-nonsense' aesthetic. The hierarchy is built on weight and size rather than font switching: Display (60px, 700) anchors page titles; Headline-lg (40px, 600) marks major section breaks; Headline-md (28px, 600) introduces subsections; Title-lg (20px, 600) labels cards and form sections; Body-lg (18px, 400) and Body-md (14px, 400) carry primary and secondary content; Label-md (14px, 600) and Label-sm (12px, 500) mark buttons, badges, and metadata. Letter-spacing is conservative: display uses -0.04em to tighten large text, while body and label use 0em to 0.02em to maintain readability at small sizes. Line-height is generous (1.4–1.7x font size) to support scanning of dense data tables and form

Layout

The layout system uses a 12-column grid with a max-width of 1280px, allowing flexible content arrangement from mobile (1 column) to desktop (3–4 columns). The gutter is fixed at 24px, creating consistent breathing room between grid items. Page sections are separated by lg spacing (40px) to establish clear rhythm; within sections, md spacing (24px) groups related content, and sm spacing (12px) tightens related elements (e.g., label + input pairs). Container padding is md (24px) on desktop, reducing to sm (12px) on tablets and xs (4px) on mobile. The white-space philosophy prioritizes scanability: form fields are never packed tighter than 12px apart vertically, and card content always has md (24px) internal padding. Data-dense tables use sm (12px) row padding to fit more rows per viewport wi

Elevation & Depth

Depth is conveyed through subtle shadows and border treatments rather than dramatic layering. The shadow system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and subtle containers; md (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdowns, modals, and elevated surfaces; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for full-page overlays and critical modals. Borders are 1px solid and use the outline-variant color (#999999) for standard containers, upgrading to outline (#7c7c7c) on hover. The elevation stack is flat by design: there are no more than 3 distinct shadow levels in any view, preventi

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are used sparingly and purposefully to signal interactivity without softening the utilitarian aesthetic. Buttons use lg (1rem / 16px) border-radius, creating a subtle pill shape that distinguishes them from static content. Cards and containers use xl (1.5rem / 24px) for a more pronounced roundness that suggests 'contained information.' Input fields use DEFAULT (0.5rem / 8px), a tight radius that maintains the form's structural clarity. Dropdown panels and popovers use DEFAULT (0.5rem / 8px) to align with input fields. Badges and sta

Components

Action Elements Buttons are the primary interactive element and must always include a visible focus state. Primary buttons (button-primary) use a solid fill of #171717 (primary) with white text, 48px height, 24px horizontal padding, and lg (16px) border-radius. On hover, the background shifts to #383838 (primary-container) with a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition. On focus (keyboard navigation), add a 2px solid outline in #0289f7 (secondary) with 2px outlineOffset. Secondary buttons use a transparent background with a 1px border in #999999 (outline-variant) and #0289f7 text; on hover, the background becomes #ededed (surface-container-low). All buttons must have box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to lift them from the page.

Containers & Surfaces Cards (card) are

Do's and Don'ts

**Do**

• Do use the blue accent (#0289f7) exclusively for interactive elements—buttons, links, focus states—to create a consistent 'tap target' language.
• Do maintain at least 24px vertical spacing between form sections and 12px between related fields to prevent cognitive overload in data-dense layouts.
• Do apply the full (9999px) border-radius only to badges and atomic status indicators; use lg (16px) for buttons and DEFAULT (8px) for inputs to maintain visual hierarchy.
• Do include a visible 2px focus outline in #0289f7 on all interactive elements for keyboard navigation; never rely on color alone to indicate focus.
• Do use the gray scale (#f3f3f3 to #525252) for secondary text, disabled states, and dividers; reserve #171717 for primary content and #ffffff for surfaces.

**Don't**

• Don't use shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12)) or you'll introduce visual noise that contradicts the minimalist aesthetic.
• Don't mix typefaces; Inter is the sole font family across all weights and sizes—switching to system fonts or serif faces breaks the cohesive, technical identity.
• Don't apply rounded corners larger than xl (24px) to interactive elements like buttons or inputs; this softens the interface and reduces perceived affordance.
• Don't use red (#e03636) for anything other than errors, destructive actions, or critical alerts; overuse dilutes its warning signal.
• Don't add decorative elements (gradients, patterns, icons without semantic purpose) to surfaces; every visual element must serve a functional role in the information hierarchy.