AlignUI Design System

Overview

AlignUI is a production-grade design system built for React and TailwindCSS, enabling teams to ship consistent, accessible interfaces at scale. The brand embodies "Pragmatic Minimalism"—a design philosophy that strips away ornament to reveal pure function, where every visual decision serves developer velocity and design precision. The aesthetic is clean, intentional, and unapologetically technical: a light, neutral canvas (off-white #f7f7f7 to charcoal #2e2e2e) punctuated by a confident orange accent (#f05023) that signals action and energy. The UI evokes clarity and trust—the emotional response is one of capability and control, as if the interface itself is a well-engineered tool that gets out of the way.

The brand voice is direct, confident, and developer-first. AlignUI speaks in the language of builders: "Flexible components, consistent UI, quick development, easy integration." Vocabulary favors precision over poetry—"synced," "customizable," "seamless"—and the tone assumes the user is competent and time-constrained. Example sentence in brand voice: "Build faster websites with AlignUI PRO components—your Figma file stays in sync with your code library."

Colors

The color system is anchored in a neutral, light-mode-first palette with strategic accent colors for interaction and status. Primary (#2e2e2e, rgb(46, 46, 46)) is the dominant text and interactive element color—used on buttons, links, and focus states—paired with white (#ffffff) for maximum contrast and legibility. The surface stack progresses from pure white (surface: #ffffff) through carefully calibrated grays (surface-container-low: #f5f5f5, surface-container: #eeeeee, surface-container-high: #e8e8e8) to enable subtle depth without introducing color. Secondary (#f05023, a warm orange-red) is the brand's signature accent, deployed on primary CTAs, success states, and brand-critical interactive elements to command attention and convey energy. Tertiary (#12a557, a muted green) supports sec

Typography

The type system uses Inter exclusively, a geometric sans-serif that communicates precision and modernity. Display (80px, weight 550, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (40px, weight 600) and headline-md (28px, weight 600) establish section hierarchy with tight letter-spacing to reinforce density and intentionality. Body text (16px–18px, weight 400, 0em tracking) is set at a generous line-height (24px–28px) to ensure readability in long-form content and UI copy. Labels (14px–12px, weight 500) are used for form fields, buttons, and metadata, with increased letter-spacing (0.01em–0.02em) to add visual separation and formality. On small labels over busy backgrounds or interactive states, apply text-shadow: 0 1px 2px rgba(0,0,0,0.1) to maintain legibil

Layout

The layout uses a 12-column grid with a max-width of 1280px (1152px in practice for content), centered on the viewport. The page rhythm is built on a semantic spacing scale: md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Whitespace is generous and intentional—the hero section uses lg spacing above and below to isolate the primary message, while card grids use md spacing for breathing room. The container model is fluid up to max-width, then fixed, ensuring the design remains readable on mobile (single-column stacking) and scales predictably on desktop. Navigation and headers use md padding (24px) with rounded corners (1rem) to create distinct, clickable zones. Form inputs and buttons are sized to 40px he

Elevation & Depth

Depth is conveyed through subtle shadows and border definition rather than dramatic layering. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for primary content areas. Level 2 (Cards & Containers): 1px solid border in outline (#cccccc) plus box-shadow: 0 4px 12px rgba(0,0,0,0.1), creating a crisp, defined edge that separates the card from the background without introducing visual heaviness. Level 3 (Elevated/Hover States): the same border plus box-shadow: 0 16px 40px rgba(0,0,0,0.12), used sparingly on modals, dropdowns, and hover states to signal interactivity. Focus states

Shapes

The shape philosophy is "Technical Softness"—rounded corners are applied strategically to humanize the interface without sacrificing precision. Buttons and primary interactive elements use lg (1rem, 16px) border-radius, creating a friendly, approachable form that still reads as intentional and engineered. Cards and containers use lg (1rem) as well, establishing visual consistency across interactive surfaces. Input fields and secondary UI elements use DEFAULT (0.5rem, 8px) for a more restrained, technical appearance. Badges and pills use full (9999px) for maximum roundness, signaling that these

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses primary color (#2e2e2e) background with white text, lg border-radius (16px), and 12px vertical / 18px horizontal padding, resulting in a 40px height. On hover, the background shifts to primary-container (#3d3d3d) with a 200ms ease transition. button-secondary uses a transparent background with a 1px outline border (#cccccc) and primary text, creating a ghost-style appearance; on hover, the background fills with surface-container-high (#e8e8e8). button-accent uses the secondary color (#f05023) for CTAs that require maximum visual prominence (e.g., "Get Started"); on hover, it darkens to secondary-fixed-dim (#d63f1a). All buttons use label-md typography (14px, weight 500) and apply a subtle focus ring (0 0 0

Do's and Don'ts

**Do**

• Do use primary (#2e2e2e) for all interactive elements, text, and focus states—it's the brand's workhorse color and ensures consistency across the system.
• Do apply lg border-radius (16px) to buttons and primary cards to signal interactivity and approachability; use DEFAULT (8px) on utility elements to maintain hierarchy.
• Do pair Inter weight 550–600 with generous line-height (24px–28px) on body text to ensure readability and reinforce the technical, engineered aesthetic.
• Do use md spacing (24px) as the default gutter and padding; use lg (40px) for major section breaks to create rhythm and visual breathing room.
• Do apply the md shadow (0 4px 12px rgba(0,0,0,0.1)) to cards and elevated surfaces; reserve lg shadow (0 16px 40px rgba(0,0,0,0.12)) for hover and modal states.

**Don't**

• Don't use secondary (#f05023) on non-interactive elements or backgrounds—it's reserved for CTAs and high-priority actions to maintain visual hierarchy.
• Don't apply border-radius smaller than DEFAULT (8px) to interactive elements; it reduces affordance and makes buttons feel less clickable.
• Don't mix font weights beyond 400 and 550–600; additional weights introduce visual noise and dilute the engineered, intentional aesthetic.
• Don't use shadows larger than lg (0 16px 40px rgba(0,0,0,0.12)) on standard cards; reserve maximum elevation for modals and dropdowns to prevent visual chaos.
• Don't set line-height below 24px on body text or below 20px on labels; the system prioritizes readability and accessibility over density.