Skip to content

UI_STYLE_GUIDE.md

Latest commit

 

History

History
372 lines (292 loc) · 8.26 KB

UI_STYLE_GUIDE.md

File metadata and controls

372 lines (292 loc) · 8.26 KB

Multi-Stack Virtual Development Platform - UI/UX Style Guide

Design Philosophy

The platform follows a "Scientific & Professional" aesthetic with elements inspired by:

  • VS Code's minimalist design
  • Terminal-based development tools
  • NASA/SpaceX engineering dashboards
  • Modern glassmorphism trends

Color System

Primary Palette (Dark Theme - Default)

Background Gradient:
  Primary:    #0D0D12 (Deep charcoal)
  Secondary:  #0F1015 (Charcoal with blue undertone)
  Tertiary:   #111114 (Slightly lighter)
  Surface:    #1A1A20 (For panels)
  Hover:      #252530 (Interactive states)

Accent Colors (Electric & Neon)

Cyan:       #00E5FF (Primary interactive elements)
Purple:     #A56BFF (Secondary, decorative)
Blue:       #4AD7FF (Plasma, highlights)
Yellow:     #F6FF00 (Attention, warnings)

Typography Colors

Primary:    #E8E8ED (Main text - 95% opacity white)
Secondary:  #A8A8B8 (Muted text)
Tertiary:   #808090 (Very dim - 50% brightness)
Inverse:    #0D0D12 (Text on light backgrounds)

Terminal Colors

Text:       #00FF85 (Matrix green)
Background: #111114 (Graphite)
Error:      #FF4A4A (Red)
Warning:    #FFB000 (Orange)
Success:    #00FF85 (Green)

Glassmorphism Effects

Light Glass (Subtle)

Background:      rgba(255, 255, 255, 0.08)
Backdrop Filter: blur(10px)
Border:          1px solid rgba(255, 255, 255, 0.12)

Medium Glass (Default)

Background:      rgba(255, 255, 255, 0.12)
Backdrop Filter: blur(16px)
Border:          1px solid rgba(255, 255, 255, 0.16)

Dark Glass (Panels)

Background:      rgba(0, 0, 0, 0.4)
Backdrop Filter: blur(20px)
Border:          1px solid rgba(255, 255, 255, 0.08)

Typography

Font Families

Monospace:  "Fira Code", "Monaco", "Courier New", monospace
Sans-Serif: "Segoe UI", "-apple-system", "BlinkMacSystemFont", sans-serif

Font Sizes

xs:   11px  (Labels, captions)
sm:   12px  (Small text)
base: 13px  (Default, editor)
lg:   14px  (Body text)
xl:   16px  (Section headers)
2xl:  18px  (Subheadings)
3xl:  20px  (Page titles)
4xl:  24px  (Main headings)

Font Weights

Light:      300 (Secondary text)
Regular:    400 (Default)
Medium:     500 (Buttons, labels)
Semibold:   600 (Emphasis)
Bold:       700 (Headings)

Line Heights

Code:       1.5 (Editor)
Normal:     1.5 (Body)
Relaxed:    1.6 (Comfortable reading)

Spacing System (8px Base)

xs:   4px
sm:   8px
md:   12px
lg:   16px
xl:   24px
2xl:  32px
3xl:  48px

Border Radius

none:  0px
sm:    2px
base:  4px
md:    6px
lg:    8px
xl:    12px
full:  9999px

Shadows

Standard Shadows

none:  none
xs:    0 1px 2px 0 rgba(0, 0, 0, 0.05)
sm:    0 1px 3px 0 rgba(0, 0, 0, 0.1)
base:  0 2px 8px 0 rgba(0, 0, 0, 0.15)
md:    0 4px 16px 0 rgba(0, 0, 0, 0.2)
lg:    0 8px 24px 0 rgba(0, 0, 0, 0.25)
xl:    0 12px 32px 0 rgba(0, 0, 0, 0.3)

Glow Shadows

cyan:   0 0 16px rgba(0, 229, 255, 0.3), 0 0 32px rgba(0, 229, 255, 0.15)
purple: 0 0 16px rgba(165, 107, 255, 0.3), 0 0 32px rgba(165, 107, 255, 0.15)

Animations & Transitions

Timing Functions

fast:    150ms ease-out
base:    250ms ease-out
slow:    350ms ease-out
slowest: 500ms ease-out

Motion Principles

  • Spring animations for interactive elements
  • Smooth fades for appearance/disappearance
  • Scale transforms for emphasis
  • Stagger animations for lists
  • Subtle micro-interactions for feedback

Component Patterns

Button States

Normal:    Background + border, text color
Hover:    Increased brightness, scale 1.05
Active:   Color inversion, scale 0.95
Disabled: 60% opacity, cursor not-allowed
Focus:    Cyan glow, outline

Input States

