herding.app

# herding.app — Style Reference
> Graphite workshop under a soft spotlight. Surfaces are not black, but deep charcoal, illuminated by concentrated white text and a single vibrant highlight for interactive elements.
Theme: dark

This design system evokes a digital craftsman's workshop feel, with a muted dark palette and subtle elevation shifts creating a sense of depth and organization. The interplay of soft, almost invisible backgrounds with crisp white typography and geometric accents defines a precise yet approachable atmosphere. Rounded corners on interactive elements provide a gentle contrast to the otherwise stark, modular structure, hinting at user-friendliness within a powerful system.

## Colors
| Name | Value | Role |
|------|-------|------|
| Storm Slate | `#232320` | Page background, primary card surfaces, foundational UI elements. |
| Deep Graphite | `#1c1c1a` | Background for secondary panels and sub-sections, indicating a subtle recess or grouping. |
| Ash Stone | `#2e2e2b` | Elevated card backgrounds, slightly lighter than the base Storm Slate, indicating a raised surface. |
| Iron Oxide | `#35352f` | Tertiary card backgrounds or hover states, providing a slightly warmer, more textured feel. |
| Zinc Gray | `#3e3e38` | Lightest background for elevated surfaces or active states, offering subtle distinction. |
| Quartz Dust | `#45453` | Button backgrounds for secondary actions, blending into the dark theme. |
| Ghost White | `#fffffe` | Primary text, headings, icons, interactive element labels — the dominant foreground color that cuts through the dark background. |
| Silver Thread | `#a3a29c` | Secondary text, subtle borders, inactive states, providing high contrast without being pure white. |
| Whisper Gray | `#75746c` | Descriptive text, icon details, placeholder text — a softer neutral that recedes slightly. |
| Ember White | `#fefeda0e` | Low-opacity button background that suggests interaction without high contrast. |
| Active Charcoal | `#7f7e77` | Solid background for primary interactive buttons, indicating an active or selected state. |

## Typography
| Family | Role |
|--------|------|
| Styrene | Universal font for all text elements: headings, body text, buttons, and links. Its geometric, slightly condensed form supports the precise, structured aesthetic and makes technical content approachable. |