# Comarnet Modern — Design Brainstorm

## Three Stylistic Approaches

### Approach A: "Deep Space Connectivity"
A dark-mode, deep navy/midnight aesthetic evoking data flowing across global networks. Glowing accent lines, subtle particle animations, and luminous teal highlights. Probability: 0.07

### Approach B: "Corporate Precision"
Clean white with sharp navy accents, geometric grid layouts, and confident sans-serif typography. Structured, authoritative, and enterprise-ready. Probability: 0.04

### Approach C: "Luminous Infrastructure"
A light-to-dark gradient base (off-white to deep slate) with electric blue as the signature color. Asymmetric layouts, bold typographic hierarchy, and glassmorphism cards. Probability: 0.09

---

## Chosen Approach: C — "Luminous Infrastructure"

### Design Movement
Contemporary Tech Minimalism with Glassmorphism accents — inspired by Vercel, Linear, and Stripe's design language.

### Core Principles
1. **Asymmetric Tension** — layouts break from center-alignment; text blocks and visuals pull in opposite directions to create energy.
2. **Typographic Hierarchy as Architecture** — headline weight contrast (900 vs 400) does the heavy lifting; color and size reinforce meaning.
3. **Controlled Depth** — glassmorphism cards, subtle shadows, and layered z-index create a sense of physical depth without clutter.
4. **Motion with Purpose** — scroll-triggered fade-ins and subtle hover lifts; nothing animates without communicating something.

### Color Philosophy
- **Background**: Near-white `oklch(0.98 0.005 240)` transitioning to deep slate `oklch(0.12 0.02 240)` in dark sections.
- **Signature Brand Color**: Electric Cobalt `oklch(0.55 0.22 255)` — unmistakably Comarnet's.
- **Accent**: Teal `oklch(0.72 0.15 195)` for secondary highlights and icons.
- **Neutral**: Slate grays for body text, borders, and dividers.
- Emotional intent: Trust, precision, global reach.

### Layout Paradigm
- Hero: Full-bleed dark section with large display type left-anchored, abstract globe/network graphic right-anchored.
- Services: Alternating left/right content blocks with large numbering as decorative elements.
- Stats bar: Full-width dark band with 3-4 key metrics.
- News: Horizontal card scroll on mobile, 3-column grid on desktop.
- No centered hero text — always left-aligned or split-column.

### Signature Elements
1. **Diagonal section dividers** — subtle polygon clip-paths separate sections without hard lines.
2. **Glowing cobalt underlines** on section headings — a thin `2px` electric-blue rule under key words.
3. **Numbered service cards** with large ghost numerals (`01`, `02`) as background decoration.

### Interaction Philosophy
- Hover on service cards: subtle lift (`translateY(-4px)`) + border glow.
- Nav links: underline slides in from left on hover.
- CTA buttons: scale(0.97) on press, glow on hover.

### Animation
- Entrance: `opacity: 0 → 1` + `translateY(20px → 0)` over 500ms `cubic-bezier(0.23, 1, 0.32, 1)`.
- Stagger: 80ms between list items.
- Nav: backdrop-blur transitions from 0 to full on scroll.
- Respect `prefers-reduced-motion`.

### Typography System
- **Display**: `Syne` (700–800) — geometric, bold, distinctive. Used for H1 and section titles.
- **Body**: `DM Sans` (400–500) — clean, humanist, readable. Used for paragraphs and UI.
- **Mono accent**: `JetBrains Mono` — used sparingly for technical labels and stats.
- Scale: 72px hero → 48px section → 32px card → 18px body → 14px caption.

### Brand Essence
**Comarnet** — the network backbone for businesses that can't afford to go offline. For IT-dependent enterprises across Asia Pacific and beyond. Different because it combines global reach with local expertise.
Personality: **Reliable. Precise. Forward-thinking.**

### Brand Voice
Headlines are confident and declarative. CTAs are action-forward. No filler.
- Example headline: *"Your network. Everywhere. Always."*
- Example CTA: *"Get Connected"*
- Banned: "Welcome to our website", "Get started today", "We are pleased to offer"

### Wordmark & Logo
A bold hexagonal network node symbol — six-sided geometric mark suggesting connectivity nodes. The word "COMARNET" in Syne 700, letter-spaced +0.05em, in cobalt blue.

### Signature Brand Color
Electric Cobalt `oklch(0.55 0.22 255)` — the one color that is unmistakably Comarnet's.

---

## Style Decisions
- Dark hero section with light body sections for visual contrast rhythm.
- Service cards use glassmorphism on dark backgrounds, clean white cards on light backgrounds.
- Footer is always dark slate, matching the hero.