Checkly

# Checkly — Style Reference
> Midnight Terminal Canvas
Theme: dark

Checkly employs a dark-mode command center aesthetic with a focus on code-centric visualization. Deep blues and near-black surfaces are punctuated by vivid blue accents for interactive elements and critical information. Typography is precise and utilitarian, prioritizing legibility within code blocks and clean hierarchy for display text. Components feature subtle elevation and controlled use of rounded corners, creating a sense of understated robustness.

## Colors
| Name | Value | Role |
|------|-------|------|
| Deep Space Blue | `#041734` | Primary background for hero sections and key content blocks, dark button fills |
| Midnight Ink | `#002652` | Text on lighter dark surfaces, secondary navigation text, active states |
| Charcoal Slate | `#0f172a` | Darkest card backgrounds, deeply nested surface elements |
| Storm Gray | `#374151` | Muted text for secondary information, card borders, inactive navigation links |
| Dark Steel | `#1f2937` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |
| Light Ash | `#a7babe` | Body text on dark backgrounds, helper text, link text in paragraph content |
| Electric Blue | `#0075ff` | Blue text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |
| Subtle Gray | `#445458` | Icon fills, very subtle secondary text on dark surfaces |
| Navy Black | `#061220` | Deep background for elevated cards and distinct content containers |
| Code Block Gray | `#1a1f36` | Background for code snippets and console-like sections |
| Silver Pine | `#64748b` | Placeholder text, very subtle tertiary text details |
| Deep Ocean Blue | `#001027` | Background for deeply embedded cards or sections requiring higher contrast from surrounding dark elements |
| Cloud Gray Border | `#cfdfec` | Light border for outline buttons |
| Vivid Blue | `#008ef0` | Accent for filled action buttons, subtle highlight states |
| Success Green | `#4ade80` | Green text accent for links, tags, and emphasized short phrases. Use as a supporting accent, not as a status color |
| Lightest Gray | `#e5e7eb` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |
| Pure Black | `#000000` | Brand text on light backgrounds, icon fills where stark contrast is needed |
| Pure White | `#ffffff` | Primary text on dark backgrounds, backgrounds for light-themed sections, essential button fills; Specialized button background with a subtle gradient hint |
| Mid Gray | `#cccccc` | Muted text, subtle borders, inactive elements |
| Dark Overlay | `#bfbfbf` | Shadow color for card elevation |
| Darkest Card | `#0d1117` | Specific, very dark card background |
| Medium Gray Border | `#d1d5db` | Default input borders, inactive card borders |

## Typography
| Family | Role |
|--------|------|
| Inter | Primary typeface for all brand copy, headings, body text, and UI components. It establishes a modern and professional tone. |
| ui-monospace | Used for command-line instructions, code snippets, and areas where monospace formatting is essential for technical accuracy and readability. |
| JetBrains Mono | Specialized monospace font primarily used for displaying code in product screenshots and dedicated code blocks, providing enhanced legibility for programming content. Its presence signifies the brand's developer-centric focus. |
| Consolas | Consolas — detected in extracted data but not described by AI |