# Creditinfo Design System

> High-contrast institutional precision anchored by a singular brand red and deep obsidian surfaces.

**Source:** https://creditinfo.com | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Creditinfo utilizes a "monochrome-plus-one" strategy where a stark palette of Obsidian (#151a27) and White (#ffffff) is punctuated exclusively by a high-voltage Brand Red (#e2080a). The system leans heavily on `system-ui` for high-scale display headings, reaching up to 88px, while shifting to Open Sans for long-form body copy to maintain legibility. Layouts are characterized by significant vertical breathing room (96px to 128px section gaps) and a mix of sharp edges for containers and ultra-rounded 40px "pill" geometry for primary actions.

## Signature DNA
1. **The Red Punctuation:** Brand Red (#e2080a) is reserved strictly for primary CTAs and critical semantic markers, creating a high-signal environment against neutral backgrounds.
2. **Obsidian Foundations:** Deep navy-black (#151a27) serves as the primary text color and the "Power" section background, providing more depth than a standard neutral black.
3. **Institutional Scale:** Headlines utilize massive 88px and 56px weights in `system-ui` bold, establishing a sense of global authority and scale.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--white` | #ffffff | Primary canvas, button text, card background | 41 | 0.8 | computed_style |
| `--gray` | #a6a7ab | Secondary text, subtle surface backgrounds | 4 | 1.0 | css_variable |
| `--light-gray` | #eeeeee | Section alternating backgrounds | 1 | 1.0 | css_variable |
| `--bg-gray` | #f7f7f7 | Declared background token | - | 1.0 | declared_token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--brand-red` | #e2080a | Primary CTA background, emphasis text, borders | 35 | 1.0 | css_variable |
| `--black` | #151a27 | Primary text, footer background, dark hero sections | 107 | 1.0 | css_variable |
| `--red-second` | #8a0002 | Deep red (decorative_only) | - | 1.0 | declared_token |
| `--teal` | #0c9cb2 | Accent (decorative_only) | - | 1.0 | declared_token |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--brand-red` | #e2080a | Primary action / Error / Alert |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| system-ui | 300, 400, 600, 700 | Display, Headings, Buttons | Inter | System Default |
| Open Sans | 400, 600, 700 | Body, Navigation, Labels | Open Sans | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display-mega}` | 88px | 92.8px | normal | 700 | Homepage hero | `h1.text-size-88` |
| `{text.display-xl}` | 56px | 48px | normal | 700 | Section headers | `h2.text-size-56` |
| `{text.display-lg}` | 40px | 48px | normal | 700 | Sub-section headers | `h2.text-size-40` |
| `{text.heading-md}` | 24px | 32px | normal | 400 | Intro paragraphs | `p.text-size-24` |
| `{text.heading-sm}` | 22px | 33px | normal | 700 | Card titles | `.insights-card-heading` |
| `{text.button}` | 20px | 16px | normal | 600 | Primary CTA | `a.button.w-button` |
| `{text.body-lg}` | 18px | 25.6px | normal | 400 | Featured body | `p.text-size-18` |
| `{text.body}` | 16px | 24px | normal | 400 | Default copy | `div.nav_component` |
| `{text.caption}` | 12px | 18px | normal | 700 | Metadata/Dates | `.insights-card-date` |

### Principles
1. **Heading Weight Consistency:** All major display levels (40px+) use weight 700.
2. **Body Sans-Serif Shift:** UI elements use system-ui, but narrative content shifts to Open Sans for improved digital reading rhythm.
3. **Tight Button Leading:** Buttons use a 16px line-height on 20px text, creating a vertically centered, compact label.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 12 |
| `{space.sm}` | 12px | 11 |
| `{space.md}` | 24px | 10 |
| `{space.lg}` | 32px | 3 |
| `{space.section}` | 96px | 4 |
| `{space.hero}` | 128px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Default containers, text buttons | 131 occurrences |
| `{radius.md}` | 8px | UI Surfaces | 30 occurrences |
| `{radius.lg}` | 16px | Content Cards | 3 occurrences |
| `{radius.pill}` | 40px | Primary Action Buttons | 8 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Standard sections | Default |
| Raised | rgba(54, 54, 54, 0.1) 0px 4px 24px 0px | Insights/Testimonial Cards | `.insights-card` |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site-wide CTA
**Pages observed:** https://creditinfo.com
**Spec:** Background: #e2080a | Text: #ffffff | Radius: 40px | Padding: 12px 24px | Typography: 20px/600
**States observed:** Default | Hover: captured

#### Text Button
**Role:** Secondary navigation/inline actions
**Pages observed:** https://creditinfo.com
**Spec:** Background: transparent | Text: #e2080a | Border: none | Radius: 0px | Typography: 20px/400

### Tier 2: Patterns
#### Insights Card
**Role:** Content feed item
**Pages observed:** https://creditinfo.com
**Spec:** Background: #ffffff | Text: #151a27 | Radius: 16px | Padding: 32px 24px | Shadow: 0px 4px 24px rgba(54,54,54,0.1)

#### Navigation Bar
**Role:** Global header
**Pages observed:** https://creditinfo.com
**Spec:** Background: #ffffff | Text: #151a27 | Height: 80px (approx) | Typography: 16px Open Sans

### Tier 3: Surface-specific
#### Power Section
**Role:** High-impact data visualization
**Pages observed:** https://creditinfo.com
**Spec:** Background: #e2080a | Text: #ffffff | Padding: 96px vertical | Typography: 56px bold headings

#### Footer
**Role:** Global site closure
**Pages observed:** https://creditinfo.com
**Spec:** Background: #151a27 | Text: #ffffff | Padding: 64px top | Typography: 14px body-sm

## Layout
| Property | Value |
|---|---|
| Section Gap | 96px - 128px |
| Container Max-Width | 1200px |
| Card Grid | 3-column / 4-column |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Headings scale down; Card padding reduces to 16px; Navigation collapses to hamburger. |

## Imagery & decoration
- **Dot-matrix Maps:** Used as background textures to signify global reach.
- **Iconic Diagrams:** Red-accented line art icons for service categories.
- **Avoids:** Soft gradients, drop shadows on text, or rounded corners on main section containers.

## Do's
- Use #e2080a for all primary "Get in touch" or "See more" actions.
- Maintain a minimum 96px vertical gap between major content bands.
- Use 40px radius for primary buttons to contrast against sharp-edged sections.
- Set display headings (40px+) in `system-ui` bold.
- Use #151a27 for footer backgrounds to anchor the page.

## Don'ts
- **Wrong:** Using #0c9cb2 (Teal) for a primary CTA. **Right:** Use #e2080a. **Reason:** Teal is a decorative token, not a brand primary.
- **Wrong:** Applying 16px radius to all sections. **Right:** Keep section backgrounds sharp (0px). **Reason:** Rounded corners are reserved for cards and buttons.
- Do not use Open Sans for Display Mega (88px) headings.
- Do not use pure #000000 for text; use the Obsidian #151a27.

## Similar brands
- Experian
- Dun & Bradstreet
- Reuters
- Bloomberg

## Quick start

```css
/* CSS Variables */
:root {
  --ci-brand-red: #e2080a;
  --ci-obsidian: #151a27;
  --ci-white: #ffffff;
  --ci-gray: #a6a7ab;
  --radius-pill: 40px;
  --shadow-card: 0px 4px 24px 0px rgba(54, 54, 54, 0.1);
}
```

## Agent prompt examples
- "Generate a primary CTA button using Creditinfo Red #e2080a, white text, 20px semi-bold system-ui font, and a 40px border radius."
- "Create a content card with a white background, 16px border radius, and the specific Creditinfo shadow: 0px 4px 24px rgba(54,54,54,0.1)."
- "Design a hero section with a 128px top padding and a 88px bold system-ui heading in Obsidian #151a27."

## Known gaps
- Hover state hex values for the primary red button were not explicitly captured in the token set.
- Secondary brand colors (Teal, Dark Blue) appear in tokens but lack specific component mapping in the analyzed pages.
- Form input styles (focus states, error borders) were not present on the analyzed homepage.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://creditinfo.com | 1440px | 2026-06-06 |
| Mobile Home | https://creditinfo.com | 390px | 2026-06-06 |