SOHub Digital

Overview

SOHub Digital is a creative agency that builds distinctive digital experiences and brand identities for forward-thinking companies. The design system embodies a "Minimalist-Technical" aesthetic: geometric precision meets restrained elegance, with a high-contrast palette of deep blacks (#0c1016), soft whites (#f0f6f8), and a signature teal accent (#27b7a5). The visual language communicates clarity, confidence, and craftsmanship—every element serves a purpose, no decoration without function.

The brand voice is direct, intelligent, and human-centered. SOHub speaks with the clarity of a strategist and the warmth of a collaborator. Vocabulary favors concrete nouns over abstractions: "build," "craft," "story," "experience" rather than "leverage," "synergy," or "innovative." The tone is conversational but precise, never breathless or hyperbolic. Example: "Your story builds our history" (from the hero)—a statement that positions the client's narrative as central, using active verbs and parallel structure to convey partnership.

Colors

The color system operates on a principle of **high contrast and purposeful restraint**. The primary palette consists of three core roles: a neutral surface stack (whites and grays), a dark secondary (near-black for text and UI), and a single accent (teal #27b7a5) reserved for interactive elements and brand moments.

**Primary (#27b7a5)** is the signature teal accent, used exclusively on call-to-action buttons ("CHAT WITH SOHUB", "BOOK A MEETING"), focus states, and brand-critical interactive elements. It appears sparingly to maximize impact—approximately 5–8% of the interface. **Secondary (#1e232c)** is the dark charcoal, applied to the "MENU" button, text on light backgrounds, and secondary UI containers. **On-Surface (#0c1016)** is the deepest black, reserved for body text and primary he

Typography

The type system uses **Inter** exclusively across all scales, a geometric sans-serif that reinforces the minimalist-technical aesthetic. The hierarchy is built on weight contrast rather than size alone: Display (60px, 700 weight) anchors hero sections with maximum visual presence; Headline-lg (40px, 600 weight) introduces major sections; Headline-md (28px, 600 weight) breaks content into digestible chunks; Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry narrative content with generous line-height (28px and 24px respectively) for readability. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) handle UI labels, buttons, and metadata. Letter-spacing is tight on large sizes (Display: -0.04em, Headline-lg: -0.02em) to create density and sophistication, then relaxes to 0

Layout

The layout follows a **12-column fluid grid** with a max-width of 1280px (1280px), centered on larger viewports. The page rhythm is built on a **8px unit system** with semantic spacing tokens: gutter (24px) for horizontal padding on containers, lg (40px) for section separation, md (24px) for component internal padding, and sm (12px) for tight groupings. The hero occupies the full viewport height with a large typographic treatment (Display scale) paired with a 3D product render, establishing visual drama. Below, sections use alternating left-right layouts with 40px vertical spacing between sections, creating a breathing rhythm. Container padding is consistently 24px on tablet/desktop, 16px on mobile. The grid is never fully visible—instead, content aligns to invisible columns with 24px gutt

Elevation & Depth

Depth is conveyed through **subtle shadows and layering**, not through color or blur. The elevation system uses three levels: **Level 1 (sm)** applies 0 1px 2px rgba(0, 0, 0, 0.06) to cards and small containers, creating a hairline separation from the background. **Level 2 (md)** uses 0 4px 12px rgba(0, 0, 0, 0.08) on hover states and elevated cards, signaling interactivity. **Level 3 (lg)** reserves 0 16px 40px rgba(0, 0, 0, 0.12) for modals and overlays, creating clear visual precedence. Shadows are always warm-tinted (using black with 6–12% opacity rather than pure #000000) to feel natural.

Shapes

The shape philosophy is **"Geometric Precision with Selective Softness"**: sharp corners dominate (0px radius on most elements), but interactive elements receive rounded corners to signal affordance and reduce visual harshness. **Buttons** use full-pill radius (9999px / {rounded.full}) to create a soft, inviting target; this contrasts with the sharp typography and dark backgrounds, making CTAs unmistakable. **Cards and containers** use 4px–8px radius ({rounded.md} to {rounded.lg}) to soften edges without appearing playful. **Input fields** use 6px radius ({rounded.md}) for a balanced, professi

Components

Action Elements Buttons are the primary interactive element and must be immediately recognizable. **Button-primary** uses {colors.primary} (#27b7a5) background with white text, {rounded.full} (9999px), and 12px vertical / 24px horizontal padding, resulting in a 48px height. On hover, shift to {colors.primary-fixed-dim} (#1e9b8f) with a 150ms cubic-bezier(0.4, 0, 0.2, 1) transition—no scale or shadow change, only color. **Button-secondary** mirrors the primary structure but uses {colors.secondary} (#1e232c) with light text, appropriate for secondary actions like "Contact" or navigation toggles. **Button-ghost** has a transparent background, 1px solid {colors.outline} border, and {colors.on-surface} text; on hover, fill with {colors.surface-container-high} (#d9e0e3) to indicate state cha

Do's and Don'ts

**Do**

• Do use {colors.primary} (#27b7a5) exclusively for CTAs and interactive focus states—it is the brand's signature and must remain rare and impactful.
• Do maintain high contrast: pair {colors.on-surface} (#0c1016) text with {colors.surface} (#f0f6f8) backgrounds for WCAG AAA compliance (21:1 ratio minimum).
• Do apply {rounded.full} (9999px) to all buttons to signal affordance and create visual relief from the sharp typography.
• Do use the 8px unit system consistently: all padding, margins, and spacing should be multiples of 8px (4px, 12px, 24px, 40px, 64px).
• Do transition interactive elements over 150ms using cubic-bezier(0.4, 0, 0.2, 1) for a snappy, responsive feel.
• Do reserve shadows for depth signaling only: use {elevation.sm} for cards, {elevation.md} for hover states, {elevation.lg} for modals.

**Don't**

• Don't use colors outside the defined palette—no custom hex values or gradients that deviate from the surface stack or accent colors.
• Don't apply rounded corners to headings, body text, or non-interactive elements; sharpness reinforces the technical brand voice.
• Don't use blur, glassmorphism, or backdrop-filter effects; the design favors flat, solid surfaces with precise 1px borders.
• Don't mix typefaces; Inter is the only approved font family across all scales and weights.
• Don't apply multiple shadows or layered effects; each element should have at most one shadow from the elevation scale.
• Don't use the primary accent (#27b7a5) for anything other than CTAs, focus states, and brand-critical moments—overuse dilutes its impact.