0. Resources

https://dribbble.com/shots/popular/web-design
https://www.ui-skills.com
https://impeccable.style/
https://reactbits.dev
https://font-analyzer-six.vercel.app
https://21st.dev/community/components
https://www.designprompts.dev
https://component.gallery/components/

0.5Cool Websites

Organization is good - https://rushabhjewel.com
https://localhosthq.com/
https://www.tenity.com
https://www.livetheresidency.com
https://eigen.build
https://www.spottedinprod.com
https://www.loot-drop.io/faq

ServaLabs Design Philosophy & Styling

1. Core Aesthetic: The "James Bond" Experience

The ServaLabs brand is not about typical, friendly, tech-startup design. It is about power, sovereignty, and impenetrable security. The aesthetic is explicitly "James Bond meets Cyberpunk."

Visual Identity

• Colors: Deep blacks, metallic grays, and stark, high-contrast accents (e.g., sharp red or electric blue) instead of soft pastels.
• Typography: Monospaced fonts for technical details, bold geometric sans-serifs for headings. Clean, authoritative, and unyielding.
• Imagery: Industrial textures, dark mode by default, subtle cryptographic or matrix-like visual motifs (used sparingly, not overwhelmingly).

The Feeling

When a user interacts with ServaLabs surfaces, they should feel:

• Relief: They have found a secure harbor.
• Power: They are taking control back from massive, opaque entities.
• Exclusivity: This is a high-end, uncompromising solution, not a mass-market toy.

2. Design Principles

A. Sovereignty through Simplicity

Our technical backend is complex, but the user interface must be brutally simple.

• Minimalist Dashboards: Only show what is necessary.
• Clear Hierarchy: Guide the user's eye to the most critical action or information immediately.
• No Clutter: Remove any element that doesn't serve a direct, functional purpose.

B. High Agency Interfaces

Users should feel they have complete control over their system.

• Explicit Actions: Buttons and links must use precise verbs (e.g., "Deploy Network" instead of "Go").
• Transparency: Show system status clearly (e.g., "All connections encrypted" or "Firewall Active").
• Reversible Actions (Where Possible): Give users confidence to explore by allowing easy rollbacks or clear warnings before destructive actions.

C. Premium Utility

We are selling a high-end platform. The design must reflect the price point and the importance of the data it protects.

• Sharp Borders & Contrast: Use distinct boundaries for elements.
• Subtle Animations: Use deliberate, smooth animations for transitions, avoiding anything "bouncy" or playful.

3. Web & App Guidelines

(To be expanded with specific CSS variables, component rules, and asset links)

UI Components

• Buttons: Flat design, sharp corners, high contrast hover states.
• Cards/Containers: Dark backgrounds with subtle borders (no aggressive drop shadows).
• Typography Scale: High contrast between H1 and body text to establish clear structure.

Copywriting Synergy

The design must support the copy. The copy is direct, unapologetic, and urgent. The design should frame this copy without distracting from it. See Wiki for ServaLabs Website and Wiki for Marketing & Sales for copy rules.

4. WinCommander: The Sovereign Terminal

When designing for WinCommander (the flagship product), the mental model is a military command center meets precision instrument. The user should feel like they're operating a submarine's control panel, not using a web app.

A. Terminal Principles

• Mono everything: All interactive labels, data cells, badges, scores, and titles must use monospace fonts. Body copy/descriptions use system sans-serif.
• Zero border-radius: All containers, inputs, dialogs, buttons → border-radius: 0. The ONLY rounded exception: small circular status indicators.
• Sparse color: 95% of the UI is dark neutrals. Color is reserved for signal only: accent = action/active, warning = caution, danger = error/threat, success = confirmed/armed.
• Density over whitespace: Panels pack information like a terminal dashboard. Padding is tight (8–16px). No decorative whitespace.
• Feedback on every action: Every toggle, every operation, every navigation change produces visible + optional audible feedback. Users should feel the system responding.
• Traces over Forensics: All user-facing UI text uses "Traces" instead of "Forensics" (e.g., "Privacy & Traces", "Trace Auditing", "CLEAR TRACES").

B. Sensory Feedback & Reward Systems

The principle: every meaningful action produces a sensory response that exceeds expectations. Not gamification with points/badges. Precision instrument feedback. The user should feel like they're arming a defense system, not playing a game.

• The Sovereignty Score: The single narrative arc of the app (0–100%). It answers "how protected am I?".
  • Threshold celebrations: At 50%, 75%, 90%, 100%: the score ring does a single bright pulse (glow intensifies for 400ms), optional lock sound plays. No confetti. No badge. Just a sharp moment of intensity.
• Permanent State Evidence ("Armed" Marks): No badges or XP. When ALL toggles in a SectionCard are active, the header underline appears. This is permanent evidence that a section has been fully armed.
• The "ARMED" Environment State: When sovereignty score exceeds 90%, the entire app subtly transforms. TitleBar text changes to // ARMED, dashboard tech grid intensifies, and frame borders pulse. This is the single big payoff. The user arms their entire system, and the app itself transforms to match. Not a popup. Not a toast. The environment changes.
• Sound Design: All sounds must be under 200ms (except startup). No melodies, only mechanical/industrial feedback (e.g. electrical relay click, submarine hatch closing tone).