480 lines
14 KiB
Markdown
480 lines
14 KiB
Markdown
|
# 🎨 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
|