Zernio

Overview

Zernio is a unified social media and messaging API platform designed for developers and AI agents who need to orchestrate multi-channel communication at scale. The brand embodies a "Developer-First Pragmatism" aesthetic—combining technical precision with accessible, warm visual language. The interface prioritizes clarity and efficiency: a warm, neutral canvas (rgb(240, 239, 235)) provides breathing room, while a vibrant coral-red primary accent (rgb(235, 53, 20)) signals actionable moments and brand energy. The emotional response is one of confidence and capability: users feel they are working with a mature, reliable infrastructure that doesn't sacrifice personality for professionalism.

Zernio's voice is direct, technical but conversational, and optimistic about automation. The brand speaks to developers as peers—no marketing fluff, no false promises. Vocabulary patterns include action-oriented language ("connect," "publish," "engage"), platform names ("WhatsApp," "Instagram," "TikTok"), and developer-friendly terms ("API," "REST call," "MCP server"). Example sentence in brand voice: "One API call reaches 16 platforms—your infrastructure just got simpler."

Colors

The Zernio color system balances warmth and professionalism through a carefully curated palette anchored by a signature coral-red primary. Primary (rgb(235, 53, 20) / #eb3514) is deployed on all call-to-action buttons, interactive links, and focus states—it is the brand's signature accent and appears most prominently in the hero "Start for Free" button and secondary CTAs. The surface stack uses warm, off-white neutrals (surface: rgb(240, 239, 235), surface-container: rgb(234, 217, 209)) that evoke approachability without coldness; these tones are used for cards, containers, and background layers. Supporting colors include a vibrant green secondary (rgb(15, 169, 104)) for success states and positive feedback, and a professional blue tertiary (rgb(26, 115, 232)) for informational elements an

Typography

The typography system uses GeistSans as the primary typeface, a modern geometric sans-serif that conveys technical sophistication while remaining highly legible at all sizes. The hierarchy is built on a 60px display level (fontWeight: 600, lineHeight: 68px, letterSpacing: -0.04em) for hero headlines, stepping down through headline-lg (40px, 600 weight) for section titles, headline-md (28px, 600 weight) for subsections, and body-md (16px, 400 weight) for running text. The negative letter-spacing on display and headline levels (-0.04em to -0.02em) creates visual tightness that reinforces the brand's precision and confidence. Body text uses 400 weight at 16px with 24px line-height, providing ample breathing room for readability. Labels and UI text use 14px at 500 weight (label-md) with 0.01em

Layout

The page layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. The design uses a fluid, single-column rhythm for mobile and tablet, expanding to multi-column layouts on desktop. White-space is generous and intentional: the hero section uses lg spacing (40px) for vertical separation between the headline, subheading, and CTA group, creating a clear visual hierarchy and reducing cognitive load. Section separations use xl spacing (64px) to establish distinct content zones. The gutter (24px) is applied consistently to left and right margins on all container elements, ensuring content never touches the viewport edge. The warm background color (rgb(240, 239, 235)) extends edge-to-edge, creating a cohesive canvas that feels intentional rather than accidental. Cards

Elevation & Depth

Depth in Zernio is conveyed through subtle shadows and layering rather than dramatic depth effects. The elevation system uses three primary levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on interactive elements like hover states on list items, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated surfaces. The shadow blur and spread increase proportionally with elevation, creating a natural light-source effect. Cards use md elevation by default and transition to lg on hover with a 200ms ease-out timing

Shapes

The shape language follows a "Soft-Technical" philosophy: rounded corners are used strategically to soften the precision of a developer-focused interface without sacrificing clarity. Buttons use lg radius (1rem / 16px) for primary CTAs, creating a friendly, approachable feel that invites interaction. Secondary buttons and smaller UI elements use md radius (0.75rem / 12px) to maintain visual consistency while reducing visual weight. Cards and containers use xl radius (1.5rem / 24px) to create a sense of enclosure and separation from the background. Input fields use DEFAULT radius (0.5rem / 8px)

Components

Action Elements Primary buttons use backgroundColor: rgb(235, 53, 20), textColor: rgb(255, 255, 255), padding: 12px 24px, height: 48px, rounded: 1rem, and fontWeight: 500. On hover, the background transitions to rgb(194, 65, 12) with a 200ms ease-out timing function. Active state uses rgb(160, 51, 9). Secondary buttons use backgroundColor: rgb(234, 217, 209), textColor: rgb(235, 53, 20), padding: 6px 12px, height: 32px, rounded: 0.75rem, and a 1px transparent border that becomes visible on hover. Ghost buttons are transparent with textColor: rgb(235, 53, 20) and a hover background of rgba(235, 53, 20, 0.08). All buttons apply a 200ms transition on all properties to create smooth, responsive feedback.

Containers & Surfaces Cards use backgroundColor: rgb(250, 250, 248), rounded: 1.5

Do's and Don'ts

**Do**

• Do use the primary coral-red (rgb(235, 53, 20)) exclusively for CTAs, focus states, and brand-critical interactive moments—never dilute it with secondary uses.
• Do apply the warm surface palette (rgb(240, 239, 235) and rgb(234, 217, 209)) consistently across all backgrounds to create a cohesive, approachable canvas.
• Do use 200ms ease-out transitions on all interactive state changes (hover, focus, active) to create smooth, responsive feedback without feeling sluggish.
• Do maintain the lg spacing (40px) between major content sections and md spacing (24px) within cards to create clear visual hierarchy and breathing room.
• Do apply the full rounded radius (9999px) to badges and small accent elements to create visual contrast with the more angular card and button shapes.

**Don't**

• Don't use the primary accent (rgb(235, 53, 20)) for non-interactive elements like body text, backgrounds, or decorative elements—reserve it for moments that demand user action.
• Don't apply shadows heavier than lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) as this creates visual noise and contradicts the clean, professional aesthetic.
• Don't mix rounded radii inconsistently—buttons should always use lg (1rem), cards xl (1.5rem), and inputs DEFAULT (0.5rem) to maintain visual coherence.
• Don't reduce padding or spacing below the sm unit (12px) in cards or containers, as this creates visual cramping and reduces the approachable, breathing quality of the design.
• Don't use transitions longer than 200ms on interactive elements, as this creates perceived sluggishness and reduces the sense of responsive, technical precision the brand conveys.