# Hiscox — Design System
> A provider of specialized business insurance for small businesses and entrepreneurs.
- **Canonical:** https://uiuxskills.com/library/hiscox
- **Source:** https://www.hiscox.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-07-10T21:54:15.065Z

---

---
version: alpha
name: Hiscox
tagline: Big coverage for small business
description: Tailored commercial business insurance for small businesses and entrepreneurs.
tone: professional
color-scheme: light
colors:
  primary: "#DA291C"
  secondary: "#38667D"
  background: "#FFFFFF"
  surface: "#FFFFFF"
  surface-dim: "#F8F8F8"
  surface-container: "#EDEDED"
  on-primary: "#FFFFFF"
  on-surface: "#000000"
  on-surface-variant: "#595959"
  outline: "#EDEDED"
  error: "#DA291C"
typography:
  display-lg:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 60px
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: normal
  display-md:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.15"
    letterSpacing: normal
  headline-lg:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 32px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: normal
  headline-md:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 24px
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: normal
  headline-sm:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 20px
    fontWeight: 700
    lineHeight: "1.3"
    letterSpacing: normal
  body-lg:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 18px
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: normal
  body-md:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: normal
  body-sm:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 12px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: normal
  label-md:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 14px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: normal
  label-sm:
    fontFamily: Helvetica Neue, Helvetica, Arial, sans-serif
    fontSize: 12px
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: normal
rounded:
  sm: 0px
  md: 0px
  lg: 0px
  xl: 0px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 48px
    width: auto
  button-primary-hover:
    backgroundColor: "#B81D13"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 48px
    width: auto
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: 12px 24px
    height: 48px
    width: auto
    borderColor: "{colors.primary}"
  input-field:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 48px
    width: 100%
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    height: 48px
    width: 100%
    borderColor: "{colors.primary}"
  link:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
    padding: 0px
  link-hover:
    backgroundColor: transparent
    textColor: "{colors.secondary}"
    typography: "{typography.label-md}"
    padding: 0px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
    height: auto
    width: 100%
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
    height: auto
    width: 100%
    borderColor: "{colors.outline}"
  card-container:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 24px
    height: auto
    width: 100%
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 4px 8px
    height: auto
    width: auto
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.md}"
    padding: 4px 8px
    height: auto
    width: auto
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
    width: 100%
  page-container:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-surface}"
    height: auto
    width: 100%
  swatch-on-surface-variant:
    backgroundColor: "{colors.on-surface-variant}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 2px rgba(0, 0, 0, 0.05)
  md: 0 4px 6px rgba(0, 0, 0, 0.05)
  lg: 0 10px 15px rgba(0, 0, 0, 0.05)
---

## Overview

Hiscox's visual identity is built on a foundation of trust, clarity, and professional confidence. It utilizes a striking primary red against a clean, high-contrast light background, paired with sharp, square-cornered elements that evoke stability, precision, and corporate reliability. The overall aesthetic is highly structured, minimal, and accessible, designed to reassure small business owners and entrepreneurs.

## Colors

The color strategy relies on a high-contrast, light-mode palette anchored by a bold, authoritative red to draw immediate focus to primary actions. Neutral greys and pure whites establish a clean, structured hierarchy, while a muted slate blue serves as a secondary accent to support content organization without competing with the primary brand color.

