2483 Ascii Design System Port Fb98ee4a

ASCII Design System — Python Port Complete ✓

Date: 2026-02-09 Status: ✅ Complete & Working

Summary

Successfully ported the Skene ASCII Design System from TypeScript/Node.js to Python/Rich for use in skill-loom-cli.py. The CLI now uses consistent Skene branding with design tokens, symbols, and adaptive rendering.

What Was Created

1. ✅ ASCII Design System Module (ascii/)

ascii/
├── __init__.py           # Main exports and convenience imports
├── design_tokens.py      # Colors, symbols, tokens (182 lines)
├── environment.py        # Render mode detection (132 lines)
└── README.md            # Complete documentation (290 lines)

Key Components:

design_tokens.py:

• SkeneColors class — All hex colors from design system
• Tokens class — Rich-compatible color tokens
• Symbols class — Unicode characters (◈, ✓, →, ◉, etc.)
• BoxChars class — Box drawing characters (╭╮╰╯─│)
• RISK_COLORS mapping — Risk level → color tokens
• should_use_color() — NO_COLOR env var support

environment.py:

• RenderMode enum — Terminal, IDE chat, mobile, plain
• get_render_mode() — Auto-detect environment
• get_terminal_width() — Width detection with fallbacks
• get_layout_classification() — narrow/compact/standard/wide

What Was Changed

2. ✅ Refactored skill-loom-cli.py (608 lines)

Replaced all hardcoded Rich colors with Skene design tokens:

Before:

console.print("[bold cyan]Header[/bold cyan]")
table = Table(border_style="cyan")
console.print("[green]✓[/green] Success")
console.print("[red]✗[/red] Error")

After:

console.print(f"[bold {SkeneColors.PRIMARY}]Header[/bold {SkeneColors.PRIMARY}]")
table = Table(border_style=SkeneColors.PRIMARY)
console.print(f"[{SkeneColors.SUCCESS}]{Symbols.CHECKMARK}[/{SkeneColors.SUCCESS}] Success")
console.print(f"[{SkeneColors.ERROR}]{Symbols.CROSS}[/{SkeneColors.ERROR}] Error")

Updated Methods:

1. ✓ show_banner() — Primary gold banner, Skene symbols
2. ✓ main_menu() — Primary border, primary gold options
3. ✓ browse_job_functions() — Risk colors (error/warning/beacon_active/success)
4. ✓ show_function_skills() — Consistent color scheme
5. ✓ show_skill_details() — Beacon symbols, primary headers
6. ✓ search_skills() — Primary borders and prompts
7. ✓ security_audit_view() — Progress bars with Symbols.PROGRESS_FULL
8. ✓ view_workflows() — Primary gold workflow names
9. ✓ show_workflow_details() — Arrow symbols, beacon warnings
10. ✓ statistics_dashboard() — Checkmark symbols, success colors
11. ✓ show_about() — Skene logo in markdown
12. ✓ main() error handling — Warning/error colors with symbols

Color Mapping

Symbol Mapping

Features Added

1. Consistent Branding

