G-SHOCK Frontend Toolkit Cookbook

01

Color Patterns

Every semantic tone is defined as a foreground/background pair. These swatches are the source of truth for buttons, chips, alerts, and dark code surfaces.

Toolkit State

00:00:00

Semantic tones stay consistent across the toolkit.

Primary

card-ink / card-background

Secondary

ink / background

Success

ink / success

Info

ink / info

Warning

ink / warning

Danger

ink / danger

Dark

background / ink

Primary Pattern

Panel-led surfaces
LCD displays, primary CTAs, active disclosure states

Secondary Pattern

Base operating tone
Inputs, secondary buttons, neutral status blocks

:root {
  --gs-primary-fg: var(--gs-panel-ink);
  --gs-primary-bg: var(--gs-panel);
  --gs-secondary-fg: var(--gs-ink);
  --gs-secondary-bg: var(--gs-bg);
  --gs-success-fg: var(--gs-ink);
  --gs-success-bg: var(--gs-success);
  --gs-info-fg: var(--gs-ink);
  --gs-info-bg: var(--gs-info);
  --gs-warning-fg: var(--gs-ink);
  --gs-warning-bg: var(--gs-warning);
  --gs-danger-fg: var(--gs-ink);
  --gs-danger-bg: var(--gs-danger);
  --gs-dark-fg: var(--gs-bg);
  --gs-dark-bg: var(--gs-ink);
}

02

Surfaces

The core surface set: LCD panels, structural cards, and media frames. These provide the base casing language.

Battery OK

88.4%

Link Health Stable

Shock Index 04

<div class="lcd-panel p-4">...</div>

<div class="toolkit-card soft p-4">
  <div class="toolkit-list">
    <div class="toolkit-list-item">...</div>
  </div>
</div>

<div class="toolkit-banner p-3">
  <img src="./assets/images/watch.png" class="showcase-shot" alt="">
</div>

03

Controls

Primary and secondary actions are direct expressions of the semantic palette. Inputs stay secondary until focused.

Signal

Off On

<button class="btn toolkit-button toolkit-button-primary">Primary</button>
<button class="btn toolkit-button toolkit-button-secondary">Secondary</button>
<span class="toolkit-chip">Signal</span>

<input class="toolkit-toggle" id="toggle-demo-on" type="checkbox" checked>
<label class="toolkit-toggle-ui toolkit-toggle-ui-lg" for="toggle-demo-on">
  <span class="toggle-off">Off</span>
  <span class="toggle-on">On</span>
</label>

<input class="toolkit-toggle" id="toggle-demo-default" type="checkbox">
<label class="toolkit-toggle-ui" for="toggle-demo-default">
  <span class="toggle-off">Off</span>
  <span class="toggle-on">On</span>
</label>

<input class="toolkit-toggle" id="toggle-demo-sm" type="checkbox">
<label class="toolkit-toggle-ui toolkit-toggle-ui-sm" for="toggle-demo-sm">
  <span class="toggle-off">Off</span>
  <span class="toggle-on">On</span>
</label>

<input class="form-control toolkit-input" placeholder="Enter command frequency">
<select class="form-select toolkit-input">...</select>

04

Feedback

Segmented meter, directional triangle process, and semantic alerts for runtime status.

Each triangle equals 20% progress.

Success
Relay synced and stable.

Info
Scan in progress.

Warning
High luminance recommended.

Danger
Impact threshold exceeded.

<div class="toolkit-meter">
  <span style="--value: 70%;"></span>
</div>

<div class="triangle-progress">...</div>

<div class="toolkit-alert" data-tone="warning">
  <strong>Warning</strong>
</div>

05

Disclosure

The accordion uses rubber for collapsed items and the primary pair for the active item, with the metal control rotating from plus to close.

Reserve mode is stable for 84 hours with radio sync and sensor sweep enabled.

Impact telemetry remains within tolerance. Automatic scan escalation is available on trigger.

<div class="accordion toolkit-accordion" id="toolkitAccordionDemo">
  <div class="accordion-item">
    <button class="accordion-button" data-bs-toggle="collapse">
      Power Reserve
    </button>
    <div class="accordion-collapse collapse show">
      <div class="accordion-body">...</div>
    </div>
  </div>
</div>

06

Data Table And Pagination

Structured operational data with alternating rows, status markers, and semantic pagination controls.

Channel	State	Latency
Alpha Relay	Stable	18ms
Beta Relay	Syncing	41ms
Gamma Relay	Queued	72ms

<div class="toolkit-table-wrap">
  <table class="table toolkit-table">
    <thead>...</thead>
    <tbody>
      <tr>
        <td>Alpha Relay</td>
        <td><span class="table-status" data-tone="success">Stable</span></td>
        <td>18ms</td>
      </tr>
    </tbody>
  </table>
</div>

<ul class="pagination toolkit-pagination">...</ul>

07

Motion

Reveal-on-scroll and interactive lift/pulse are shared behaviors. Use them sparingly on control surfaces.

Pulse Chip

<button
  class="btn toolkit-button toolkit-button-primary interactive"
  data-animate
  data-delay="120">
  Animated CTA
</button>

Required Includes

Load Order

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="./assets/css/toolkit.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.2/anime.min.js"></script>
<script src="./assets/js/toolkit.js"></script>

Return To Showcase Bootstrap Docs

Component Cookbook