*   `colors.primary` (#DA291C): Hiscox Red, used for primary call-to-actions, brand logo, and key interactive elements to draw immediate focus.
*   `colors.secondary` (#38667D): Slate Blue, used as a secondary brand color for accents, subheadings, and supporting brand elements.
*   `colors.background` (#FFFFFF): Pure white background used for the main canvas to ensure maximum readability and clean contrast.
*   `colors.surface` (#FFFFFF): White surface color used for cards and content containers.
*   `colors.surface-dim` (#F8F8F8): Very light grey used for input fields and subtle section backgrounds to establish visual hierarchy.
*   `colors.surface-container` (inferred) (#EDEDED): Light grey container background used to group related content blocks.
*   `colors.on-primary` (#FFFFFF): White text used on primary red backgrounds to maintain high contrast and accessibility.
*   `colors.on-surface` (#000000): Deep black text used for primary headings and body copy to ensure excellent readability.
*   `colors.on-surface-variant` (inferred) (#595959): Muted grey text used for secondary descriptions and metadata.
*   `colors.outline` (#EDEDED): Light grey border color used for input fields and subtle dividers.
*   `colors.error` (#DA291C): Red used to highlight validation errors, matching the primary brand color.

## Typography

The typography system relies entirely on Helvetica Neue and clean sans-serif fallbacks to deliver a highly legible, corporate, and neutral reading experience. Bold weights are reserved for clear headers to establish a strong vertical hierarchy, while regular weights ensure body copy remains highly readable.

*   `typography.display-lg`: Large bold display font used for the main hero value proposition.
*   `typography.display-md` (inferred): Medium display size used for prominent section headers.
*   `typography.headline-lg` (inferred): Large headline used for major content sections and product titles.
*   `typography.headline-md`: Standard headline size used for sub-features and card titles.
*   `typography.headline-sm`: Small headline used for inline group titles and minor section headers.
*   `typography.body-lg` (inferred): Large body copy used for introductory paragraphs and hero subheads.
*   `typography.body-md` (inferred): Standard body copy size used for descriptions, lists, and general reading.
*   `typography.body-sm`: Small body copy used for legal disclaimers, helper text, and secondary details.
*   `typography.label-md` (inferred): Medium label size used for form inputs, navigation links, and button text.
*   `typography.label-sm` (inferred): Small label size used for badges, micro-navigation, and utility links.

## Layout

*   The layout is built on a structured grid using a base spacing scale of `spacing.sm` (8px) and `spacing.md` (16px) for tight elements, up to `spacing.2xl` (48px) for section padding.
*   The top-to-bottom page pattern follows a strict sequence: `nav`, `hero`, `agent-contact`, `interactive-recommendation`, and `footer`.
*   The hero composition pattern features a centered, bold headline and subhead positioned above a detailed line-art illustration, with a centered ZIP code input and primary red CTA button directly below the graphic.
*   Section containers span the full width of the viewport, separated by clean horizontal dividers to establish a clear vertical rhythm.
*   Responsive behavior ensures that form elements (like the ZIP code input and CTA button) stack vertically on smaller screens, and navigation links collapse into a mobile-friendly layout.

## Elevation & Depth

Hiscox employs an extremely flat design aesthetic where depth is primarily conveyed through clean borders and subtle background color shifts rather than drop shadows. Subtle single-layer shadows are inferred across three levels to support minimal depth where absolutely necessary:

*   `elevation.sm` (inferred): Inferred for minor card lift or subtle hover states.
*   `elevation.md` (inferred): Inferred for dropdown menus, tooltips, or popovers.
*   `elevation.lg` (inferred): Inferred for modal overlays or drawer containers.

## Shapes

The brand strictly avoids rounded corners, utilizing a sharp-edged geometry across almost all user interface components. A border radius of `rounded.md` (0px) is applied to buttons, input fields, and cards to reinforce a corporate, precise, and highly structured brand personality.

The only exception is the `rounded.full` (9999px) token, which is reserved exclusively for circular elements such as pill badges or specific status indicators. This stark contrast between sharp containers and occasional rounded pills helps draw focus to critical metadata.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`

### button-primary

The primary button is a solid, sharp-cornered block utilizing `{colors.primary}` for its background and `{colors.on-primary}` for text, styled with `{typography.label-md}`. It transitions to `button-primary-hover` on hover to provide clear interactive feedback. Use this component exclusively for the main call-to-action on a page, such as initiating a quote.

### button-secondary

The secondary button features a transparent background with a solid border and text colored in `{colors.primary}`. It maintains a sharp profile with `{rounded.md}` (0px) and uses `{typography.label-md}`. Use this for secondary actions that support the primary goal without competing for visual dominance.

### input-field

The input field is a structured text entry container designed with a `{colors.surface-dim}` background, a `{colors.outline}` border, and `{rounded.md}` corners. Upon receiving focus, it transitions to `input-field-focus`, changing its border to `{colors.primary}` and its background to `{colors.surface}`. Use this for all user data entry, such as ZIP code inputs.

### link

The link is an inline text element styled with `{typography.label-md}` and colored with `{colors.primary}`. On hover, it transitions to `link-hover`, changing its text color to `{colors.secondary}`. Use this for inline navigation, secondary utility links, or "Learn more" actions.

### card

The standard card is a flat container utilizing a `{colors.surface}` background, a `{colors.outline}` border, and `{rounded.md}` corners. It can be paired with `card-elevated` which applies a subtle `elevation.sm` for minimal depth. Use this to group related product offerings or informational content blocks.

### card-container

The card container is a flat, non-interactive structural block utilizing `{colors.surface-container}` as its background. It features `{rounded.md}` corners and contains padding of `{spacing.lg}`. Use this to group complex interactive tools, such as the recommendation questionnaire.

### badge

The badge is a small, solid pill container styled with `{typography.label-sm}` and `{rounded.md}` (0px). It uses `{colors.secondary}` for standard metadata and `badge-error` uses `{colors.error}` for critical alerts. Use this to display status, categories, or contextual tags.

### divider

The divider is a thin, 1px horizontal rule utilizing `{colors.outline}` as its background. It spans the full width of its parent container. Use this to separate distinct content sections and maintain a clean vertical rhythm.

### page-container

The page container is the root layout block utilizing `{colors.background}` and `{colors.on-surface}` text. It spans the full viewport width and height. Use this as the base canvas for all page templates.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-actions like `{components.button-primary}`. | Do not use `{colors.secondary}` for primary actions; reserve it for secondary accents or badges. |
| Apply `{rounded.md}` (0px) to all buttons, inputs, and card containers to maintain the sharp brand geometry. | Never apply rounded corners or border-radius values other than `{rounded.full}` to standard UI components. |
| Set body copy to `{typography.body-md}` using Helvetica Neue for optimal readability. | Avoid mixing font families; stick strictly to Helvetica Neue or system sans-serif fallbacks. |
| Use `{colors.surface-dim}` as the background for input fields to distinguish them from the white canvas. | Do not pair low-contrast text with `{colors.surface-dim}` backgrounds; always ensure readability with `{colors.on-surface}`. |
| Separate content sections using a 1px `{components.divider}` colored with `{colors.outline}`. | Never use decorative gradients or heavy borders; the color palette must remain flat and solid. |
| Display error messages and critical alerts in `{colors.error}` to ensure high visibility. | Do not use `{colors.secondary}` or muted tones for validation errors. |
| Apply `{typography.body-sm}` for legal disclaimers and secondary helper text below form fields. | Do not use `{typography.body-md}` or larger sizes for secondary metadata, which disrupts the visual hierarchy. |
| Keep cards flat by default using `{components.card}` and only apply `elevation.sm` when subtle hover feedback is required. | Do not use high elevation tokens like `elevation.lg` on standard `{components.card}` elements. |

## Content Style

*   **CTA Style:** Call-to-action labels must be action-oriented, direct, and clear. Use imperative, high-intent phrases such as "Get a Quote" or "Retrieve a quote" in title case or sentence case.
*   **Heading Tone:** Headlines must be direct, benefit-driven, and reassuring. Phrasing should focus on scale, credibility, and affordability (e.g., "Big coverage for small business") to build immediate trust with entrepreneurs.
*   **Copy Density:** Content must be highly structured and scannable. Use bulleted lists to break down complex insurance coverage details, clearly separating what is covered from what is not covered to ensure absolute transparency.

## Imagery & Icons

The brand utilizes a distinct illustrated style featuring highly detailed, black-and-white line art drawings that depict small business storefronts, local community scenes, and professional environments. To maintain visual cohesion, icons and decorative stars within these illustrations are filled with the primary brand red (`{colors.primary}`) to draw focus to key value propositions. Photographic assets should be avoided in favor of these clean, structured line drawings.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Hiscox, a professional enterprise insurance brand with a minimal, trust-forward tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.lg}` — never hardcode hex values, pixel sizes, or font names.
2. Respect only the components listed under `components:` — `{components.button-primary}`, `{components.card}`, `{components.input-field}`, etc. Do not invent variants the spec does not name.
3. Apply `{rounded.sm}` or `{rounded.md}` (both 0px) to all buttons, inputs, and cards. The only exception is `{rounded.full}` for explicitly pill-shaped elements if the spec calls for it. The brand uses no other radius values.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts — rounded corners, drop shadows on cards, gradients, secondary color on a primary CTA — surface the conflict before proceeding.
5. Follow the layout narrative: centered content, structured grid, full-width section containers separated by 1px `{components.divider}` using `{colors.outline}`.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for any interactive component the spec defines (`{components.button-primary-hover}`, `{components.input-field-focus}`, `{components.link-hover}`).
- Use the spacing scale `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Render error states in `{colors.error}` with `{typography.body-sm}` helper text.
- Use `{colors.surface-dim}` as the background for all input fields.
- Match CTA copy style — imperative, direct — per the voice spec. Do not rewrite labels the product team has provided.

**Must NOT:**
- Invent colors, font scales, or radius values absent from the spec.
- Apply drop shadows or elevation treatments to `{components.card}`.
- Use decorative gradients or mixed font families.
- Use `{colors.secondary}` for primary actions.
- Rewrite, replace, or invent page copy, headings, navigation items, or button labels.
- Alter navigation structure or page sections as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface-container}` for grouped content blocks and `{colors.surface-dim}` for input areas.
- Tokens marked "(inferred)" are visual approximations; if an authoritative token file exists, it takes precedence.
- Default to mobile-first layout with one breakpoint at 768px when the spec's layout notes are silent on responsive behavior.