BizForm

Overview

BizForm is an enterprise-grade form-building platform designed for teams that need to collect, organize, and analyze structured data at scale. The design system reflects a "Refined Pragmatism" aesthetic—combining the clarity of corporate software with the approachability of modern SaaS. The UI prioritizes signal over noise: a cool blue primary (#409eff) anchors interactive elements and CTAs, while a carefully calibrated gray palette (#303133 for text, #c0c4cc for borders, #ebeef5 for containers) creates visual rhythm without distraction. The emotional response is one of competence and trust: users feel they are working with a system that understands their data and respects their time.

The brand voice is direct, instructional, and human-centered. Terminology is precise ("form field" not "input box"; "submission" not "send"), and error messages explain the problem and the fix in plain language. The tone avoids corporate jargon and unnecessary hedging. Example sentence in BizForm's voice: "This field is required. Add a value before you can save the form."

Colors

The color system is rooted in a cool, professional palette designed for clarity and accessibility in data-heavy interfaces. Primary (#409eff) is the signature accent—used exclusively on CTAs, active states, focus rings, and key interactive elements. It commands attention without aggression, sitting at a comfortable contrast ratio (4.5:1) against white surfaces. Secondary (#6c94a8) provides a muted supporting accent for secondary actions and informational contexts; it is never used for primary CTAs. Tertiary (#67c23a) is reserved for success states, confirmations, and positive feedback—its warm green creates immediate semantic recognition. Error (#f56c6c) signals destructive actions, validation failures, and alerts; it is applied sparingly and always paired with explanatory text.

The surfa

Typography

The type system employs Helvetica Neue / Arial as the primary font stack, chosen for its universal rendering and proven legibility in dense, data-driven interfaces. Display (48px, 700 weight, -0.02em tracking) is reserved for page titles and major section headers; headline-lg (32px, 600 weight) anchors modal titles and primary navigation; headline-md (24px, 600 weight) breaks up form sections. Body-lg (16px, 400 weight, 24px line-height) is the default for instructional text and descriptions; body-md (14px, 400 weight, 22px line-height) is used for field labels and helper text. Label-md (13px, 600 weight, 0.01em tracking) is applied to button text, badges, and form control labels to ensure they remain scannable at small sizes. All body text uses a line-height of at least 1.5 (22–24px) to s

Layout

BizForm uses a 12-column grid system with a max-width of 1280px, ensuring content remains readable on large displays while adapting fluidly to smaller screens. The spacing scale is built on a 4px unit: xs (4px), sm (8px), md (16px), lg (24px), xl (32px). Form fields and buttons use md (16px) for horizontal padding and sm (8px) for vertical padding, creating a 32px minimum touch target. Section separation employs lg (24px) margins to establish clear visual hierarchy; related fields within a section use sm (8px) gutters. Container padding is consistently md (16px) on desktop, reducing to sm (8px) on mobile. The gutter between grid columns is 16px, and all form layouts align to the grid to create a sense of order and predictability. White-space is treated as a first-class design element: gene

Elevation & Depth

Depth in BizForm is conveyed through subtle shadows and layering, not through color shifts or dramatic contrast changes. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and containers at rest, md (0 3px 8px rgba(0, 0, 0, 0.15)) for dropdowns, modals, and hover states, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating panels and overlays. All interactive elements (buttons, inputs, selects) sit at the base level with no shadow; on hover or focus, they elevate to md. Dropdown panels and select menus use md shadows to separate them from the page surface. Mod

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are applied consistently but conservatively to reinforce the professional, data-focused nature of the platform. All form inputs, buttons, and select dropdowns use the DEFAULT radius (4px), which is small enough to feel precise and technical while avoiding the harshness of sharp corners. Cards and containers use md (6px) to signal they are groupings of related content. Modals and floating panels use lg (8px) to emphasize their elevated status. The full (9999px) radius is reserved for badges and status indicators, where the circular form c

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses a solid background at primary (#409eff), white text, 32px height, and 8px vertical / 16px horizontal padding. On hover, the background shifts to #66b1ff (a lighter blue) with a 200ms ease-in-out transition. On focus, a 2px ring at rgba(64, 158, 255, 0.1) appears around the button. Disabled buttons drop to surface-container-high (#e4e7ed) background with on-surface-variant text (#606266) and cursor: not-allowed. button-secondary uses a transparent background with a 1px border at outline-variant (#c0c4cc) and primary text (#409eff); on hover, it fills with surface-container-high and the border upgrades to primary. Pagination buttons are minimal: transparent background, 28px height, 35.5px minimum width,

Do's and Don'ts

**Do**

• Do use primary (#409eff) exclusively for primary CTAs and active states—never use it for decorative elements or secondary actions.
• Do maintain at least 16px (md spacing) between major form sections to prevent cognitive overload and establish clear visual hierarchy.
• Do apply a 2px focus ring at rgba(64, 158, 255, 0.1) to all interactive elements (buttons, inputs, selects) to meet WCAG AAA accessibility standards.
• Do use body-md (14px, 400 weight, 22px line-height) for all form labels and helper text to ensure readability and consistency.
• Do pair error states with explanatory text—never show an error color alone without context or guidance on how to fix the problem.

**Don't**

• Don't use secondary (#6c94a8) or tertiary (#67c23a) for primary CTAs—they lack the visual weight and semantic clarity of primary.
• Don't apply shadows to more than one layer at a time; use sm shadows for cards at rest and md shadows only on hover or elevated states.
• Don't use border-radius values other than those defined in the rounded scale (sm, DEFAULT, md, lg, xl, full)—consistency is critical for recognition.
• Don't render small text (label-sm, 12px) over busy backgrounds without a text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) to maintain contrast.
• Don't mix font families or use system-ui, sans-serif, or inherit—always specify Helvetica Neue, Arial, or a fallback stack to ensure consistent rendering across platforms.