HeyZinc

Overview

HeyZinc is an AI voice agent and customer support automation platform designed for founder-led early-stage startups that cannot afford to miss high-intent conversations. The design system embodies "Founder-Focused Minimalism"—a philosophy that strips away decorative elements to expose pure functionality and clarity. The aesthetic is deliberately austere: near-black text on near-white surfaces, high contrast ratios (WCAG AAA compliant), and a single accent color (deep purple #3525e6) reserved exclusively for interactive elements and secondary CTAs. The emotional response is one of trustworthiness and efficiency: users feel they are interacting with a tool built by engineers for engineers, not a design-first product. The brand voice is direct, precise, and founder-friendly—never breathless or hyperbolic. Example: "AI handles first-pass conversations, then alerts your team when the lead is qualified." The typography pairs DM Serif Display (headlines, high-impact moments) with DM Sans (body, UI labels), creating a visual hierarchy that feels editorial yet technical.

Colors

The color system is built on a high-contrast, monochromatic foundation with two strategic accent colors. Primary (#000000) is the dominant text and button color, used for all CTAs, navigation, and interactive elements—it is the color users click. On-surface (#0b0b0b) is reserved for body text and secondary information, maintaining readability at 16px with a line-height of 24px. The surface stack (surface #fefeff, surface-container #ececf0, surface-container-highest #e0e0e6) creates subtle depth through grayscale progression, enabling visual separation without color distraction. Secondary (#3525e6, a deep purple) is used sparingly for secondary CTAs, badges, and accent highlights—it appears on approximately 8–12% of interactive surfaces. Tertiary (#d81fe0, a vibrant magenta) is reserved for

Typography

The type system uses two complementary families: DM Serif Display for headlines (display, headline-lg, headline-md) and DM Sans for body and UI labels. DM Serif Display is a high-contrast serif with generous letterforms, used at 40px–60px for headlines to create visual impact and editorial authority. DM Sans is a geometric sans-serif optimized for screen legibility, used at 14px–18px for body text and labels. The hierarchy is enforced through weight (400 for body, 500–600 for labels and titles, 700 for emphasis) and size, not color. Body text is set at 16px with a 24px line-height (1.5), providing comfortable reading at arm's length. Labels are 14px with 20px line-height and 0.01em letter-spacing for clarity in dense UI. On small labels over busy backgrounds (e.g., badge text), apply text-

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport with 24px gutters on desktop and 12px on mobile. The spacing scale is semantic: unit (8px) is the baseline, sm (12px) for compact spacing, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Pricing cards are arranged in a 3-column grid on desktop, collapsing to 1 column on mobile (< 640px). The 'Popular' card (Growth tier) is elevated with a 2px border and a subtle shadow (0 4px 12px rgba(0, 0, 0, 0.1)) to draw focus. White-space is generous: sections are separated by lg spacing (40px), and internal card padding is md (24px). Container max-width is enforced at 1280px to prevent line-length from exceeding 80 characters on headlines, maintain

Elevation & Depth

Depth is conveyed through subtle shadows and border definition, not through layering or glassmorphism. Level 1 (Base): flat surfaces with no shadow, used for the page background and card interiors. Level 2 (Elevated): 0 4px 12px rgba(0, 0, 0, 0.1), applied to cards, modals, and hover states to lift elements 4px above the base. Level 3 (Modal/Overlay): 0 16px 40px rgba(0, 0, 0, 0.12), used for full-screen modals and dropdowns to create maximum separation. All surfaces have a 1px solid border at {colors.outline} (#cccccc) to define edges crisply. On hover, cards transition from Level 1 to Level

Shapes

The shape philosophy is "Architectural Precision"—rounded corners are used functionally to soften hard edges and improve touch targets, not for aesthetic softness. Buttons use rounded.DEFAULT (8px) for a modern, approachable feel while maintaining a professional appearance. Cards use rounded.xl (24px) for the pricing card set, creating visual distinction and a premium feel. Input fields use rounded.DEFAULT (8px) to match buttons and maintain consistency. The 'Popular' badge on the Growth pricing card uses rounded.full (9999px) for a pill shape, signaling its special status. Modals and dropdown

Components

Action Elements Buttons are the primary interaction mechanism. The primary button uses backgroundColor: {colors.primary} (#000000), textColor: {colors.on-primary} (#ffffff), padding: 12px 16px, height: 40px, and rounded: {rounded.DEFAULT} (8px). On hover, the background transitions to {colors.primary-container} (#1a1a1a) over 200ms (ease). The secondary button uses a transparent background with a 1px border at {colors.outline} (#cccccc), maintaining the same padding and height. On hover, the background becomes {colors.surface-container-high} (#e6e6eb). The 'Start Free Trial' button on the Growth card uses the primary style with a black background, while the Starter card uses the secondary style with a border. All buttons have a minimum touch target of 44px (height 40px + 4px padding).

Do's and Don'ts

**Do**

• Do use high-contrast text (7:1 minimum) on all surfaces to ensure accessibility and readability at 16px body size.
• Do reserve the primary color (#000000) exclusively for CTAs, navigation, and interactive elements—never use it for decorative backgrounds.
• Do apply the secondary accent color (#3525e6) sparingly on secondary CTAs and badges to maintain visual hierarchy and focus.
• Do use DM Serif Display for headlines (40px+) and DM Sans for body text (14px–18px) to maintain the editorial-technical aesthetic.
• Do maintain 24px gutters on desktop and 12px on mobile to ensure consistent spacing and readability.
• Do use 8px border-radius for buttons and inputs, 16px for modals, and 24px for premium cards to create visual hierarchy.
• Do apply shadows (0 4px 12px rgba(0, 0, 0, 0.1)) only on hover and elevated states, not on base surfaces.
• Do use 1px borders at #cccccc to define card and input edges crisply without visual clutter.

**Don't**

• Don't use color alone to convey information—always pair color with text labels, icons, or patterns for accessibility.
• Don't apply rounded corners larger than 24px on cards or containers; use 9999px only for badges and accent elements.
• Don't center-align body text blocks; use left alignment with a max-width of 600px for readability.
• Don't use gradients, blurs, or glassmorphism effects; the design relies on flat color blocks and 1px borders for clarity.
• Don't apply shadows to base surfaces or backgrounds; reserve shadows for hover states and elevated elements only.
• Don't mix serif and sans-serif fonts within a single text block; use DM Serif Display for headlines and DM Sans for body consistently.
• Don't use opacity or transparency to create visual hierarchy; use color contrast and weight instead.
• Don't apply letter-spacing larger than 0.05em on body text; use negative letter-spacing (-0.02em) only on large headlines (40px+).