# 🎨 SYNTAXIS Visual Identity System ## Logo Design ### Primary Logo - The Syntax Matrix ``` ┌─────────────────────────────────────┐ │ │ │ ◆ │ │ ◆ ■ ◆ │ │ ◆ ■ ▲ ■ ◆ SYNTAXIS │ │ ◆ ■ ◆ │ │ ◆ │ │ │ │ Systematic Orchestration │ │ │ └─────────────────────────────────────┘ Symbol: Perfectly arranged elements ◆ = Phases (diamond) ■ = Tasks (square) ▲ = Core/Priority (triangle) ``` ### Logo Variations #### Horizontal Layout ``` ◆■▲■◆ SYNTAXIS Systematic Orchestration ``` #### Vertical Stack ``` ◆■▲■◆ SYNTAXIS Systematic Orchestration ``` #### Icon Only (Favicon) ``` ◆ ◆▲◆ ◆ ``` #### Monogram ``` ╔═══╗ ║ S ║ ╚═══╝ ``` --- ## Color System ### Primary Palette ``` ┌──────────────────────────────────────────────────────┐ │ SYNTAXIS Blue #2C5F8E │ │ ████████████████████ │ │ Primary brand color - Professional, systematic │ ├──────────────────────────────────────────────────────┤ │ Balanced Gray #757773 ✨ (UPDATED) │ │ ████████████████████ │ │ Secondary - Architectural, neutral-warm │ │ Refined from Greek Stone Gray for better contrast │ ├──────────────────────────────────────────────────────┤ │ Arrangement Gold #D97706 │ │ ████████████████████ │ │ Accent - Achievement, highlights │ ├──────────────────────────────────────────────────────┤ │ System Green #059669 │ │ ████████████████████ │ │ Success - Completion, positive states │ ├──────────────────────────────────────────────────────┤ │ Order Purple #7C3AED │ │ ████████████████████ │ │ Special - VAPORA/AI features │ └──────────────────────────────────────────────────────┘ ``` #### Color Evolution Note Previously used `#6B7280` (Greek Stone Gray) had similar cool temperature to the primary blue, resulting in low visual differentiation. The new **Balanced Gray `#757773`** maintains the architectural stone aesthetic while introducing subtle warmth, creating better visual continuity and contrast without sacrificing brand identity. ### Extended Palette ``` Background Colors: Light: #FFFFFF (Pure White) #F9FAFB (Off White) #F3F4F6 (Light Gray) Dark: #0F172A (Deep Dark) #1E293B (Dark) #334155 (Medium Dark) Text Colors: Dark: #1F2937 (Headings) #4B5563 (Body) #9CA3AF (Muted) Light: #F9FAFB (Headings) #E5E7EB (Body) #9CA3AF (Muted) Status Colors: Info: #0EA5E9 (Blue) Warning: #F59E0B (Amber) Error: #EF4444 (Red) Pending: #8B5CF6 (Purple) ``` ### Color Usage Guidelines ``` PRIMARY USE CASES: - SYNTAXIS Blue: Headers, CTAs, primary buttons, links - Balanced Gray: Body text, borders, secondary UI, visual hierarchy - Arrangement Gold: Hover states, active selections, achievements - System Green: Success messages, completed tasks - Order Purple: VAPORA features, AI indicators COMBINATIONS: - Blue + Balanced Gray: Professional, main UI (optimized contrast) - Blue + Gold: Premium, important actions - Balanced Gray + Green: Subtle success states - Purple + Blue: AI/intelligent features CONTRAST OPTIMIZATION: - Balanced Gray (#757773) provides better visual differentiation from SYNTAXIS Blue (#2C5F8E) while maintaining continuous flow - Suitable for all backgrounds (light/dark) - Preserves classical/architectural aesthetic ``` --- ## Typography System ### Font Stack ``` Primary (Headlines): font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700 (Bold), 600 (Semibold) Secondary (Body): font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400 (Regular), 500 (Medium) Monospace (Code): font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-weight: 400 (Regular) ``` ### Type Scale ``` Display: 64px/4rem - line-height: 1.1 - tracking: -0.02em H1: 48px/3rem - line-height: 1.2 - tracking: -0.01em H2: 36px/2.25rem - line-height: 1.25 - tracking: -0.01em H3: 24px/1.5rem - line-height: 1.3 - tracking: 0 H4: 20px/1.25rem - line-height: 1.4 - tracking: 0 Body: 16px/1rem - line-height: 1.6 - tracking: 0 Small: 14px/0.875rem- line-height: 1.5 - tracking: 0 Tiny: 12px/0.75rem - line-height: 1.5 - tracking: 0.01em ``` --- ## Visual Elements ### Icon System ``` Core Icons: ◆ Diamond - Phases, stages, milestones ■ Square - Tasks, items, components ▲ Triangle - Priority, core, important ● Circle - Projects, complete items → Arrow - Flow, progression, next ⟳ Cycle - Refresh, orchestration, loop ≡ Lines - Menu, systematic arrangement ∿ Wave - Flow, rhythm, movement ╬ Column - Structure, foundation ⚡ Lightning - Fast, automated, instant Status Icons: ✓ Checkmark - Complete, success ✗ Cross - Error, failed ⊙ Circle Dot - In progress ○ Empty - Pending, not started ⚠ Warning - Attention needed 🔒 Lock - Secured, private 🔓 Unlock - Open, public Interface Icons: ⌘ Command - CLI interface ▣ Window - Dashboard interface ◈ Diamond - TUI interface ⚛ Atom - API interface ``` ### Patterns & Textures ``` Grid Pattern (Systematic Arrangement): ┌─┬─┬─┬─┬─┐ ├─┼─┼─┼─┼─┤ ├─┼─┼─┼─┼─┤ └─┴─┴─┴─┴─┘ Flow Lines (Orchestration): ━━━━━━━━━━━ ╍╍╍╍╍╍╍╍╍╍╍ ∿∿∿∿∿∿∿∿∿∿∿ Hierarchy (Arrangement): ▲ ■ ■ ◆ ◆ ◆ ``` --- ## UI Components ### Buttons ``` Primary Button: ┌────────────────────┐ │ Get Started │ Background: #2C5F8E │ │ Text: #FFFFFF └────────────────────┘ Hover: #1E3A5F Border-radius: 6px Padding: 12px 24px Secondary Button: ┌────────────────────┐ │ Learn More │ Background: transparent │ │ Text: #2C5F8E └────────────────────┘ Border: 2px solid #2C5F8E Hover: Background #F3F4F6 Ghost Button: ┌────────────────────┐ │ Cancel │ Background: transparent │ │ Text: #757773 └────────────────────┘ Hover: Background #F9FAFB ``` ### Cards ``` ┌───────────────────────────────┐ │ ◆ Phase Name │ ├───────────────────────────────┤ │ │ │ Task content goes here │ │ Status: ● In Progress │ │ │ ├───────────────────────────────┤ │ [Action] [Another Action] │ └───────────────────────────────┘ Background: #FFFFFF Border: 1px solid #E5E7EB Shadow: 0 1px 3px rgba(0,0,0,0.1) Border-radius: 8px ``` ### Form Elements ``` Input Field: ╭───────────────────────────────╮ │ Enter task name... │ ╰───────────────────────────────╯ Select Dropdown: ╭───────────────────────────────╮ │ Choose phase ▼ │ ╰───────────────────────────────╯ Checkbox: □ Unchecked ☑ Checked ☐ Indeterminate Radio: ○ Unselected ● Selected Toggle: [○───] Off [───●] On ``` --- ## Application Examples ### CLI Interface ``` $ syntaxis status ╔═══════════════════════════════════════════╗ ║ SYNTAXIS v1.0.0 ║ ║ Systematic Orchestration Platform ║ ╠═══════════════════════════════════════════╣ ║ ◆ Current Phase: Development ║ ║ ■ Active Tasks: 12 ║ ║ ▲ Priority Items: 3 ║ ║ ✓ Completed Today: 7 ║ ╚═══════════════════════════════════════════╝ → Next: syntaxis list tasks ``` ### Web Dashboard Header ``` ┌──────────────────────────────────────────────────────────┐ │ ◆■▲■◆ SYNTAXIS [Projects][Docs][Settings] ■ │ ├──────────────────────────────────────────────────────────┤ │ │ │ Dashboard > My Project > Development Phase │ │ │ └──────────────────────────────────────────────────────────┘ ``` ### Business Card ``` ┌─────────────────────────────┐ │ │ │ ◆■▲■◆ SYNTAXIS │ │ │ │ John Smith │ │ Principal Engineer │ │ │ │ john@syntaxis.dev │ │ syntaxis.dev │ │ │ └─────────────────────────────┘ ``` --- ## Responsive Breakpoints ``` Mobile: 320px - 767px Tablet: 768px - 1023px Desktop: 1024px - 1439px Wide: 1440px+ Container Widths: Mobile: 100% - 32px padding Tablet: 720px Desktop: 960px Wide: 1200px ``` --- ## Animation Guidelines ``` Transitions: - Duration: 200ms (fast), 300ms (normal), 500ms (slow) - Easing: cubic-bezier(0.4, 0, 0.2, 1) - ease-out - Properties: opacity, transform, background-color Hover Effects: - Scale: 1.02 for cards, 1.05 for buttons - Shadow elevation increase - Color brightness adjustment Loading States: - Pulsing: opacity 0.5 to 1.0 - Spinning: 360deg rotation - Progress bars: width animation ``` --- ## Accessibility Standards ``` Color Contrast: - Normal text: 4.5:1 minimum - Large text: 3:1 minimum - Interactive: 3:1 minimum Focus States: - Outline: 2px solid #2C5F8E - Offset: 2px - Never remove focus indicators ARIA Labels: - All interactive elements - Meaningful descriptions - Status announcements Keyboard Navigation: - Tab order logical - All interactive elements reachable - Escape to close modals ``` --- ## File Naming Conventions ``` Logo Files: syntaxis-logo-primary.svg syntaxis-logo-horizontal.svg syntaxis-logo-icon.svg syntaxis-logo-mono-dark.svg syntaxis-logo-mono-light.svg Icons: syntaxis-icon-{name}-{size}.svg Example: syntaxis-icon-phase-24.svg Marketing: syntaxis-banner-{platform}-{dimension}.png Example: syntaxis-banner-twitter-1500x500.png ``` --- ## Implementation CSS Variables ```css :root { /* Colors */ --syntaxis-blue: #2C5F8E; --syntaxis-gray: #757773; /* Updated: Balanced Gray for better contrast */ --syntaxis-gold: #D97706; --syntaxis-green: #059669; --syntaxis-purple: #7C3AED; /* Typography */ --font-primary: 'Inter', sans-serif; --font-secondary: 'Source Sans Pro', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Spacing */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* Radii */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* Shadows */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); } ``` --- **SYNTAXIS** - Visual identity for systematic orchestration. syntaxis.dev | Copyright 2025