• All colors match Skene Design System
• Unified color palette across all screens
• Brand recognition through consistent peach (#EDC29C) accent

2. Semantic Color System

• PRIMARY (#EDC29C) — Headers, borders, interactive prompts
• PRIMARY_GOLD (#E8C260) — Highlights, option numbers
• BEACON_ACTIVE (#00FFC2) — Active CTAs, medium risk
• SUCCESS/ERROR/WARNING — Clear status indicators

3. Unicode Symbol Library

• Professional symbols (◈, ✓, ◉) instead of plain text
• Consistent bullet points and arrows
• Progress bars with block characters (█░▓)

4. Adaptive Rendering

• Respects NO_COLOR environment variable
• Detects IDE chat vs terminal
• Terminal width detection (narrow/compact/standard/wide)

5. Future-Proof Architecture

• Easy to extend with new colors/symbols
• Centralized design token management
• No hardcoded colors in application code

Testing

✅ Verified Working

cd ~/skene-primary/skene-skills-directory

# Test basic launch
python3 skill-loom-cli.py

# Test NO_COLOR mode
NO_COLOR=1 python3 skill-loom-cli.py

# Test IDE chat mode
ASCII_RENDER_MODE=ide-chat python3 skill-loom-cli.py

Results:

• ✓ CLI launches successfully
• ✓ Banner displays with proper colors
• ✓ Menu renders with Skene branding
• ✓ All colors display correctly
• ✓ Symbols render properly
• ✓ NO_COLOR mode works (falls back to no colors)

Before vs After

Before (Generic Rich colors)

┌──────────────────────────────┐  (cyan border)
│ Skills Directory             │  (cyan text)
│ ✓ Success                    │  (green checkmark)
│ ✗ Error                      │  (red cross)
└──────────────────────────────┘

After (Skene Design System)

┌──────────────────────────────┐  (#EDC29C peach border)
│ Skills Directory             │  (#EDC29C peach text)
│ ✓ Success                    │  (#9CEDC7 teal checkmark)
│ ✗ Error                      │  (#ED9C9C soft red cross)
└──────────────────────────────┘

File Changes Summary

Total: 6 files, ~1,264 lines of code and documentation

Usage Examples

Import Design System

from ascii import SkeneColors, Symbols, Tokens, get_render_mode

# Use in Rich markup
console.print(f"[bold {SkeneColors.PRIMARY}]Header[/bold {SkeneColors.PRIMARY}]")
console.print(f"[{SkeneColors.SUCCESS}]{Symbols.CHECKMARK} Done[/{SkeneColors.SUCCESS}]")

Create Branded Table

from rich.table import Table
from ascii import SkeneColors, Symbols

table = Table(
    show_header=True,
    box=box.ROUNDED,
    border_style=SkeneColors.PRIMARY  # Skene peach
)
table.add_column("Status", style=f"bold {SkeneColors.PRIMARY_GOLD}")

Progress Bar

from ascii import Symbols, SkeneColors

bar_length = 20
bar = Symbols.PROGRESS_FULL * bar_length
console.print(f"[{SkeneColors.BEACON_ACTIVE}]{bar}[/{SkeneColors.BEACON_ACTIVE}]")

Integration with Broader Skene Ecosystem

This Python port maintains 100% design parity with:

1. TypeScript/Node.js version — ~/skene-flow-proto-local-backup/docs/templates/ascii-design-system/
2. Production Skene Flow — ~/skene-dashboard/skene-flow/src/onboarding/design-tokens.ts
3. Figma Design System — ~/skene-strategy/projects/design-system/src/styles/figma-design-tokens.css

Cross-platform consistency:

• Same hex colors across all platforms
• Same unicode symbols
• Same semantic token names
• Same adaptive rendering logic

Next Steps (Optional Enhancements)

1. Extended Symbols

Add more emojis and unicode for different contexts:

Symbols.SPARKLE = "✨"
Symbols.FIRE = "🔥"
Symbols.SHIELD = "🛡️"

2. Theme Variants

Add dark/light theme support:

class SkeneTheme:
    LIGHT = {...}
    DARK = {...}

3. Animation Support

Add spinner/progress animation utilities:

from rich.spinner import Spinner
spinner = Spinner("dots", text="Loading...", style=SkeneColors.PRIMARY)

4. Export to JSON

Generate JSON config for other tools:

python3 -m ascii.export --format json > skene-colors.json

References

• Source Design Spec: ~/skene-flow-proto-local-backup/docs/templates/ascii-design-system/ASCII_DESIGN_SPEC.md
• Implementation Plan: .cursor/plans/token-based_ascii_design_system_991cd8f6.plan.md
• Figma Tokens: ~/skene-strategy/projects/design-system/src/styles/figma-design-tokens.css
• TypeScript Tokens: ~/skene-flow/src/onboarding/design-tokens.ts

Success Metrics

✅ Design Consistency — All colors match Skene palette ✅ Brand Recognition — Peach accent (#EDC29C) throughout ✅ Professional Polish — Unicode symbols, proper spacing ✅ Accessibility — NO_COLOR support, high contrast ✅ Maintainability — Centralized tokens, no hardcoded colors ✅ Documentation — Complete README, inline comments ✅ Testing — CLI launches and renders correctly

Conclusion

The ASCII Design System has been successfully ported to Python! The skill-loom-cli.py now uses consistent Skene branding with:

• 🎨 Skene color palette (peach, gold, teal)
• 📐 Unicode symbols (◈, ✓, ◉, →)
• 🌗 Adaptive rendering (terminal, IDE, mobile)
• 📦 Modular architecture (easy to extend)

The CLI is production-ready and matches the Skene design system across all platforms.

Built with: Python 3.9+, Rich 13.0+ Platform: macOS (Darwin 24.6.0) Completed: 2026-02-09