Number Panel

Overview

Number Panel is a developer-centric platform for real-time OTP phone number management, SMS verification, and temporary email workflows. The design system embodies **Technical Minimalism with Accent Intensity**—a high-contrast dark aesthetic punctuated by a vibrant orange (#ea5810) that signals actionability and urgency. The interface prioritizes clarity and speed: users scan dense data tables, monitor live OTP codes, and trigger workflows with single clicks. The emotional response is one of control and precision—the dark canvas recedes, allowing the orange accent and white text to command attention without fatigue, even during extended monitoring sessions. The brand serves developers, verification teams, and security-conscious builders who value efficiency over decoration.

Colors

The color system is rooted in **high-contrast dark-mode design** optimized for extended screen time and data-dense interfaces. Primary (#ea5810, a warm orange-red) is the signature accent used exclusively on call-to-action buttons, active states, and critical alerts—it commands 8–12% of the visual field and never appears as background. Surface (#101010, near-black) provides the canvas; surface-container (#151515) and surface-container-high (#1f1f1f) create subtle depth layers without introducing gray fatigue. On-surface (#faf9f7, off-white) is the dominant text color, ensuring 15:1+ contrast against the dark background for WCAG AAA compliance. Secondary (#6c757d, neutral gray) supports disabled states and tertiary information; tertiary (#ff9d5c, lighter orange) highlights supplementary act

Typography

The type system uses Geist (a geometric sans-serif optimized for screens) across all scales, with weight distribution that emphasizes hierarchy through contrast rather than size alone. Display (60px, weight 500) anchors hero sections with restrained elegance; headline-lg (40px, weight 600) and headline-md (28px, weight 600) structure page sections with tight line-height (1.2–1.3) to maintain visual density. Body-lg (18px, weight 400) and body-md (16px, weight 400) carry narrative content with 1.5 line-height for readability over extended reading. Label-md (14px, weight 500) and label-sm (12px, weight 500) label UI controls and metadata. Letter-spacing is minimal (-0.02em to 0.02em) to preserve the geometric precision of Geist. On data-heavy screens (OTP tables, console logs), apply text-sh

Layout

The layout operates on a 12-column grid with a 1280px max-width container, maintaining a 24px gutter between columns. The page rhythm alternates between dense information blocks (OTP tables, API logs) and breathing room (hero section, call-to-action zones). Spacing follows a semantic scale: lg (40px) separates major sections (hero from feature grid), md (24px) separates cards within a section, sm (12px) separates list items and inline elements. The hero uses full-width asymmetry—text on the left (40% width) with a gradient overlay background on the right—to create visual tension that draws the eye toward the primary CTA. Sidebar navigation (Get Number, Console, Mail Generator, API Key, Docs) uses sm (12px) vertical spacing between items. Data tables use md (24px) row height with sm (12px)

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background shifts, avoiding the flat aesthetic while maintaining the dark-mode legibility. Level 1 (Base): surface (#101010) with no shadow—the canvas. Level 2 (Cards & Panels): surface-container (#151515) with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) and a 1px border at outline-variant (#444444)—used for dashboard cards, input fields, and sidebar sections. Level 3 (Modals & Dropdowns): surface-container-highest (#262626) with box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) and a 1px border at outline (#666666)—used for modals, dropdo

Shapes

The shape language is **Functional Precision**—rounded corners are used sparingly and purposefully to signal interaction, not decoration. Buttons and primary CTAs use rounded.md (0.75rem / 12px) to create a subtle softness that feels approachable without sacrificing technical credibility. Cards and containers use rounded.lg (1rem / 16px) to establish a clear boundary between content zones. Input fields and small UI elements use rounded.DEFAULT (0.5rem / 8px) for a tighter, more utilitarian feel. Badges and pills use rounded.full (9999px) to signal completeness and status. The rationale: sharp

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses backgroundColor: {colors.primary} (#ea5810), textColor: {colors.on-primary} (#faf9f7), padding: 8px 16px, height: 40px, rounded: {rounded.md} (12px), and a 200ms ease transition. On hover, the background shifts to {colors.primary-container} (#d94a0a) with a 0 4px 12px rgba(234, 88, 12, 0.3) shadow to signal elevation. On active, the button scales to 0.98 (transform: scale(0.98)) for tactile feedback. **button-secondary** uses a transparent background with a 1px border at {colors.outline-variant} (#444444), textColor: {colors.on-surface-variant} (#cccccc), and the same padding and height. On hover, the background becomes {colors.surface-container-high} (#1f1f1f) and the border shifts to {colors.outline}

Do's and Don'ts

**Do**

• Do use primary (#ea5810) exclusively on CTAs, active states, and critical alerts—never as a background or decorative element.
• Do maintain 15:1+ contrast between on-surface (#faf9f7) and surface (#101010) for all body text to ensure WCAG AAA compliance and reduce eye strain.
• Do apply the surface-container stack (low → standard → high → highest) to encode information hierarchy: cards use standard, hover states use high, modals use highest.
• Do use Geist with tight letter-spacing (-0.02em to 0.02em) on headings to reinforce geometric precision and technical authority.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to signal interactivity without introducing motion sickness.
• Do use rounded.md (12px) on buttons and rounded.lg (16px) on cards to balance approachability with technical credibility.

**Don't**

• Don't use primary (#ea5810) as a background color or fill for large surface areas—it will cause visual fatigue and reduce contrast.
• Don't apply shadows deeper than 0 16px 40px rgba(0, 0, 0, 0.5) or use blur effects >20px, as they will obscure content in the dark theme.
• Don't mix typefaces or use system-ui, sans-serif, or inherit fallbacks—always specify Geist with explicit fallbacks (Geist Fallback, ui-sans-serif, system-ui, sans-serif).
• Don't use rounded corners >1.5rem (24px) on any component; excessive rounding undermines the precision-focused brand and reads as playful rather than technical.
• Don't reduce letter-spacing below -0.04em on any text, as it will cause letterforms to overlap and reduce legibility on screens.
• Don't apply opacity <0.5 to disabled states—use a dedicated disabled color (secondary, #6c757d) with full opacity instead to maintain contrast.