Rare UI

Overview

Rare UI is a production-grade component library for developers who demand both aesthetic precision and functional depth. The brand embodies "Refined Minimalism with Kinetic Energy"—a design philosophy that pairs austere dark surfaces (rgb(18, 18, 18) background, rgb(245, 245, 247) text) with vibrant accent colors (primary orange #fc4c01, tertiary gold #ffc83d) that command attention without noise. The interface celebrates microinteractions and smooth motion, transforming mundane component interactions into delightful moments. Voice: direct, technical, unapologetically opinionated. Example: "Copy the component, own the code, ship it today."

Colors

The Rare UI palette operates on a high-contrast dark-mode foundation with surgical accent placement. Surface stack anchors at #121212 (surface), descending to #050505 (surface-container-lowest) for recessed elements and ascending to #2d2d2d (surface-container-highest) for elevated surfaces. Text defaults to #f5f5f7 (on-surface), with secondary text at #b3b3b3 (on-surface-variant) for hierarchy. Primary accent is #fc4c01 (vibrant orange), used exclusively on CTAs, focus states, and brand-critical interactions—never on passive elements. Secondary accent #1a73f2 (electric blue) supports status indicators and secondary actions. Tertiary #ffc83d (warm gold) highlights badges, tags, and supporting information. Error states use #ff3b30 (system red). Glass surfaces employ rgba(255, 255, 255, 0.05)

Typography

The type system pairs openRunde (a geometric, confident sans-serif) for display and headline scales with Inter for body and label scales, creating visual separation between brand-forward messaging and utilitarian content. Display (72px, 700 weight, -0.02em tracking) commands hero sections; headline-lg (48px, 700 weight) anchors section titles; body-md (16px, 400 weight) carries primary content. Letter-spacing tightens on display scales (-0.02em to -0.01em) to reinforce boldness, while body text remains neutral (0em) for readability. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (label-sm, 12px) when layered over animated or textured backgrounds to maintain legibility. All interactive text (buttons, links) uses label-md (14px, 600 weight, 0.01em tracking) for precision and

Layout

Rare UI employs a 12-column fluid grid with a 1280px container max-width, centering content on desktop while allowing full-bleed sections for hero and showcase areas. Spacing follows a semantic scale: unit (8px) for micro-adjustments, sm (12px) for compact grouping, md (24px) for standard section gutters, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The hero section spans min-height: min(100svh - 0.75rem, 60rem) on mobile and min(100svh - 1.25rem, 60rem) on desktop, creating breathing room without excessive scroll. Padding uses consistent gutter (24px) for horizontal margins, with rounded corners at 45px (squircle-style) on the hero container to soften the rigid grid. White-space is intentional: components are never crowded; negative space around CTAs

Elevation & Depth

Depth is achieved through a three-tier glass-morphism stack rather than traditional shadows. Level 1 (Base): dark background (#121212) with subtle grain texture and animated gradient overlays. Level 2 (Standard Card): backdrop-filter: blur(8px), background: rgba(255, 255, 255, 0.05), border: 1px solid rgba(255, 255, 255, 0.1), box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08). Level 3 (Elevated/Modal): backdrop-filter: blur(40px), background: rgba(255, 255, 255, 0.08), border: 1px solid rgba(255, 255, 255, 0.15), box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1). Hover states escalate shadows to 0 16px 40px

Shapes

The shape philosophy is "Geometric Softness"—sharp enough to feel modern and technical, rounded enough to feel approachable. Buttons and CTAs use full (9999px) border-radius for pill-shaped affordance, signaling clickability instantly. Cards and containers use xl (1.5rem / 24px) for a balanced, contemporary feel. Input fields and smaller interactive elements use md (0.75rem / 12px) for subtle definition. The hero container breaks the pattern with a 45px squircle-style radius (corner-shape: squircle in CSS) to create a distinctive, branded frame. This hierarchy ensures that the most interactive

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses background: {colors.primary} (#fc4c01), text-color: white, padding: 12px 24px, height: 44px, rounded: full, with transition: all 200ms ease-out. On hover, background shifts to {colors.primary-fixed-dim} (#e64500) and adds box-shadow: 0 8px 24px rgba(252, 76, 1, 0.3). On active, apply transform: scale(0.98) for tactile feedback. button-secondary is transparent with a 1px border at {colors.outline-variant} (#444444), text-color: {colors.on-surface}, and on hover shifts to background: {colors.surface-container-high} (#222222) with border-color: {colors.outline} (#666666). All buttons use label-md typography (14px, 600 weight) for consistency.

Containers & Surfaces Cards are the primary content container:

Do's and Don'ts

**Do**

• Do use primary orange (#fc4c01) exclusively on CTAs and focus states—never on passive text or backgrounds.
• Do apply backdrop-filter: blur(20px) to all glass surfaces to create depth without adding visual weight.
• Do pair openRunde headlines with Inter body text to create clear visual hierarchy between brand messaging and content.
• Do use the full border-radius (9999px) on all buttons to signal interactivity instantly.
• Do maintain at least lg (40px) white-space around primary CTAs to ensure they command attention.
• Do apply 200ms ease-out transitions to all interactive state changes (hover, focus, active) for smooth, predictable motion.

**Don't**

• Don't use primary orange on non-interactive elements or backgrounds—it must remain a signal for action.
• Don't apply shadows deeper than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)) on standard cards; reserve for modals and overlays.
• Don't mix rounded corners arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't use text-color: {colors.on-surface-variant} (#b3b3b3) on interactive elements; reserve it for secondary labels and disabled states.
• Don't apply letter-spacing tighter than -0.02em on body text; it reduces readability in dark mode.
• Don't animate transitions faster than 200ms or slower than 400ms on standard interactions; it breaks the brand's kinetic energy.