Normal:    Border light, background surface
Focus:    Border cyan, glow effect
Error:    Border red, error text
Success:  Border green, checkmark
Disabled: Opacity 50%, cursor not-allowed

Panel Styling

Background: Glass effect (medium)
Border:    1px light border
Radius:    8px
Shadow:    Base shadow
Padding:   16px (lg)

Tab Styling

Inactive: Text secondary, background transparent
Active:   Text primary, bottom border cyan (2px)
Hover:    Slight background highlight
Icon:     Left side, text color follow

Layout Specifications

Grid System

  • Base Grid: 8px × 8px
  • Column Count: 12 columns
  • Gutter: 16px
  • Max Width: 1920px
  • Breakpoints: xs(320px), sm(640px), md(1024px), lg(1280px), xl(1536px)

Responsive Breakpoints

Mobile:   320px - 640px   (Single column, stacked)
Tablet:   640px - 1024px  (Two columns)
Desktop:  1024px - 1280px (Three columns)
Wide:     1280px+         (Four+ columns)

Icon Guidelines

  • Size: 16px (default), 18px (buttons), 24px (headers)
  • Style: Outline, minimal stroke (1-1.5px)
  • Color: Inherit text color or explicit color
  • Spacing: 8px between icon and text
  • Library: react-icons, Feather icons

Editor Theming

Monaco Editor Colors

Background:           #0D0D12
Text:                 #E8E8ED
Keywords:             #A56BFF (purple)
Strings:              #00FF85 (green)
Numbers:              #F6FF00 (yellow)
Variables:            #00E5FF (cyan)
Comments:             #808090 (grey)
Line Numbers:         #808090
Cursor:               #00E5FF
Selection:            rgba(0, 229, 255, 0.3)
Line Highlight:       rgba(255, 255, 255, 0.04)

Terminal Theming

Background:           #111114
Text:                 #00FF85
Error:                #FF4A4A
Warning:              #FFB000
Success:              #00FF85
Cursor:               #00E5FF
Selection:            rgba(0, 229, 255, 0.3)

Accessibility

  • Contrast Ratio: Minimum 4.5:1 for normal text, 3:1 for large text
  • Focus Indicators: Always visible (2px cyan outline)
  • Color Blindness: Don't rely on color alone; use patterns/icons
  • Text Size: Minimum 12px for body text
  • Touch Targets: Minimum 44px × 44px
  • Motion: Respect prefers-reduced-motion

Performance Considerations

  • Animations: Use GPU-accelerated properties (transform, opacity)
  • Glassmorphism: Use will-change: backdrop-filter for smooth performance
  • Shadows: Use box-shadow sparingly (expensive)
  • Blur Effects: Limit to key areas (not entire layout)

Theme Customization

Users can customize:

  • Accent colors (Cyan, Purple, Blue, Yellow, custom)
  • Font size (10px - 20px)
  • Editor font (Monospace selection)
  • Terminal colors
  • Animation speed (fast, normal, slow, none)
  • Light/Dark mode toggle

Interactive States

Hover States

  • Buttons: Scale 1.05, brightness increase
  • Links: Color change, underline
  • Panels: Slight background highlight
  • Rows: Light background, shadow increase

Focus States

  • Always visible: 2px cyan outline
  • Offset: 2px from element
  • Keyboard only: Show on Tab, hide on click (for UX)

Loading States

  • Spinner: Rotating cyan gradient
  • Pulse: Fading opacity animation
  • Progress: Gradient bar expanding
  • Skeleton: Shimmer effect

Dark Mode (Default)

The platform uses dark mode by default for:

  • Reduced eye strain during long coding sessions
  • Better for terminal-like workflows
  • Modern developer preference
  • Power efficiency on OLED displays

Light mode available as option but not primary.

Component Library Structure

components/
  ├── TopBar.tsx
  ├── Sidebar.tsx
  ├── Editor.tsx
  ├── Terminal.tsx
  ├── Preview.tsx
  ├── modals/
  │   ├── ProjectModal.tsx
  │   ├── SettingsModal.tsx
  │   └── ShareModal.tsx
  ├── common/
  │   ├── Button.tsx
  │   ├── Input.tsx
  │   ├── Modal.tsx
  │   ├── Tab.tsx
  │   └── Badge.tsx
  └── widgets/
      ├── FileTree.tsx
      ├── Breadcrumb.tsx
      ├── SearchBar.tsx
      └── Notification.tsx

Design Tokens Export

All design tokens are centralized in lib/theme.ts for consistency and maintainability:

THEME.colors.accent.cyan      // Primary interactive color
THEME.colors.text.primary     // Main text
THEME.typography.fontSize.base // Default font size
THEME.spacing.lg              // 16px spacing
THEME.shadows.cyan            // Glow shadow
THEME.transitions.base        // 250ms ease-out