Miter

Overview

Miter is a construction operations platform designed for modern contractors who demand precision, clarity, and unified visibility across payroll, HR, expenses, and field operations. The design system embodies **Operational Minimalism**—a philosophy that strips away decorative complexity while preserving functional depth. The aesthetic is intentionally austere: a near-white canvas (#ffffff, #f7f5f2) paired with a sophisticated burgundy-mauve accent (#7c3f5c) that signals confidence and authority without aggression. The UI evokes the feeling of a well-organized job site: every element has a purpose, every interaction is predictable, and every data point is accessible at a glance.

The brand voice is direct, measured, and grounded in operational reality. Miter speaks to contractors as peers—no hype, no jargon, no false promises. The vocabulary is concrete: "build," "manage," "track," "connect." Tone examples: "Welcome back to Miter. Your team is ready." "Track every dollar from project start to close." The personality is competent and reassuring, never patronizing. The UI should feel like a trusted tool that gets out of the way and lets work happen.

Colors

The Miter color system is built on a principle of **restraint with strategic accent**. The surface stack is anchored in warm, off-white tones (#ffffff primary, #f7f5f2 as the secondary container, #e8e5e0 for elevated surfaces) that reduce eye strain during long work sessions and convey cleanliness and order. The primary accent is a muted burgundy-mauve (#7c3f5c), used exclusively on call-to-action buttons, active states, and key interactive elements—it appears infrequently but commands attention when it does. Secondary accent is a cool cyan-blue (#33aaff) reserved for status indicators, secondary CTAs, and data visualization highlights. The neutral palette (#7c7c7c for secondary text, #999999 for borders, #d8d8d8 for dividers) provides visual hierarchy without competing for focus. Error st

Typography

The type system pairs two distinct typefaces to create visual rhythm and hierarchy. **DenimWD** (a custom serif with geometric precision) is reserved for display and headline scales (62px, 48px, 36px), where its distinctive letterforms command attention and establish brand personality. **Inter** (a neutral sans-serif) handles all body, label, and UI text (18px down to 12px), ensuring legibility and accessibility across screen sizes. The weight distribution is deliberate: headlines use 400 (regular weight) to avoid heaviness, while body text remains at 400 for consistency, and labels use 600 (semibold) to create visual separation in dense interfaces. Letter-spacing is tightened on display text (-0.02em) to enhance sophistication, while body text uses 0em for maximum readability. Line-height

Layout

Miter uses a **12-column fluid grid** with a max-width of 1280px, allowing content to breathe on desktop while remaining compact on mobile. The spacing scale is semantic: {spacing.gutter} (24px) is the standard horizontal padding for page sections, {spacing.lg} (40px) separates major content blocks, and {spacing.md} (24px) is used for card padding and component internal spacing. Vertical rhythm follows a 8px unit grid, with section breaks typically using 64px (xl) or 40px (lg) of margin-top/bottom. The container strategy is conservative: hero sections use full-width backgrounds with centered content at max-width, while product sections and forms constrain to 1280px to maintain focus. White-space is treated as a design material, not wasted space—generous margins around key CTAs ("Get demo"

Elevation & Depth

Depth in Miter is achieved through a restrained shadow system that respects the minimalist aesthetic. The elevation stack has three levels: **Level 1 (Base)** uses no shadow—flat surfaces on the white background; **Level 2 (Standard Cards)** applies box-shadow: 0 3px 8px rgba(0,0,0,0.15), a soft, close shadow that lifts elements 4-8px; **Level 3 (Modals/Popovers)** uses box-shadow: 0 5px 15px rgba(0,0,0,0.12), a larger spread shadow suggesting 12-16px elevation. Hover states on cards transition from Level 1 to Level 2 over 200ms (transition: box-shadow 200ms ease-in-out), creating tactile feed

Shapes

The shape philosophy is **Geometric Clarity**—rounded corners are used sparingly and consistently to signal interactivity without softening the brand's precision. Buttons and form inputs use {rounded.DEFAULT} (0.5rem / 8px), a subtle radius that feels modern without being playful. Cards and containers use {rounded.lg} (1rem / 16px), providing slightly more breathing room for larger surfaces. Modals and popovers use {rounded.xl} (1.5rem / 24px) to distinguish them as elevated, temporary surfaces. Badges and small UI elements use {rounded.full} (9999px) for a pill shape that reads as a contained

Components

Action Elements Buttons are the primary interaction pattern and must be immediately recognizable. **button-primary** uses {colors.primary} (#7c3f5c) background with white text, 12px vertical / 24px horizontal padding, 48px height, and {rounded.DEFAULT} (8px). On hover, the background darkens to #6b3650 (a 10% lightness reduction) over 200ms, signaling interactivity without animation. On active/pressed, it darkens further to #5c2f47. The label uses {typography.label-md} (14px, 600 weight, 0.01em letter-spacing) for prominence. **button-secondary** mirrors the primary structure but uses a transparent background with a 1px border at {colors.outline} (#999999) and {colors.primary} text; on hover, the background fills with {colors.surface-container-high} (#e8e5e0). Disabled buttons reduce o

Do's and Don'ts

**Do**

• Do use {colors.primary} (#7c3f5c) exclusively for primary CTAs, active states, and focus indicators—it is the only accent that should appear frequently.
• Do maintain 24px minimum horizontal padding and 40px vertical spacing between major sections to preserve the minimalist rhythm.
• Do apply {elevation.md} (0 3px 8px rgba(0,0,0,0.15)) to cards on hover to create tactile feedback without animation.
• Do use DenimWD for headlines (36px+) and Inter for body text (18px and below) to maintain the two-typeface hierarchy.
• Do include a 2px focus ring (outline: 2px solid {colors.primary}, outline-offset: 2px) on all interactive elements for keyboard accessibility.
• Do use {rounded.DEFAULT} (8px) on buttons and inputs, {rounded.lg} (16px) on cards, and {rounded.full} on badges to signal component type.

**Don't**

• Don't use {colors.secondary} (#33aaff) or {colors.tertiary} (#6c757d) as primary button colors—they are reserved for secondary actions and status indicators.
• Don't apply shadows to buttons or form inputs; use color and border changes for state indication instead.
• Don't use sharp corners (0px border-radius) except in data tables—they conflict with the modern, approachable aesthetic.
• Don't exceed 1280px container width on desktop; wider layouts dilute focus and violate the operational minimalism principle.
• Don't use animated transitions longer than 200ms on hover states—they should feel responsive, not sluggish.
• Don't mix DenimWD and Inter in the same line; use DenimWD for headlines only and Inter for all supporting text.