Zeptaz

Overview

Zeptaz is a technical-minimalist workflow automation platform designed for service businesses that demand precision, control, and reliability. The brand aesthetic merges high-contrast monochrome (near-black #0e0e0e on near-white #f3f3f1) with a vivid crimson accent (#e1112f), evoking the visual language of terminal interfaces, system dashboards, and operational control rooms. This creates an atmosphere of technical competence and trustworthiness—users feel they are interacting with a system that is serious, deliberate, and engineered for mission-critical work. The design philosophy rejects softness: no rounded corners, no gradients, no decorative blur. Every pixel serves a function.

The brand voice is direct, operational, and precise. Zeptaz speaks like a systems engineer: clear, jargon-aware, confident without being breathless. The vocabulary emphasizes workflow, systems, modules, and controlled automation—never "magic" or "effortless." Example sentence in brand voice: "Recruitment workflows run on five modules: intake, routing, drafting, approval, and follow-up. Each step is human-controlled; AI assists where it adds value." The tone is calm, authoritative, and assumes the user understands the complexity of their operations.

Colors

The Zeptaz color system is built on a principle of extreme contrast and functional clarity. The primary surface is a warm off-white (#f3f3f1), chosen to reduce eye strain during long operational sessions while maintaining crisp legibility. The primary accent is a vivid, saturated crimson (#e1112f), used exclusively for call-to-action buttons, active states, and critical alerts. This color appears infrequently but commands attention—it is the color users click, the color that signals action. The near-black text color (#0e0e0e) is applied to all body copy and interface labels, ensuring 18:1+ contrast ratios for accessibility and readability at small sizes (12px mono labels). Secondary colors are introduced sparingly: a success green (#2bd576) for resolved states and positive feedback, and a

Typography

The type system pairs two distinct voices: Funnel Display (a geometric, light-weight display face) for headlines and hero text, and Inter (a humanist sans-serif) for body and interface copy. Funnel Display is used at large sizes (40px–110px) with a light weight (300–400) and tight negative letter-spacing (-0.03em to -0.01em), creating a sense of precision and forward momentum. Inter is used for all body text (16px–18px) at regular weight (400) with 1.5x line-height for comfortable reading. Monospace labels (JetBrains Mono, 11px–12px, weight 400–500) are reserved for interactive elements (buttons, badges, form labels) and system-generated text (logs, timestamps), reinforcing the technical, operational character of the interface. The label-md style (12px, 500 weight, 0.08em letter-spacing) i

Layout

The page layout uses a 12-column grid with a maximum container width of 1240px, centered with symmetric gutters of 24px on desktop. The spacing scale is semantic and hierarchical: 8px is the base unit, with multiples used for consistent rhythm (12px for tight grouping, 24px for component padding, 40px for section separation, 64px for major section breaks). The hero section occupies full viewport height with a dark overlay (rgba(0, 0, 0, 0.7)) over a code-pattern background, establishing visual dominance and technical credibility. Below the fold, sections use 40px vertical spacing (lg) to create breathing room while maintaining visual continuity. Cards and containers use 20px internal padding (md) with 24px gaps between elements. The system avoids centered text except in hero contexts; body

Elevation & Depth

Depth in Zeptaz is conveyed through contrast and borders rather than shadows. The system uses a flat, layered approach with three distinct surface levels: Level 1 (Base) is the page background at #f3f3f1. Level 2 (Cards & Containers) are white (#ffffff) surfaces with a 1px inset border at #b4b4b1 (rgba(180, 180, 177, 1)), creating a subtle frame that defines boundaries without visual weight. Level 3 (Modals & Overlays) use the same white background with a 1px border, but are positioned above a semi-transparent dark scrim (rgba(0, 0, 0, 0.5)). When shadows are used (e.g., on dropdown panels), t

Shapes

The Zeptaz shape philosophy is 'Architectural Sharpness'—a commitment to right angles and precision that reinforces the technical, systems-oriented brand identity. All components use 0px border-radius by default, creating sharp corners that evoke CAD drawings, terminal interfaces, and engineering blueprints. This is a deliberate rejection of the industry trend toward soft, rounded interfaces; the sharpness communicates that Zeptaz is serious, engineered, and uncompromising. Exceptions are rare: buttons use 0px radius, cards use 0px radius, inputs use 0px radius. The only rounded element is the

Components

Action Elements Buttons in Zeptaz use a monospace typeface (JetBrains Mono, 12px, 500 weight) with uppercase labels and tight letter-spacing (0.08em), creating a distinctive, technical appearance. The primary button uses a solid crimson background (#e1112f) with white text, 11px vertical padding and 14px horizontal padding, and 0px border-radius. On hover, the background shifts to #c41c31 (a darker crimson, -20% lightness), and the cursor changes to pointer. On active/pressed, the background becomes #b50d26 (an even darker crimson, -40% lightness). All button transitions use a 150ms ease-out timing function (cubic-bezier(0, 0, 0.2, 1)). Secondary buttons use a transparent background with a 1px border at #b4b4b1, white text, and the same padding and font treatment. On hover, the backgro

Do's and Don'ts

**Do**

• Do use the monospace label style (JetBrains Mono, 12px, 500 weight, 0.08em letter-spacing) for all interactive elements and system-generated text to reinforce the technical aesthetic.
• Do maintain 1px inset borders on all cards and containers; they define boundaries without visual noise and are essential to the flat, layered design system.
• Do use the crimson primary color (#e1112f) exclusively for call-to-action buttons, active states, and critical alerts—never for decorative elements or secondary actions.
• Do apply 40px vertical spacing (lg) between major sections and 24px (md) between components within sections to create consistent rhythm and breathing room.
• Do use Funnel Display (light weight, 300–400) for all headlines with tight letter-spacing (-0.03em to -0.01em) to create a sense of precision and forward momentum.

**Don't**

• Don't introduce rounded corners (border-radius > 0px) on buttons, cards, or inputs; the sharp, architectural aesthetic is core to the brand identity.
• Don't use shadows beyond 0 3px 8px rgba(0, 0, 0, 0.15); the system relies on contrast and borders for depth, not visual effects.
• Don't apply the primary crimson color to non-interactive elements or decorative accents; reserve it exclusively for CTAs and critical states to maintain visual hierarchy.
• Don't use gradients, blur effects, or semi-transparent overlays on interface elements; the system is flat and high-contrast, never soft or atmospheric.
• Don't mix typefaces within a single component; use Funnel Display for headlines, Inter for body, and JetBrains Mono for labels and system text—never combine them.