Specify

# Specify — Style Reference
> Subdued white canvas, violet sparks
Theme: light

Specify employs a light-themed interface with subtle gray surfaces that provide depth without harsh contrast. Prominent, controlled typography, primarily in a dark charcoal, guides the user, punctuated by a single vibrant violet accent color that denotes interactive elements and brand presence. Components are gently rounded and softly shadowed, creating a friendly yet precise tool-like aesthetic for a design token engine.

## Colors
| Name | Value | Role |
|------|-------|------|
| White Canvas | `#ffffff` | Page backgrounds, elevated card surfaces, primary text on dark backgrounds |
| Charcoal Text | `#000000` | Primary text, prominent borders, icons |
| Carbon Surface | `#1a1d1e` | Secondary dark surfaces, subtle dark buttons, dark section backgrounds |
| Ash Gray | `#f6f7f9` | Section backgrounds, subtle input fields, utility components |
| Cloud Gray | `#ebedef` | Muted section backgrounds, subtle dividers |
| Medium Gray | `#8d8e8f` | Secondary text, helper text, borders for secondary elements |
| Graphite | `#5f6162` | Muted text, less prominent dividers |
| Subtle Dark Background | `#151718` | Hero section background, dark mode surfaces when switching themes or for specific components |
| Specify Violet | `#624de3` | Violet outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |
| Highlight Violet | `#8d4af7` | Accent for links and decorative elements, often in gradients; Decorative background gradient, typically in hero sections or feature blocks |
| Highlight Blue | `#1d58c0` | Accent for links and decorative elements; Decorative background gradient, typically in hero sections or feature blocks |
| Highlight Green | `#009639` | Accent for links and decorative elements; Decorative background gradient, typically in hero sections or feature blocks |
| Linear Gradient Violet | `#6e56cf` | Decorative background gradient for banner elements, adds a subtle highlight |

## Typography
| Family | Role |
|--------|------|
| sans-serif | sans-serif — detected in extracted data but not described by AI |
| Inter | Primary typeface for all UI text, headings, and body copy. Its functional yet friendly geometry anchors the interface. Weights 600 and 700 are used for emphasized elements and larger headings respectively, while 400 and 500 cover general text and subheadings. |
| Fira Code | Monospace typeface exclusively for code snippets, token values, or technical labels where consistent character width is key. |
| Inter-Medium | Inter-Medium — detected in extracted data but not described by AI |
| Inter-SemiBold | Inter-SemiBold — detected in extracted data but not described by AI |
| Inter-Bold | Inter-Bold — detected in extracted data but not described by AI |