---
name: "Cent"
description: "Sleek, high-precision preventive healthcare design system pairing pure light canvas backgrounds and subtle lilac tint surfaces with high-contrast dark controls and rich royal plum gradients."
version: "1.0"
colors:
  canvas: "#ffffff"
  surface-soft: "#f7f2fd"
  surface-muted: "#f5f5f7"
  surface-alt: "#f4f3f0"
  ink: "#161616"
  ink-strong: "#000000"
  body: "#2a2a2a"
  body-muted: "#6b6b6b"
  primary: "#000000"
  primary-strong: "#161616"
  on-primary: "#ffffff"
  accent-plum: "#3e2c5f"
  accent-plum-deep: "#241a38"
  accent-violet: "#8656bd"
  accent-purple-light: "#f6edff"
  accent-purple-soft: "#f4edfc"
  accent-lavender: "#decaf4"
  accent-lime: "#e4edba"
  accent-sky: "#71a4be"
  hairline: "#e2e8f0"
  hairline-soft: "#efedf3"
  success: "#349864"
  warning: "#ffa000"
  destructive: "#e11d48"
typography:
  display-hero:
    fontFamily: "Gilroy, Inter, sans-serif"
    fontSize: "50px"
    fontWeight: "600"
    lineHeight: "1.32"
    letterSpacing: "-0.02em"
  heading-xl:
    fontFamily: "Gilroy, Inter, sans-serif"
    fontSize: "40px"
    fontWeight: "600"
    lineHeight: "1.3"
    letterSpacing: "-0.02em"
  heading-lg:
    fontFamily: "Gilroy, Inter, sans-serif"
    fontSize: "32px"
    fontWeight: "600"
    lineHeight: "1.3"
    letterSpacing: "-0.01em"
  heading-md:
    fontFamily: "Gilroy, Inter, sans-serif"
    fontSize: "20px"
    fontWeight: "600"
    lineHeight: "1.4"
    letterSpacing: "0em"
  body-lg:
    fontFamily: "Gilroy, Inter, sans-serif"
    fontSize: "21.33px"
    fontWeight: "400"
    lineHeight: "1.5"
    letterSpacing: "0em"
  body-md:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.5"
    letterSpacing: "0em"
  label:
    fontFamily: "Gilroy, Inter, sans-serif"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "1.25"
    letterSpacing: "0.02em"
  caption:
    fontFamily: "Figtree, sans-serif"
    fontSize: "12px"
    fontWeight: "500"
    lineHeight: "1.4"
    letterSpacing: "0.06em"
rounded:
  none: "0px"
  sm: "4px"
  md: "8px"
  card: "16px"
  pill: "9999px"
spacing:
  section-gap: "124px"
  container-max: "1440px"
  content-width: "1100px"
  grid-gap: "24px"
  card-padding: "24px"
  button-padding: "12px 24px"
components:
  header-nav:
    background: "{colors.canvas}"
    height: "88px"
    borderColor: "{colors.hairline-soft}"
    textColor: "{colors.ink-strong}"
  primary-button:
    background: "{colors.primary}"
    color: "{colors.on-primary}"
    border: "1px solid #c2c2c2"
    borderRadius: "{rounded.md}"
    padding: "{spacing.button-padding}"
    fontWeight: "600"
  secondary-button:
    background: "transparent"
    color: "{colors.primary-strong}"
    border: "1px solid {colors.primary-strong}"
    borderRadius: "{rounded.sm}"
    padding: "{spacing.button-padding}"
    fontWeight: "600"
  condition-card:
    background: "linear-gradient(180deg, #f7f7f7 0%, #ffffff 100%)"
    borderColor: "{colors.hairline}"
    borderRadius: "{rounded.md}"
    padding: "12px 8px 24px 8px"
    imageBg: "{colors.accent-purple-light}"
  ticker-bar:
    background: "#131310"
    textColor: "#f7f4ee"
    padding: "24px 0px"
  purpose-card:
    background: "{colors.canvas}"
    borderRadius: "{rounded.card}"
    borderColor: "{colors.hairline-soft}"
  membership-card:
    background: "{colors.surface-soft}"
    borderRadius: "{rounded.card}"
    borderColor: "{colors.hairline-soft}"
    padding: "32px"
  footer:
    background: "{colors.accent-plum-deep}"
    textColor: "{colors.canvas}"
    borderColor: "rgba(255, 255, 255, 0.1)"
source: "https://cent.health/"
captured: "2026-09-25T03:03:18.745Z"
---

# DESIGN.md: Cent

## Source

- URL: https://cent.health/
- Captured: 2026-09-25T03:03:18.745Z
- Evidence: Firecrawl branding, HTML, images, links, markdown, and full-page screenshot

## Reference Screenshot

![Full-page screenshot of Cent](./screenshot.png)

## Design Summary

Cent uses a high-end medical technology aesthetic built around clean white/light neutral canvases, dark charcoal ticker accents, soft purple category cards, and deep royal plum hero sections.

## Visual Language

- Light backdrop canvas (#FFFFFF / #F5F5F7) contrasted with rich plum brand panels (#3E2C5F to #241A38).
- Soft lilac containers (#F6EDFF) and light tint surface cards (#F7F2FD) for key medical diagnostic domains.
- Dark continuous marquee strip (#131310) showcasing over 300 detectable health conditions.
- High-contrast solid black primary controls ('Book Now') paired with subtle outlined secondary triggers ('Request a call back').
- Clean typographic hierarchy mixing Gilroy display headings with Inter body copy.

## Design Tokens

The normative colors, typography, radii, spacing, and component tokens are defined in the YAML frontmatter above.

## Spacing And Layout

- Split hero layout featuring left-aligned copy and metrics paired with immersive right-hand video/imagery.
- 4-column category card grids with top rounded image preview blocks.
- Stacked vertical feature blocks with prominent numerical step counters (01, 02, 03).
- Side-by-side comparison tables highlighting Cent protocols versus traditional checkup packages.

## Components

- Primary buttons use solid black (#000000) fill with crisp white text and rounded corners.
- Secondary CTA controls employ transparent backgrounds with dark hairline borders.
- Metric callouts display bold stat numbers directly over muted micro-captions.
- Accordions and card surfaces use hairline dividers (#E2E8F0) to maintain high legibility.

## Content Style

- Headlines lead with concise preventive care value propositions.
- Selective use of brand purple hue (#8D78A6) within titles to accent key terms.
- Data metrics focus on reassuring impact statistics (e.g. 1 in 3 members, 300+ risks, 7000+ scans).

## Agent Build Instructions

- Construct buttons with dark `#000000` backgrounds and `#FFFFFF` foreground text for primary actions.
- Use background linear gradients `linear-gradient(152.79deg, #3e2c5f 0%, #241a38 100%)` for rich plum panels.
- Apply background fill `#f6edff` on visual thumbnail containers within medical category cards.
- Set default document fonts to Gilroy primary with Inter body fallback.

## Evidence And Confidence

- Observed: Navigation items rendered with Gilroy Medium at 21.33px size.
- Observed: Primary action 'Book Now' uses black background `#000000` with white text.
- Observed: Ticker marquee strip uses dark background `#131310` with light text `#f7f4ee` at 65% opacity.
- Observed: Hero title highlights 'Most Advanced' in soft purple `#8d78a6`.
- Inferred: CSS variables establish brand plum gradient stops `#3e2c5f` and `#241a38`.

## Rerun Inputs

- workflow: pixloop-design-md-url-analysis
- source_url: https://cent.health/

---

Generated by Pixloop Design.md from publicly observable design evidence. Third-party trademarks and assets remain the property of their respective owners.