Strix Design System

All components used across the Strix frontend

1. Colors
CSS variables from :root
Backgrounds
Purple Accent
Semantic
Text Hierarchy
--text-primary: Main content text
--text-secondary: Labels, descriptions
--text-tertiary: Hints, placeholders
--text-disabled: Disabled elements
2. Typography
Headings, labels, mono text

STRIX

Page Title (.page-title)
Screen Title (.screen-title)
Section Title (.section-title)
Label (.label)
Field Label (.field-label)
Monospace text (--font-mono)
3. Buttons
All button variants
Primary
Primary Large (full width)
Outline
Small Buttons
Stop / Danger
Add Sub / Secondary Action
Save (Green)
Back Navigation
Add (+) Button
Use as Stream Button (card action)
4. Form Elements
Inputs, selects, toggles
Standard Input

IP address or stream URL

Large Input
Validated Input (readonly)
Password with Toggle
Select Dropdown
HW Acceleration
Small Inputs in Row
FPS
Width
Height
Add Row (input + button)
Toggle Switches
Enabled (on)
Disabled (off)
Optional Label
4b. PIN Digit Input
Segmented code entry (homekit.html pairing)
PIN Input (3-2-3 format)
-
-
States
empty filled error success
5. Badges & Tags
Status indicators, type labels
Type Badges
standard homekit unreachable
Status Badges
running
done
Mode Badge
Stream Testing sub
Tags (selected items)
preset Top 1000 Stream Patterns brand Hikvision
Card Tags (codec overlays)
H264 AAC MJPEG
Latency Colors
42ms (fast) 320ms (medium) 850ms (slow)
6. Cards
Stream cards, media cards
Stream Card (info)
Main Stream
rtsp://admin:pass@192.168.1.100:554/stream1
Sub Stream
rtsp://admin:pass@192.168.1.100:554/stream2
Media Card (test result)
H264 AAC
1920x1080
rtsp://admin:***@192.168.1.100:554/stream1
42ms 1920x1080
H265
640x480
rtsp://admin:***@192.168.1.100:554/stream2
280ms 640x480
7. Progress & Status
Status bars, counters, progress, spinners
Status Bar (complete component)
running
sess_abc123
48
total
32
tested
5
alive
3
screenshots
Loading Spinner
Building stream URLs...
8. Collapsible Sections
Expandable settings, grouped results
Expand Button (settings)
Group with Collapse (results)
Recommended - Main (3)
Cards would go here...
9. Feedback
Toasts, errors, results, info boxes, notices
Error Box
Connection error: timeout after 5s
Info Box
How to use
Add these URLs to your NVR software.
Result OK
Added to go2rtc: camera_main. Open go2rtc UI
Result Error
camera_main: go2rtc not found
Notice Banner
Frigate NVR not detected
If you have Frigate NVR, we recommend running Strix on the same server.
Toast (click to demo)
10. Config Panel
Code display with diff highlighting
Generated Config
go2rtc: streams: camera_main: - rtsp://admin:pass@192.168.1.100:554/stream1 camera_sub: - rtsp://admin:pass@192.168.1.100:554/stream2 cameras: camera: ffmpeg: inputs: - path: rtsp://127.0.0.1:8554/camera_sub input_args: preset-rtsp-restream roles: - detect - path: rtsp://127.0.0.1:8554/camera_main input_args: preset-rtsp-restream roles: - record
Config Example Block (copyable)
go2rtc.yaml
streams: 'camera_main': - rtsp://admin:pass@192.168.1.100:554/stream1
11. Lists & Tables
Stream lists, device info tables
Streams Box (scrollable list)
3 streams
rtsp://admin:pass@192.168.1.100:554/stream1
rtsp://admin:pass@192.168.1.100:554/stream2
http://192.168.1.100:80/video.cgi
Device Info Table
IP Address192.168.1.100
ModelDS-2CD2043G2-I
VendorHikvision
MACAA:BB:CC:DD:EE:FF
Stream URL with Copy Button
Main Stream
rtsp://admin:pass@192.168.1.100:554/stream1
12. Mobile Tabs
Tab switcher for two-column layouts on mobile
13. Sticky Bottom Bar
Fixed action bar at page bottom (not shown fixed in this demo)
14. Autocomplete Dropdown
Searchable dropdown with type badges
preset Top 1000
brand Hikvision
model Hikvision DS-2CD2043G2-I
model Hikvision DS-2CD2347G2-LU
15. Centered Page Pattern
True-center layout with floating back button (homekit.html)
Apple HomeKit
Content centered on screen, back button floats at top
15. SVG Icons
All inline SVG icons used across pages (never use emoji or icon fonts)
back
info
add
close
chevron
chevron-down
check
copy
eye
image