Design System
Preologi Design System
Production-grade component library for the Preologi WordPress theme. All tokens, components, and patterns are defined with vanilla CSS custom properties and semantic HTML.
01 — Design Tokens
Core custom properties that define the visual language of the Preologi system.
Colours
--preologi-colour-primary
#A040E0
--preologi-colour-primary-dark
#6A5AE0
--preologi-colour-primary-light
#C855E8
--preologi-colour-accent
#EE4BE4
--preologi-colour-accent-warm
#FF6F61
--preologi-colour-accent-blue
#80C8F8
--preologi-colour-secondary
#4F46E5
--preologi-colour-ink
#0E0B1A
--preologi-colour-bg-soft
#FAF8FF
--preologi-gradient-primary
135deg palette
--preologi-gradient-button
Button gradient
--preologi-gradient-text
3-stop spectrum
Typography
heading-1 · var(--preologi-text-4xl) · clamp(2.0rem, 4vw + 0.5rem, 3.6rem)
The headline
heading-2 · var(--preologi-text-3xl) · clamp(1.75rem, 2.5vw + 0.5rem, 2.25rem)
Section heading
heading-3 · var(--preologi-text-2xl) · 24px
Subsection heading
heading-4 · var(--preologi-text-xl) · 20px
Card title
body-lg · var(--preologi-text-lg) · 17px
Larger body text for ledes and summaries.
body-base · var(--preologi-text-base) · 15px
Standard body text used throughout the site. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Gradient Text
heading-1 + gradient-text · For hero headlines and key messaging
A new frontier in early cancer detection
Gradient text is applied to an inline span within the heading — this gives the gradient enough horizontal space to display the full spectrum.
heading-2 + gradient-text · For section headers
A bold new era of cancer screening
Use on the key phrase within the heading, not the entire heading.
Spacing
--preologi-space-1
4px
--preologi-space-2
8px
--preologi-space-3
12px
--preologi-space-4
16px
--preologi-space-5
20px
--preologi-space-6
24px
--preologi-space-8
32px
--preologi-space-10
40px
--preologi-space-12
48px
--preologi-space-16
64px
--preologi-space-20
80px
--preologi-space-24
96px
--preologi-space-32
128px
--preologi-space-40
160px
--preologi-space-48
192px
Breakpoints
--preologi-bp-sm
480px
--preologi-bp-md
768px
--preologi-bp-lg
1024px
--preologi-bp-xl
1240px
--preologi-bp-2xl
1440px
Border Radius
--preologi-radius-sm
4px
--preologi-radius-md
8px
--preologi-radius-lg
16px
--preologi-radius-xl
24px
--preologi-radius-2xl
32px
--preologi-radius-card
32px
--preologi-radius-pill
999px
02 — Buttons
All button variants for calls to action, links, and interactive elements.
Default State
Sizes
Hover State
Disabled State
03 — Form Inputs
All input types with labels, placeholders, and states.
Default State
Focus State
Error State
Checkbox & Radio
04 — Cards
Reusable card components for content, stats, testimonials, and partner logos.
Content Card
Eyebrow label
Card title goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
Learn moreStat Card
50+
Cancers detected
99.6%
Specificity
7X
Increase in survival
Coming Soon Badge
05 — Accordion
Expandable sections for FAQs and detailed content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
06 — Hero Blocks
Full-width hero patterns for landing pages and section headers.
Standard Hero
Hero eyebrow label
From concern to clarity
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Dark Hero
Compact Dark Hero (Card)
A contained card variant with a darker gradient and rounded corners — ideal for partner-facing CTAs.
Offering the Galleri® test to your patients
Preologi is the first provider in the UK to offer the Galleri® multi-cancer early detection blood test. We work with clinics and healthcare providers to bring this revolutionary screening to patients who need it.
07 — Alerts & Banners
Semantic alert components for notices, warnings, and information.
08 — Badges & Tags
Small label components for status, categories, and metadata.
09 — Breadcrumbs
Navigation trail for deep pages.
10 — Step Indicator
Progressive step display for multi-step processes.
11 — Data Display
Table styling for comparative data.
| Feature | Galleri® | NHS CT |
|---|---|---|
| Cancers detected | 50+ | 2 |
| Specificity | 99.6% | N/A |
| Sample type | Single blood draw | CT scan |
12 — Quotes & Pull-Quotes
Testimonial and citation blocks.
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
13 — Image Placeholder
Standard placeholder for images and media.
14 — Dividers & Separators
Visual separators for content sections.
15 — Icon System
Inline SVG icons used throughout the system.
16 — Carousel
Responsive card carousel with prev/next arrows, dot indicators, touch support, and keyboard navigation.
Default State
With Heading
Screening highlights
17 — Gradient Hero Blocks
Full-width gradient blocks for key messaging sections. Dark variant uses the brand gradient; light variant for safety/lab info.
Dark Gradient (Brand)
Offering the Galleri® test to your patients
Preologi is the first provider in the UK to offer the Galleri® multi-cancer early detection blood test. We work with clinics and healthcare providers to bring this revolutionary screening to patients who need it.
Light Gradient (Safety / Lab Info)
Important safety information
The Galleri® test is a screening tool, not a diagnostic test. A positive result requires follow-up with your healthcare provider for confirmatory testing.
Usage Notes
Dark variant: Use for key messaging, CTAs, and hero sections. White text on brand gradient.
Light variant: Use for safety information, lab details, and disclaimers. Dark text on light gradient.
Patterning: Both variants include a subtle dot pattern overlay for visual depth.
18 — Contact Info Strip
Inline contact information with icon + text, used in hero sections and footers.
Default State
Markup
<div class="preologi-contact-strip">
<a href="tel:03305550444" class="preologi-contact-strip__item">
<svg>...</svg> 0330 555 0444
</a>
<div class="preologi-contact-strip__divider"></div>
<a href="mailto:enquiries@preologi.com" class="preologi-contact-strip__item">
<svg>...</svg> enquiries@preologi.com
</a>
</div>
19 — Newsletter Signup
Email input + subscribe button for newsletter forms.
Default State
Markup
<form class="preologi-newsletter"> <input class="preologi-newsletter__input" type="email" placeholder="Enter your email address" required> <button class="preologi-newsletter__btn" type="submit">Subscribe</button> </form>
20 — Partner Logo Grid
Responsive grid for partner clinic logos with hover states.
Default State
Markup
<div class="preologi-partner-grid">
<div class="preologi-partner-logo">
<img src="logo.svg" alt="Partner name">
</div>
<!-- Repeat for each partner -->
</div>