Bootstrap format. G-SHOCK display language.

Frontend Toolkit For Rugged LCD Interfaces

Static frontend showcase and cookbook for a G-SHOCK-inspired UI toolkit built with Bootstrap 5 conventions, custom CSS, and lightweight JavaScript interactions.

Open Cookbook Explore System
gs-ui / live-preview
Live Preview
Toolkit Browser Surface
A compact browser shell showing the same surfaces, progress, and controls used throughout the showcase.
Scan Feed
Signal Lock Synced
ALM-05
Primary action surfaces inherit Bootstrap spacing and utility patterns.
Mission Time Live
00:00:00
Digital typography uses the local Digital-7MonoItalic.woff2 asset.
Impact Scan 0%
Progress, statuses, and alerts are color-mapped from the sample palette.
System Set

Toolkit Core Elements

The showcase groups the toolkit into display surfaces, rugged cards, operational controls, and watch-console information blocks.

Bootstrap 5 + Anime.js
Display Panel

LCD Surfaces

For dashboards, countdowns, command readouts, and compact KPI modules.

Altitude m
1450
Operational Card

Action Modules

Use for command summaries, navigation cards, or grouped feature entry points.

Power Reserve 84h
Shock Sensor Ready
Signal State

Alert Surfaces

High-contrast warnings and service prompts stay inside the same casing language.

Low visibility mode
Increase screen luminance before field deployment.
Color Patterns

Unified Semantic Pairings

Each tone now follows a consistent text/background rule so the whole toolkit reads as one system instead of isolated component styling.

Primary
card-ink / card-background
Secondary
ink / background
Danger
ink / danger
G-SHOCK watch product image
State Logic

Controls And Disclosure

The updated showcase now reflects the cookbook control set: checkbox toggles, semantic alerts, and the active/inactive accordion treatment.

Primary state uses the active color pairing while collapsed items return to rubber casing.

Disclosure follows the same semantic structure as buttons, chips, and alerts.
Inspect Controls
Feedback

Semantic Alerts

Success
Sync locked and stable.
Info
Field scan underway.
Warning
Visibility dropping.
Data View

Tables And Pagination

Channel State Latency
Alpha Relay Stable 18ms
Beta Relay Syncing 41ms
  • Prev
  • 1
  • 2
  • 3
Production Use

Showcase Ready, Cookbook Ready

The showcase now mirrors the rebuilt cookbook: color patterns lead the system, controls share the same semantic rules, and feedback surfaces stay visually consistent.

Open Color Patterns Open Data Table

Copyright BadLeo.com