// 05 DESIGN SYSTEM

UI Component Kit

Every component used across ScriptInPHP projects. Consistent, accessible, and built for the phosphor burnt-orange theme.

Colour Palette
Primary
Dim
Lo
BG
BG2
BG3
Text
Text Dim
Text Lo
Success
Error
Warning
Typography
ORBITRON / PAGE TITLE
ScriptInPHP Studio
SHARE TECH MONO / BODY
The quick brown fox jumps over the lazy dog. Professional web development starts with clean code.
PRESS START 2P / LABELS
// SYSTEM STATUS: ONLINE
Buttons
Badges & Status
● Online ● Error ● Warning ● Info Inactive Demo
Alerts
✓ Operation completed successfully. Your data has been saved.
✗ Authentication failed. Invalid credentials provided.
❱ This is a demo environment. Data resets periodically.
Form Elements
Terminal Component
OUTPUT — scriptinphp.com
$ curl -X POST /samples/api/?action=login > Connecting to mail.scriptinphp.com:465... ✓ 200 OK — Authentication successful { "success": true, "token": "a8f3c2d1e9b4...", "expires": "2024-12-31 23:59:59", "user": { "id": 1, "name": "Demo User", "role": "demo" } }
Data Table
#NameStatusRoleDate
#1
Demo User
demo@demo.com
 ● Active demo 2024-01-01
#2
Jane Smith
jane@example.com
 ● Active user 2024-02-14
#3
Bob Jones
bob@example.com
 ● Pending user 2024-03-22
Modal
MODAL COMPONENT
This is a modal dialog

Modal dialogs are used for confirmations, alerts, forms, and focused interactions that require user attention.

Click outside or the ✕ button to close. All modals use the same overlay component for consistency.