Thanks to visit codestin.com
Credit goes to github.com

Skip to content

STYLE_GUIDE.md

Latest commit

 

History

History
88 lines (61 loc) · 3.53 KB

STYLE_GUIDE.md

File metadata and controls

88 lines (61 loc) · 3.53 KB

Stream Gate Style Guide

This document outlines the design principles, typography, color system, and component standards used in Stream Gate. We strive for a "Premium, Glassmorphism" aesthetic that bridges the gap between complex networking tools and a beautiful consumer experience.

🎨 Design Philosophy

  • Glassmorphism: Enhanced depth using translucent backgrounds (backdrop-blur), subtle borders, and layered elements.
  • Vibrant & Deep: We rely on a "Deep Blue" theme (hsl(224, 71%, 4%)) rather than standard flat black for dark mode to create a richer atmosphere.
  • Bilingual Mastery: The application is first-class for both English (LTR) and Persian (RTL). All components must handle directionality gracefully without disjointed layouts.

🅰️ Typography

We use Vazirmatn for all text (English and Persian) to ensure visual consistency and seamless mixing of languages.

  • Font Family: Vazirmatn, sans-serif
  • Weights:
    • Regular (400): Body text
    • Medium (500): Button labels, navigation
    • Bold (700): Headings, emphasized stats
  • Letter Spacing: Set to 0 specifically to prevent disjointed ligatures in Persian script.

Note: Monospace fonts are overridden for Persian text to ensure readability, except in specific system log containers.

🍭 Color Palette

We use CSS variables with HSL values for dynamic theming (Light/Dark).

Dark Mode (Default)

The dark mode is a carefully curated "Deep Space" palette.

Token HSL Value Use Case
background 224 71% 4% Main app background (Very dark blue)
foreground 213 31% 91% Primary text color (Off-white)
primary 217 91% 60% Call-to-action buttons, active states (Vibrant Blue)
muted 223 47% 11% Secondary backgrounds, inactive items
border 216 34% 17% Subtle borders for separation

Light Mode

The light mode maintains the blue identity but shifts to a crisp, clean brightness.

Token HSL Value Use Case
background 0 0% 100% Pure white background
foreground 222.2 84% 4.9% Primary text (Dark Navy)
primary 221.2 83.2% 53.3% Primary Blue
muted 210 40% 96.1% Light gray/blue backgrounds

🧩 Components & Radius

We use Shadcn UI (Radix Primitives + Tailwind) as our base component library.

  • Radius: 0.75rem (12px). We prefer softer, friendlier corners over sharp edges.
  • Transitions: All theme changes animate smoothly (0.5s ease-in-out).
  • Scrollbars: Custom "Premium" scrollbar:
    • Thin (10px)
    • Translucent track
    • Hover-aware thumb

🌐 Layout & Spacing

  • Container: We often center content with a max-width of 1400px.
  • Spacing Scale: Standard Tailwind spacing (rem-based).
  • RTL Support:
    • Use flex-start / flex-end conceptual positioning.
    • Avoid hardcoded left-* or right-* utilities; strict usage of ms-* (margin-start) and me-* (margin-end).

🖱️ Micro-Interactions

  • Hover States: Interactive elements should have immediate, clear feedback (brightness bump or subtle scale).
  • Active States: "Press" effects (scale down 0.98) on major buttons give a tactile feel.

💻 Tech Stack

  • Tailwind CSS: Utility-first styling.
  • Tailwind Animate: For easy entry/exit animations.
  • Framer Motion: For complex layout transitions.
  • Lucide React: For consistent, clean SVG iconography.