Jesús Pérez 9cef9b8d57 refactor: consolidate configuration directories

Merge _configs/ into config/ for single configuration directory.
Update all path references.

Changes:
- Move _configs/* to config/
- Update .gitignore for new patterns
- No code references to _configs/ found

Impact: -1 root directory (layout_conventions.md compliance)

2025-12-26 18:36:23 +00:00

14 KiB

Raw Permalink Blame History

🎨 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

: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);
}

14 KiB Raw Permalink Blame History