Synox Cloud API

Overview

Synox Cloud API embodies a **Tech-Forward Minimalism** aesthetic—a design language that prioritizes clarity, speed, and developer confidence through a dark, high-contrast interface. The brand serves developers and technical teams seeking a no-friction API platform; the UI transforms complex infrastructure into an intuitive, visually striking experience. The emotional response is one of capability and precision: users feel they're accessing cutting-edge technology without bureaucratic overhead. The visual identity combines a near-black canvas (#04050a) with electric blue (#3d5fb8) and cyan (#3ecfdc) accents that evoke energy, modernity, and technical sophistication—think of the aesthetic as "command-line elegance meets contemporary web design."

The brand voice is direct, confident, and action-oriented. Vocabulary emphasizes speed ("Cepat"), simplicity ("Siap Pakai" — ready to use), and zero friction ("Tanpa daftar" — no registration). Sentences are short, imperative, and benefit-focused. Example: "Lirik lagu, download video, chat AI, enkripsi teks, cek data — semua dalam satu request." The tone avoids hype; instead, it states capability as fact. The personality is that of a seasoned engineer who respects the user's time and intelligence.

Colors

The color system is built on a **deep-space foundation** with electric accents. The primary surface (#04050a) is near-black with a subtle blue undertone, creating visual depth without appearing flat. All interactive elements—buttons, links, focus states—use the primary blue (#3d5fb8), which is bright enough to command attention against the dark background while remaining technically sophisticated. Secondary cyan (#3ecfdc) is reserved for status indicators, version badges, and secondary CTAs; it provides visual variety and signals "live" or "active" states. Tertiary green (#52c47a) marks success states and positive indicators (e.g., the "API AKTIF" badge in the hero). Error red (#e05c6b) is used sparingly for destructive actions and warnings.

The surface stack uses subtle increments: surfa

Typography

The type system pairs **Syne** (geometric sans-serif, 400–800 weights) for headlines and body copy with **Space Mono** (monospace, 400–700 weights) for labels, code snippets, and technical metadata. Syne's geometric forms and generous spacing convey modernity and approachability; Space Mono grounds the interface with technical credibility. Display sizes (89.6px, 800 weight) are reserved for hero headlines and use aggressive letter-spacing (-0.03em) to create visual impact and reinforce the tech aesthetic. Headline-lg (42px, 800 weight) is used for section titles; headline-md (28px, 700 weight) for subsections. Body text (16–17px, 400 weight) maintains 24–28px line-height for comfortable reading on dark backgrounds. Labels and UI text use Space Mono at 9–13px with 0.05–0.08em letter-spacing

Layout

The layout uses a **fluid 12-column grid** with a fixed container max-width of 980px, centered on the viewport. Horizontal padding is 24px on mobile, 32px on desktop, creating a breathing room that prevents content from feeling cramped. The spacing scale follows a 8px base unit: xs (4px) for micro-spacing, sm (12px) for component padding, md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for hero/footer spacing. Hero sections use 100px top padding and 80px bottom padding to create visual dominance. Section padding is consistently 110px vertical (lg + xl combined) with md horizontal gutters. Cards and use-case items use a 1px gap grid (background: var(--b1)) to create subtle visual separation without harsh lines. The rhythm emphasizes whitespace: large sec

Elevation & Depth

Depth is conveyed through **layered surfaces and selective shadows** rather than dramatic drop-shadows. The elevation system has three levels: Level 1 (Base) is the background (#04050a) with subtle noise texture (opacity 0.016) and a fixed grid overlay (rgba(91, 127, 212, 0.03) at 80px spacing). Level 2 (Standard Cards) uses surface-container (#0b0e18) with a 1px border at rgba(91, 127, 212, 0.06) and a soft shadow (0 4px 20px rgba(91, 127, 212, 0.3)). Level 3 (Elevated/Hover) applies surface-container-high (#0f1320) with a 1px border at rgba(91, 127, 212, 0.13) and a stronger shadow (0 16px 4

Shapes

The shape philosophy is **Geometric Precision with Approachable Softness**—sharp enough to feel technical, rounded enough to feel modern. Buttons and major CTAs use full border-radius (99px) to create pill-shaped forms that feel contemporary and clickable. Cards and containers use 16px radius (lg) for a balanced, professional appearance. Input fields and smaller components use 8px radius (DEFAULT) for subtle definition. Icon containers and badges use 10px radius (md) as a middle ground. The rationale: full-radius buttons signal "primary action" and are instantly recognizable as interactive; 16

Components

Action Elements Buttons are the primary interaction pattern. **Primary buttons** (button-primary) use background: {colors.primary} (#3d5fb8), color: white, padding: 14px 36px, border-radius: 99px, font-family: Syne, font-size: 13px, font-weight: 700. On hover, background shifts to {colors.primary-container} (#5b7fd4), transform: translateY(-3px), and box-shadow: 0 16px 40px rgba(91, 127, 212, 0.3) applies. Transition timing is 0.3s cubic-bezier(0.16, 1, 0.3, 1). **Secondary buttons** (button-secondary) use transparent background, border: 1px solid {colors.outline-variant}, color: {colors.on-surface-variant}, same padding and radius. On hover, background becomes rgba(91, 127, 212, 0.06), border upgrades to {colors.outline}, and transform: translateY(-2px). Navigation links use the secon

Do's and Don'ts

**Do**

• Do use primary blue (#3d5fb8) for all CTAs and interactive focus states—it's the signature accent and must be instantly recognizable.
• Do maintain the 3-tier text hierarchy (on-surface #eef2ff for primary, on-surface-variant #a8b8d8 for secondary, outline #4a5c7a for tertiary) to ensure readability on dark backgrounds.
• Do apply the blue-tinted overlay system (rgba(91, 127, 212, 0.06–0.26)) for all borders, dividers, and surface variations—never use neutral grays.
• Do use Syne for all headlines and body copy; reserve Space Mono exclusively for labels, badges, and technical metadata to maintain visual hierarchy.
• Do combine transform: translateY(-2px to -3px) with shadow upgrades (0 16px 40px rgba(91, 127, 212, 0.3)) on hover to create responsive, lifting interactions.
• Do use full border-radius (99px) for primary buttons and major CTAs; 16px for cards; 8–10px for smaller components—this creates clear visual hierarchy.

**Don't**

• Don't use neutral grays (#999, #666, #ccc) for borders or dividers—the blue-tinted overlay system is the brand's signature and must be consistent.
• Don't apply drop-shadows without a corresponding surface-color upgrade; elevation is achieved through layered surfaces + selective shadows, not shadow alone.
• Don't mix Syne and Space Mono arbitrarily—Syne is for content hierarchy, Space Mono is for technical/UI labels only.
• Don't exceed 3 levels of visual hierarchy (primary, secondary, tertiary text colors); additional colors dilute the brand's precision.
• Don't use cyan (#3ecfdc) or green (#52c47a) for primary CTAs—they are reserved for secondary actions and status indicators.
• Don't apply rounded corners to dividers or borders; keep them 1px solid and sharp to maintain technical credibility.