メニュー
Elastro GUI design tokens: dark-first Hawkins-inspired HSL variables, typography scale, spacing, shadows, health semantics, and motion. Use when theming Elastro GUI, adding CSS variables, or aligning components to Netflix/Hawkins visual standards.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Hawkins-inspired Netflix UX patterns for Elastro's Vue GUI: dark cinematic shell, content-forward layouts, skeleton loading, semantic health states, browse-card affordances, and operational empty/error flows. Use when designing or reviewing Elastro GUI screens, UX uplift, or when the user mentions Netflix, Hawkins, or Elastro GUI UX.
Vue 3 + Vite patterns for Elastro GUI: shared UI components, composables, lucide icons, axios API calls with bearer token, and build-to-elastro/gui workflow. Use when implementing or refactoring Elastro GUI views, components, or frontend features.
Enforce Elastro logging standards: get_logger(__name__), package-level handler configuration, LogLoom enrichment, stderr-only diagnostics, and coverage for operational paths (collectors, remediation, managers, CLI commands). Use when adding or reviewing Elastro code, doing a logging coverage pass, or when the user mentions logs, observability, LogLoom, or ELASTRO_LOG_LEVEL.
FAANG-synthesized Python CLI patterns for Elastro: Click/rich-click command groups, global flags, stderr logging, dry-run/fix flows, fast-path startup, and testable command handlers. Use when adding CLI commands, refactoring elastro/cli, or implementing health/remediation UX.
FAANG-synthesized Python engineering patterns for Elastro: typing, Pydantic models, error taxonomy, thin CLI, test pyramids, safe remediation, and incremental PRs. Use when implementing features, reviewing Elastro PRs, or refactoring health/remediation/core modules.
| name | elastro-gui-design-tokens |
| description | Elastro GUI design tokens: dark-first Hawkins-inspired HSL variables, typography scale, spacing, shadows, health semantics, and motion. Use when theming Elastro GUI, adding CSS variables, or aligning components to Netflix/Hawkins visual standards. |
Source of truth: packages/gui/src/style.css (:root block). Tokens use HSL without wrapper so consumers write hsl(var(--token)).
Dark-first for operator sessions. Light theme via @media (prefers-color-scheme: light) override — not the default :root.
| Token | Dark default | Role |
|---|---|---|
--background | 0 0% 8% (~#141414) | Main canvas |
--foreground | 0 0% 96% | Primary text |
--card | 0 0% 11% (~#1c1c1c) | Card surface |
--muted | 0 0% 14% | Subtle fills, chips |
--muted-foreground | 0 0% 63% | Secondary text |
--border | 0 0% 18% | Dividers |
--surface-raised | 0 0% 16% | Mono value chips |
| Token | Value | Role |
|---|---|---|
--primary | 0 89% 47% (#E50914) | CTAs, nav accent |
--primary-foreground | 0 0% 100% | Text on primary |
--ring | 0 89% 47% | Focus rings |
--nav-active-bg | 0 89% 47% / 0.12 | Sidebar active fill |
| Token | HSL | ES mapping |
|---|---|---|
--health-green | 152 69% 40% | green |
--health-yellow | 45 93% 47% | yellow |
--health-red | 0 72% 51% | red |
--health-offline | 0 0% 45% | offline, unknown |
| Token | Role |
|---|---|
--destructive | Errors (may match --health-red) |
--success | Positive confirmations |
--warning | Non-fatal cautions |
--info | Neutral informational |
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
| Class / element | Size | Weight |
|---|---|---|
Page h1 | 2rem | 700 |
Card h2 | 1.25rem | 600 |
Eyebrow .label-caps | 0.75rem | 500, uppercase, 0.08em tracking |
| Body | 0.875rem | 400 |
| Stat value | 2.5rem | 700 |
| Token | Value |
|---|---|
--radius | 0.5rem (8px — tighter than prior 12px, Hawkins pro density) |
--radius-lg | 0.75rem |
| Page padding | 2.5rem horizontal |
| Card padding | 1.5rem |
| Grid gap | 1.5rem |
| Token | Usage |
|---|---|
--shadow-sm | Resting cards |
--shadow-md | Hover cards |
--shadow-lg | Modals, dropdowns |
--glass-bg | Sidebar: hsl(var(--card) / 0.85) + backdrop-filter: blur(16px) |
--gradient-hero | Subtle radial vignette on .main-content |
| Pattern | Duration | Easing |
|---|---|---|
| Hover lift | 200ms | ease |
| Page fade | 200ms | ease |
| Skeleton shimmer | 2s | linear infinite |
| Health pulse | 2s | infinite (red/offline only) |
@media (prefers-reduced-motion: reduce) {
/* disable shimmer animation, shorten transitions */
}
Reuse these — do not redefine in scoped Vue CSS:
.btn, .btn-primary, .btn-secondary, .btn-outline.card, .glass-panel.skeleton*.label-caps.text-destructive, .text-success, .text-muted.focus-ring (for custom interactive elements):root (dark default)prefers-color-scheme: light if contrast needs adjustmenthsl(var(--token))