Untitled UI

Overview

Untitled UI is a production-grade Figma UI kit and React component library built for teams that demand both speed and consistency. It serves product designers, developers, and cross-functional teams building SaaS, fintech, and enterprise applications. The aesthetic is rooted in "Minimalist Professionalism"—a design philosophy that prioritizes clarity, accessibility, and developer ergonomics over decorative flourish. The interface uses a clean white canvas (rgb(255, 255, 255)) paired with a distinctive purple accent system (primary #7f56d9, secondary #6941c6) that signals interactivity and brand presence without overwhelming the content hierarchy. The emotional response is one of confidence and efficiency: users feel they are working with a mature, well-considered tool.

The brand voice is direct, pragmatic, and human-centered. Untitled UI speaks to builders—people who value their time and expect tools to work intuitively. The vocabulary avoids marketing hyperbole; instead, it uses concrete language: "Kickstart any project with everything you need to design and develop—fast." Tone is conversational but authoritative, never patronizing. The system is designed to disappear into the background, letting the user's work take center stage. Example sentence in brand voice: "Copy a component, customize the props, ship it—no friction, no surprises."

Colors

The Untitled UI color system is built on a neutral-dominant foundation with a vibrant purple accent layer. The surface stack anchors the interface: surface (#ffffff) is the primary canvas, surface-container-low (#f5f5f5) provides subtle depth for secondary surfaces, and surface-container-highest (#d4d4d4) creates visual separation for tertiary elements. On-surface (#171717) is the primary text color, ensuring WCAG AAA contrast (21:1 ratio) on white backgrounds. On-surface-variant (#525252) is used for secondary text and disabled states, maintaining 7:1 contrast.

Primary (#7f56d9) is the signature accent—applied to call-to-action buttons ("Buy now"), active navigation states, focus rings, and brand-critical interactive elements. It is never used for body text or large surface areas. Primar

Typography

The Untitled UI type system uses Inter exclusively, a geometric sans-serif optimized for screen legibility and code-like precision. The hierarchy spans eight levels: display (60px, 700 weight, -0.04em tracking) for hero headlines; headline-lg (40px, 600 weight, -0.02em tracking) for major section titles; headline-md (28px, 600 weight, -0.01em tracking) for subsections; title-lg (20px, 600 weight) for card titles and component labels; body-lg (18px, 400 weight, 28px line-height) for introductory paragraphs; body-md (16px, 400 weight, 24px line-height) for standard body copy; label-md (14px, 600 weight, 20px line-height, 0.01em tracking) for buttons and form labels; and label-sm (12px, 500 weight, 16px line-height, 0.02em tracking) for captions and metadata. The type pairing communicates hie

Layout

The page layout uses a 12-column grid with a max-width of 1280px (container-max), centered on the viewport with symmetric gutters of 24px (gutter token). The spacing scale is semantic: lg (40px) separates major sections (hero from features, features from testimonials); md (24px) is used for card padding and component internal spacing; sm (12px) for list items and compact groupings; xs (4px) for micro-interactions like icon-to-text spacing. The hero section uses a two-column layout on desktop (image on right, content on left) with 64px (xl spacing) between the columns, collapsing to single-column on mobile. Cards are arranged in a 3-column grid on desktop, 2-column on tablet, 1-column on mobile, each with 24px gaps. White-space philosophy: generous margins around text blocks (28px line-heig

Elevation & Depth

Depth in Untitled UI is achieved through subtle shadow and border layering, not color darkening. The elevation system uses three levels: Level 1 (Base, no shadow) for the white canvas and primary surfaces; Level 2 (Standard card, elevation.sm: 0 1px 2px rgba(0, 0, 0, 0.06)) for cards, dropdowns, and secondary containers—this creates a barely perceptible lift; Level 3 (Elevated modal/banner, elevation.lg: 0 16px 32px rgba(16, 24, 40, 0.08)) for modals, sticky headers, and top-layer components. The shadow uses a neutral dark (rgba(16, 24, 40, ...)) rather than pure black to maintain warmth. Bord

Shapes

The Untitled UI shape philosophy is "Geometric Approachability"—rounded corners that feel modern and friendly without sacrificing professional credibility. The rounded scale uses six stops: sm (0.25rem / 4px) for small badges and tight components; DEFAULT (0.5rem / 8px) for input fields and compact buttons; md (0.75rem / 12px) for standard buttons and form elements; lg (1rem / 16px) for cards and larger containers; xl (1.5rem / 24px) for modals and hero sections; full (9999px) for pills and fully rounded badges. Buttons use md (8px) to balance visual weight with clickability—large enough to fe

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#7f56d9) background with {colors.on-primary} (white) text, rounded {rounded.md} (8px), padding 10px 16px, and height 40px. The label-md typography (14px, 600 weight) ensures legibility at all sizes. On hover, shift to button-primary-hover (#6941c6, a darker purple) with a transition: background-color 150ms ease-out. On active/pressed, use button-primary-active (#53389e) to signal state change. Button-secondary is transparent with a 1px border at {colors.outline} (#a3a3a3), text in {colors.primary}, and the same padding/height as primary. On hover, apply button-secondary-hover (background: {colors.surface-container-low}, a light gray) to indicate interactivity. Button-ghost has no border o

Do's and Don'ts

**Do**

• Do use primary (#7f56d9) exclusively for call-to-action buttons and interactive focus states—never for body text or large surface areas.
• Do maintain 24px (md spacing) as the default padding inside cards and containers; use sm (12px) only for compact, dense layouts.
• Do apply the 3px purple focus ring (rgba(127, 86, 217, 0.1)) to all interactive elements for keyboard navigation accessibility.
• Do use Inter 600 weight for all headings and labels; reserve 400 weight for body copy and secondary text.
• Do keep shadows soft and diffuse (max 32px blur radius); avoid harsh, high-contrast shadows that break the minimalist aesthetic.
• Do use the full rounded scale (sm through xl) to create visual hierarchy—smaller radii for interactive elements, larger for containers.

**Don't**

• Don't use primary or secondary colors for body text or large background areas; reserve them for interactive elements and accents.
• Don't mix border-radius values within a single component family (e.g., don't use sm corners on a button with lg corners on its hover state).
• Don't apply shadows larger than elevation.lg (0 16px 32px rgba(16, 24, 40, 0.08)) or use pure black shadows; maintain the soft, diffuse aesthetic.
• Don't use font weights other than 400, 500, 600, or 700; avoid thin (300) or extra-bold (800+) weights that break the type hierarchy.
• Don't apply color overlays or gradients to the white surface; keep the canvas clean and let content breathe.
• Don't use more than two accent colors (primary and secondary) in a single view; tertiary and error are reserved for specific states.