secubox-openwrt/docs/UI-GUIDE.md

SecuBox UI Design Guide

CRT P31 Phosphor Green Theme

The SecuBox OpenWrt interface uses a retro CRT terminal aesthetic inspired by the P31 phosphor used in classic green-screen monitors.

Color Palette

Variable	Hex	Usage
--p31-peak	#33ff66	Maximum brightness - headers, active elements
--p31-hot	#66ffaa	High brightness - hover states
--p31-mid	#22cc44	Medium brightness - body text
--p31-dim	#0f8822	Low brightness - secondary text, borders
--p31-ghost	#052210	Ghosting/afterglow - subtle backgrounds
--p31-decay	#ffb347	Phosphor decay amber - warnings
--tube-black	#050803	Deep CRT black - main background
--tube-deep	#080d05	Card backgrounds
--tube-bezel	#0d1208	Panel borders

Typography

font-family: 'Courier Prime', 'IBM Plex Mono', 'Fira Code',
             'Courier New', 'Lucida Console', monospace;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.02em;

Glow Effects

/* Text glow */
--bloom-text: 0 0 2px var(--p31-peak),
              0 0 6px var(--p31-peak),
              0 0 14px rgba(51,255,102,0.5);

/* Box glow */
--bloom-box: 0 0 8px rgba(51,255,102,0.3),
             inset 0 0 4px rgba(51,255,102,0.1);

Theme Files

luci-theme-secubox/
├── htdocs/luci-static/secubox/
│   ├── cascade.css         # Main theme CSS
│   ├── mobile.css          # Mobile responsive styles
│   ├── crt-engine.js       # Scanline & boot animation
│   └── crt-components.js   # Reusable UI components
├── htdocs/luci-static/resources/secubox-theme/
│   └── themes/
│       ├── crt-p31.css     # P31 variant
│       ├── dark.css        # Dark variant
│       ├── cyberpunk.css   # Cyberpunk variant
│       └── ...
└── ucode/luci/template/themes/secubox/
    ├── header.ut           # Header template
    └── footer.ut           # Footer template

CRT Engine Features

Scanlines Overlay

// Automatically applied via crt-engine.js
// Creates CSS pseudo-element with horizontal lines

Boot Sequence Animation

On first visit, displays a terminal-style boot sequence:

[SECUBOX] Initializing mesh daemon...
[SECUBOX] Loading P31 phosphor display...
[SECUBOX] System ready.

Phosphor Glow

Text and interactive elements have subtle green glow effects that intensify on hover/focus.

KISS Theme Integration

SecuBox modules use a shared KISS (Keep It Simple & Styled) theme helper:

// In LuCI views
'require secubox-theme/kiss';

// Render header chip
E('div', { 'class': 'sh-page-header' }, [
    renderHeaderChip('🛡️', 'Security Status', 'Active', 'success')
]);

// Stats card
E('div', { 'class': 'sh-stat-card' }, [
    E('div', { 'class': 'sh-stat-value' }, '42'),
    E('div', { 'class': 'sh-stat-label' }, 'Active Threats')
]);

Component Classes

Cards

<div class="sh-card">
    <div class="sh-card-header">Title</div>
    <div class="sh-card-body">Content</div>
</div>

Status Badges

<span class="sh-badge sh-badge-success">Running</span>
<span class="sh-badge sh-badge-warning">Warning</span>
<span class="sh-badge sh-badge-danger">Stopped</span>

Progress Bars

<div class="sh-progress">
    <div class="sh-progress-bar" style="width: 75%"></div>
</div>

Tables

<table class="sh-table">
    <thead>
        <tr><th>Column</th></tr>
    </thead>
    <tbody>
        <tr><td>Data</td></tr>
    </tbody>
</table>

Responsive Design

The theme includes mobile-optimized styles via mobile.css:

• Collapsible navigation menu
• Stacked card layouts
• Touch-friendly button sizes
• Readable font sizes on small screens

Theme Switching

Users can switch themes via UCI or the Settings page:

# Set theme via UCI
uci set luci.main.mediaurlbase='/luci-static/secubox'
uci commit luci

# Or use the themes section
uci set luci.themes.SecuBox='/luci-static/secubox'

Dark Mode

The CRT P31 theme is inherently dark. The data-darkmode attribute is ignored as the phosphor green aesthetic requires a dark background for proper contrast.

Accessibility

• High contrast phosphor green on black
• Keyboard navigation support
• Focus indicators with glow effects
• Screen reader compatible semantic HTML

---

SecuBox UI Guide v1.0 | CRT P31 Phosphor Theme