# Coredial Design System

> High-contrast corporate utility anchored by deep navy typography and vibrant sky-blue interactive signals on a stark white canvas.

**Source:** https://coredial.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Coredial utilizes a "monochrome-plus" system where the primary canvas and structural elements are strictly achromatic (#ffffff), while brand identity is carried through a specific pairing of Primary Dark Blue (#244061) for all semantic text and Primary Sky Blue (#01c4ff) for high-voltage CTAs. Typography is a dual-font system: Raleway provides a light, airy display feel at weight 300, while Arimo handles dense body information and functional labels. The interface is characterized by sharp 0px radii on primary structural elements, contrasted by extreme pill-shaped 50px radii on primary action buttons.

## Signature DNA
1. **The Sky-Blue Signal** (#01c4ff used exclusively for primary actions and accent highlights against the #244061 text base).
2. **Light-Weight Display** (Raleway at weight 300 for large-scale H2 headings, creating an open, modern corporate aesthetic).
3. **Shadowed Accordion Containers** (White surfaces elevated by a specific 10px blur shadow `rgba(0, 0, 0, 0.29)`, used to organize high-density FAQ content).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, content surfaces, button text | 26 | 1 | `--white` |
| `{colors.black}` | `#000000` | Footer widget text | 1 | 1 | `--wp--preset--color--black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.primary-dark-blue}` | `#244061` | Primary text, headings, navigation links | 72 | 1 | `--primaryDarkBlue` |
| `{colors.primary-sky-blue}` | `#01c4ff` | Primary CTA background, accent highlights | 14 | 1 | `--primarySkyBlue` |
| `{colors.footer-bg}` | `#2d3958` | Footer section background | 1 | 1 | `--wp--preset--color--fl-footer-bg` |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{colors.error}` | `#cf2e2e` | Validation/Error states |
| `{colors.warning}` | `#fcb900` | Warning/Amber states |
| `{colors.success}` | `#00d084` | Success/Green states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Raleway | 300, 500, 700 | Display, Headings, UI Labels | Raleway (Google Fonts) | SIL OFL |
| Arimo | 400, 600, 700 | Body, Subheadings, Buttons | Arimo (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-lg}` | 50px | 65px | -1px | 700 | Hero H1 | `h1.fl-heading` |
| `{text.display-md}` | 50px | 60px | normal | 300 | Section H2 | `h2.fl-heading` |
| `{text.display-sm}` | 40px | 48px | normal | 300 | Secondary H2 | `h2.fl-heading` |
| `{text.heading-sm}` | 26px | 33.8px | normal | 500 | Accordion Labels | `div.fl-accordion-button` |
| `{text.subheading}` | 19px | 28.5px | 1px | 700 | Section Labels | `h4.fl-heading` |
| `{text.body-lg}` | 19px | 24.7px | normal | 600 | Intro Paragraphs | `p:nth-of-type(1)` |
| `{text.body-md}` | 16px | 20.8px | normal | 400 | Standard Body | `a.fl-screen-reader-text` |
| `{text.button}` | 16px | 18px | normal | 400 | CTA Labels | `a.fl-button` |

### Principles
1. **Display weight inversion:** Use 700 weight for the main hero H1, but drop to 300 weight for all subsequent section H2s to maintain "breathability."
2. **Arimo for Utility:** All interactive elements (buttons, links, form text) must use Arimo to ensure legibility.
3. **Tight Display Tracking:** Large H1 display text uses -1px letter spacing to maintain visual density.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 9 |
| `{space.sm}` | 16px | 10 |
| `{space.md}` | 30px | 8 |
| `{space.lg}` | 35px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Default buttons, containers | `radius: 0px` |
| `{radius.sm}` | 6px | Accordion cards, inputs | `radius: 6px` |
| `{radius.pill}` | 50px | Primary Sky Blue CTAs | `radius: 50px` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.29) 0px 0px 10px 0px` | FAQ Accordions, Content Cards | `shadow: rgba(0, 0, 0, 0.29)...` |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary "high-voltage" call to action.
**Pages observed:** coredial.com
**Spec:** Background `{colors.primary-sky-blue}` (#01c4ff) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (50px) / Padding 20px 34px / Typography `{text.button}` (16px Arimo)
**States observed:** Default | Hover: `{colors.fl-accent-hover}` (#00b4eb) | Focus/Active/Disabled: Not captured

#### Standard Button
**Role:** Secondary or utility actions.
**Pages observed:** coredial.com
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.primary-dark-blue}` (#244061) / Border 1px `{colors.primary-dark-blue}` / Radius `{radius.none}` (0px) / Padding 35px
**States observed:** Default | Hover/Active/Disabled: Not captured

### Tier 2: Patterns
#### FAQ Accordion
**Role:** Organizing high-density information.
**Pages observed:** coredial.com
**Spec:** Background `{colors.white}` (#ffffff) / Radius `{radius.sm}` (6px) / Shadow `{shadow.card}` / Typography `{text.heading-sm}` (26px Raleway 500)
**States observed:** Default | Open: Not captured

### Tier 3: Surface-specific
#### Top Bar
**Role:** Global utility navigation.
**Pages observed:** coredial.com
**Spec:** Background `{colors.white}` (#ffffff) / Text `{colors.primary-dark-blue}` (#244061) / Typography 14px Arimo
**States observed:** Default | Hover: `{colors.fl-topbar-hover}` (#00b4eb)

## Layout
| Property | Value |
|------|-------|
| Max-width | 1100px |
| Section Padding | 80px (vertical) |
| Grid Gutter | 30px |

## Do's
- Use `{colors.primary-dark-blue}` (#244061) for all primary body text and headings.
- Apply `{text.display-md}` (Raleway 300) for section titles to create an airy feel.
- Use `{radius.pill}` (50px) only for primary Sky Blue buttons.
- Ensure all FAQ items are contained within `{shadow.card}` elevated white blocks.
- Pair Sky Blue buttons with white text for 4.5:1+ contrast.

## Don'ts
- **Wrong:** Using Sky Blue (#01c4ff) for body text. **Right:** Use Dark Blue (#244061). **Reason:** Legibility and brand hierarchy.
- **Wrong:** Applying rounded corners to standard utility buttons. **Right:** Keep at `{radius.none}` (0px).
- **Wrong:** Using Raleway for long-form body copy. **Right:** Use Arimo. **Reason:** Arimo's x-height is optimized for screen legibility.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary-dark-blue: #244061;
  --primary-sky-blue: #01c4ff;
  --white: #ffffff;
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Arimo', sans-serif;
  --shadow-card: 0px 0px 10px 0px rgba(0, 0, 0, 0.29);
}
```

## Agent prompt examples
- "Create a primary CTA button using Coredial's Sky Blue (#01c4ff), white text, and a 50px border radius."
- "Generate a section header using Raleway at weight 300, size 50px, in Coredial Dark Blue (#244061)."
- "Build a content card with a 6px border radius, white background, and a 10px blur shadow at 29% opacity."

## Known gaps
- Hover and active states for the standard 0px radius button were not captured in the source.
- Mobile-specific typography scaling for H1 displays was not explicitly declared in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://coredial.com | Desktop 1440px | 2026-06-06 |