---
name: "Remixed Resonance"
mode: "dark"
---
# Remixed Resonance
## Visual theme and atmosphere
Technical, precise, modular, and low-light.
A modular dark dashboard system with focused emerald and cyan signals.
## Color palette and roles
- **Emerald Signal (#10B981)**: Primary action and positive state.
- **Cyan Logic (#0EA5E9)**: Secondary action and data accent.
- **Void (#050507)**: Primary canvas.
- **Zinc Surface (#18181B)**: Panels and cards.
- **White (#FFFFFF)**: Primary text.
- **Muted Zinc (#A1A1AA)**: Secondary text.
## Typography rules
- **Display LG**: Inter, 600, 64px. Product statements.
- **Body MD**: Inter, 400, 16px. Application copy.
- **Label MD**: JetBrains Mono, 500, 12px. Technical labels.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 360ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Preserve modular panel density and clear information hierarchy.
- Use emerald for primary action and cyan for data emphasis.
- Keep animation subordinate to system state.
- Do not flatten the layout into generic equal cards.
---
name: "Remixed Resonance"
mode: "dark"
---
# Remixed Resonance
## Visual theme and atmosphere
Technical, precise, modular, and low-light.
A modular dark dashboard system with focused emerald and cyan signals.
## Color palette and roles
- **Emerald Signal (#10B981)**: Primary action and positive state.
- **Cyan Logic (#0EA5E9)**: Secondary action and data accent.
- **Void (#050507)**: Primary canvas.
- **Zinc Surface (#18181B)**: Panels and cards.
- **White (#FFFFFF)**: Primary text.
- **Muted Zinc (#A1A1AA)**: Secondary text.
## Typography rules
- **Display LG**: Inter, 600, 64px. Product statements.
- **Body MD**: Inter, 400, 16px. Application copy.
- **Label MD**: JetBrains Mono, 500, 12px. Technical labels.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 360ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Preserve modular panel density and clear information hierarchy.
- Use emerald for primary action and cyan for data emphasis.
- Keep animation subordinate to system state.
- Do not flatten the layout into generic equal cards.
---
name: "Remixed Resonance"
mode: "dark"
---
# Remixed Resonance
## Visual theme and atmosphere
Technical, precise, modular, and low-light.
A modular dark dashboard system with focused emerald and cyan signals.
## Color palette and roles
- **Emerald Signal (#10B981)**: Primary action and positive state.
- **Cyan Logic (#0EA5E9)**: Secondary action and data accent.
- **Void (#050507)**: Primary canvas.
- **Zinc Surface (#18181B)**: Panels and cards.
- **White (#FFFFFF)**: Primary text.
- **Muted Zinc (#A1A1AA)**: Secondary text.
## Typography rules
- **Display LG**: Inter, 600, 64px. Product statements.
- **Body MD**: Inter, 400, 16px. Application copy.
- **Label MD**: JetBrains Mono, 500, 12px. Technical labels.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 360ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Preserve modular panel density and clear information hierarchy.
- Use emerald for primary action and cyan for data emphasis.
- Keep animation subordinate to system state.
- Do not flatten the layout into generic equal cards.
---
name: "Remixed Resonance"
mode: "dark"
---
# Remixed Resonance
## Visual theme and atmosphere
Technical, precise, modular, and low-light.
A modular dark dashboard system with focused emerald and cyan signals.
## Color palette and roles
- **Emerald Signal (#10B981)**: Primary action and positive state.
- **Cyan Logic (#0EA5E9)**: Secondary action and data accent.
- **Void (#050507)**: Primary canvas.
- **Zinc Surface (#18181B)**: Panels and cards.
- **White (#FFFFFF)**: Primary text.
- **Muted Zinc (#A1A1AA)**: Secondary text.
## Typography rules
- **Display LG**: Inter, 600, 64px. Product statements.
- **Body MD**: Inter, 400, 16px. Application copy.
- **Label MD**: JetBrains Mono, 500, 12px. Technical labels.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 360ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Preserve modular panel density and clear information hierarchy.
- Use emerald for primary action and cyan for data emphasis.
- Keep animation subordinate to system state.
- Do not flatten the layout into generic equal cards.
---
name: "Remixed Resonance"
mode: "dark"
---
# Remixed Resonance
## Visual theme and atmosphere
Technical, precise, modular, and low-light.
A modular dark dashboard system with focused emerald and cyan signals.
## Color palette and roles
- **Emerald Signal (#10B981)**: Primary action and positive state.
- **Cyan Logic (#0EA5E9)**: Secondary action and data accent.
- **Void (#050507)**: Primary canvas.
- **Zinc Surface (#18181B)**: Panels and cards.
- **White (#FFFFFF)**: Primary text.
- **Muted Zinc (#A1A1AA)**: Secondary text.
## Typography rules
- **Display LG**: Inter, 600, 64px. Product statements.
- **Body MD**: Inter, 400, 16px. Application copy.
- **Label MD**: JetBrains Mono, 500, 12px. Technical labels.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 80px.
- Card corners: 16px.
- Control corners: 8px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 150ms; composed transitions last 360ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Preserve modular panel density and clear information hierarchy.
- Use emerald for primary action and cyan for data emphasis.
- Keep animation subordinate to system state.
- Do not flatten the layout into generic equal cards.
