VoiceAct Solutions

Overview

VoiceAct Solutions is a full-stack digital product studio serving businesses, startups, and emerging ventures with web development, mobile applications, UI/UX design, and custom software solutions. The design system embodies a "High-Contrast Minimalism" aesthetic—a deliberate rejection of soft, rounded interfaces in favor of sharp geometric clarity and maximum contrast. The brand personality is confident, technical, and results-driven: the UI communicates precision through pure blacks (rgb(0, 0, 0)), near-white text (rgb(237, 237, 237)), and a signature vibrant orange accent (rgb(255, 85, 0)) that commands attention on every CTA. The emotional response is one of forward momentum and technical mastery—users feel they are working with engineers, not decorators.

The voice is direct, action-oriented, and free of corporate jargon. Sentences are short and declarative: "Ship products, measured in outcomes." "A tight loop from idea to App Store." The vocabulary favors concrete verbs (design, architect, ship, build) over abstract nouns. Brand personality traits: ambitious, no-nonsense, modern, and unapologetically technical. Example sentence in brand voice: "We partner with you to architect and ship—from concept to production, measured in real outcomes."

Colors

The color system is built on extreme contrast and strategic accent deployment. The surface stack anchors the entire palette: pure black (rgb(0, 0, 0)) as the base, with carefully calibrated container layers (surface-container-low: rgb(15, 15, 15), surface-container: rgb(31, 31, 31), surface-container-high: rgb(42, 42, 42)) providing subtle depth without breaking the dark minimalist aesthetic. On-surface text is set to rgb(237, 237, 237)—a near-white that maintains readability while avoiding the harshness of pure white (rgb(255, 255, 255)). Primary color is rgb(255, 85, 0), a vibrant orange-red used exclusively for CTAs, active states, and brand-critical interactive elements; this color appears on "Book a call", "Start a Project", and all primary buttons. Secondary accent rgb(97, 218, 251)

Typography

The type system pairs Space Grotesk (geometric sans-serif, weights 400–700) for headlines and display text with Inter (humanist sans-serif, weights 400–600) for body copy and UI labels. This pairing communicates technical precision (Space Grotesk's rigid geometry) balanced with approachability (Inter's warm proportions). Display (72px, 600 weight, -0.02em tracking) is reserved for hero headlines and major section breaks; headline-lg (48px, 600 weight) for subsection titles; headline-md (32px, 600 weight) for card titles and prominent UI text. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and long-form content; body-md (16px, 400 weight, 24px line-height) for standard body text and descriptions. Label-md (14px, 500 weight, 20px line-height, 0.01em tracking) is applied t

Layout

The layout system uses a 12-column fluid grid with a fixed max-width of 1280px, centered with auto margins on desktop. Mobile breakpoints collapse to single-column with full-width padding of 16px (md spacing). The page rhythm is driven by lg spacing (40px) for section separation, md spacing (24px) for component padding and card gutters, and sm spacing (12px) for internal element spacing. The hero section occupies the full viewport height with a radial gradient background (dark blue to black, subtle grain texture) and centered content. Cards and containers use consistent padding of 24px (md spacing) with 1px borders at rgba(74, 74, 74, 1) (outline-variant). White-space is aggressive: sections are separated by 60–80px vertical rhythm, and internal card spacing follows the 8px unit grid stric

Elevation & Depth

Depth is conveyed through subtle layering and shadow application rather than dramatic drop shadows. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for subtle UI elements like badges and small buttons; md (0 4px 12px rgba(0, 0, 0, 0.15)) for cards and modals; lg (0 16px 40px rgba(0, 0, 0, 0.2)) for floating elements and high-priority overlays. Cards use a 1px solid border at rgba(74, 74, 74, 1) combined with a semi-transparent background (rgba(0, 0, 0, 0.4)) to create visual separation without relying on shadows. On hover, cards transition to rgba(0, 0, 0, 0.5) backg

Shapes

The shape philosophy is "Technical Precision with Selective Softness"—sharp corners dominate the system, with rounded corners reserved for specific interaction contexts. Buttons use full radius (9999px) to signal primary CTAs and create a pill-shaped affordance that feels modern and clickable; secondary buttons use lg radius (1rem / 16px) for a slightly more formal appearance. Cards and containers use lg radius (1rem) for a balanced, modern look that softens the harsh geometry without sacrificing precision. Input fields use full radius (9999px) to match button affordances and create a cohesive

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use rgb(255, 85, 0) background, white text, 12px vertical padding, 24px horizontal padding, full radius (9999px), and label-md typography (14px, 500 weight). On hover, the background transitions to rgb(230, 68, 0) (primary-fixed-dim) over 150ms with no shadow. Active state uses rgb(230, 68, 0) with a 2px inset shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). Secondary buttons (button-secondary) use transparent background, on-surface text (rgb(237, 237, 237)), a 1px border at outline-variant (rgb(74, 74, 74)), and lg radius (1rem). On hover, background transitions to rgba(255, 255, 255, 0.08) over 150ms. Ghost buttons (button-ghost) use transparent background, on-surface text, no border, and respond

Do's and Don'ts

**Do**

• Do use rgb(255, 85, 0) exclusively for primary CTAs and high-priority interactive elements—never dilute the accent by overusing it.
• Do maintain pure black (rgb(0, 0, 0)) as the dominant surface color; use surface-container layers only for subtle depth, never for primary backgrounds.
• Do apply Space Grotesk to all headlines and display text; reserve Inter for body copy and UI labels to maintain the technical-yet-approachable voice.
• Do use full radius (9999px) for buttons and inputs to signal interactivity; use lg radius (1rem) for cards and containers for a balanced, modern aesthetic.
• Do apply md elevation shadow (0 4px 12px rgba(0, 0, 0, 0.15)) on card hover states; never use harsh, large shadows that break the minimalist aesthetic.
• Do use outline-variant (rgb(74, 74, 74)) for all borders and dividers; this maintains visual hierarchy without introducing competing colors.
• Do pair primary buttons with secondary buttons (transparent, bordered) to create clear visual hierarchy in multi-action scenarios.
• Do use label-md (14px, 500 weight) for all button text and form labels; maintain consistent typography across interactive elements.

**Don't**

• Don't use rounded corners on section backgrounds or large containers—reserve rounding for interactive elements (buttons, inputs, cards) to maintain visual clarity.
• Don't introduce new accent colors beyond primary (rgb(255, 85, 0)), secondary (rgb(97, 218, 251)), and tertiary (rgb(236, 28, 123))—this dilutes brand recognition.
• Don't apply shadows to primary buttons; let the vibrant orange color carry the visual weight and affordance.
• Don't use pure white (rgb(255, 255, 255)) for body text—always use on-surface (rgb(237, 237, 237)) to reduce eye strain on dark backgrounds.
• Don't mix Space Grotesk and Inter within a single headline or title; maintain clear separation between display/headline (Space Grotesk) and body/label (Inter).
• Don't apply letter-spacing greater than 0.02em on body text; this breaks readability and contradicts the technical, no-nonsense voice.
• Don't use surface-container-highest (rgb(51, 51, 51)) for primary content areas—reserve it for subtle UI elements like disabled states or secondary backgrounds.
• Don't apply multiple shadows or layered elevation effects; the system uses single, precise shadows to maintain minimalist clarity.