preludesecurity.com website design: fonts, colors and UI patterns

Overview

Prelude Security's visual system merges editorial sophistication with technical credibility through a distinctive combination of classical typography, warm neutral grounds, and restrained purple accents. The design language draws from print and collage aesthetics—halftone dot patterns, vintage botanical and newspaper imagery, and elegant serif display faces—while serving the functional needs of a B2B cybersecurity platform. The result is a brand that feels intellectually rigorous yet approachable, avoiding the cold sterility common to security software interfaces.

The system operates on a cream canvas with near-black ink, allowing photographic and illustrative content to carry warmth and narrative weight. Typography creates clear hierarchy through contrast between the high-contrast Argent Cf serif for headlines and the clean geometric Articulat Cf for body and interface text. A pixel-serif variant, Argent Pixel Cf, provides decorative italic accents that reference both digital and craft traditions. The purple action color anchors interactive elements without overwhelming the restrained palette.

Colors

The color system builds from a warm cream canvas that distinguishes the brand from typical cool-gray security interfaces. Ink tones lean slightly warm rather than pure black, harmonizing with the vintage photographic content. The purple action color appears in filled buttons, link text, and as halftone dot patterns in decorative illustrations. Lavender serves as a lighter purple variant for italic accent words and textured backgrounds. Sage green appears sparingly in promotional banners and as an occasional alternative accent. White surfaces elevate functional components—pricing tables, feature cards, comparison panels—creating subtle depth without harsh contrast against the cream ground.

Typography

The typographic system relies on three related families from Connary Fagen. Argent Cf provides the editorial voice for display text with its high-contrast transitional serif forms and elegant proportions. Articulat Cf, a geometric sans, handles all functional and body text with clean legibility at small sizes. Argent Pixel Cf, a decorative variant with pixelated serifs, appears exclusively for italic accent words within headlines—creating a distinctive "precious time" or "distraction" moment that bridges digital and craft aesthetics.

Type sizes follow a 4px grid, with display sizes at 56px and 40px, body at 16px and 20px, and labels at 12px. Letter spacing tightens for display to maintain density, while labels receive slight positive tracking for all-caps or small-size clarity. Line heights remain generous for body text to support longer security product descriptions, while display text sits tightly for impact.

Verify licensing for these families before production use. Articulat Cf is designed by Connary Fagen.

Layout

The layout system favors asymmetrical compositions that pair substantial text blocks with illustrative content on the right. Hero sections typically split roughly 55/45 between text and imagery, with text left-aligned and imagery bleeding toward the edge. This creates a magazine-spread quality that feels considered rather than template-driven.

Content sections stack vertically with generous 6rem padding between major zones. Internal component spacing uses 2rem for card padding and 0.5rem for tight element groupings. The pricing page demonstrates a more structured two-column approach: a narrow table for endpoint tiers alongside a wider feature description panel, both elevated on white surfaces against the cream ground.

Comparison layouts use side-by-side panels of equal width, each with internal icon-led feature lists. Horizontal rules separate major sections with subtle 1px borders in the muted tone. The overall rhythm alternates between expansive hero moments and denser information surfaces, preventing visual fatigue across long product pages.

Visual language

The visual language centers on collage-based illustration that merges vintage ephemera with technical motifs. Botanical prints, antique newspapers, pocket watches, and magnifying glasses appear alongside geometric wireframe spheres and halftone dot patterns. These illustrations sit within circular frames or float freely against the cream ground, often with soft shadows that suggest physical depth.

Texture plays a crucial role: purple halftone dots fade and scatter across panels, creating gradient-like effects through analog means. Wireframe geometry suggests surveillance and scanning without literal security iconography. The color treatment of photography remains warm and slightly desaturated, harmonizing with the cream ground rather than competing for attention.

Decorative typography moments use the pixel-serif italic for single words or short phrases within headlines, rendered in lavender or sage against the dark serif. This creates rhythmic variation in reading pace and visual texture. Icons throughout the interface use simple line weights, often paired with small geometric marks that echo the halftone aesthetic.

Components

Primary Action Button - Anatomy: Text label centered within a filled pill shape - Surface: Solid purple background with white text - Typography: Label token, uppercase or title case depending on context - Shape: Full pill with 9999px radius - Spacing: 0.75rem vertical padding, 1.5rem horizontal padding - Composition: Appears inline with text or alongside secondary buttons with 1rem gap

Secondary Action Button - Anatomy: Text label within outlined pill - Surface: Transparent background with purple border and purple text - Typography: Label token - Shape: Full pill matching primary button height - Spacing: Identical padding to primary for visual pairing - Variants: May appear with dark border and text on light surfaces

Feature Card - Anatomy: Icon, heading, and description stacked vertically - Surface: White background with subtle border - Typography: Section-display for headings, body for descriptions - Shape: 0.5rem corner radius - Spacing: 2rem internal padding - Composition: Icons sit above text with 0.5rem gap; multiple cards may grid or stack

Comparison Panel - Anatomy: Heading with italic accent, followed by icon-led feature list - Surface: White background with subtle border, halftone texture in corner - Typography: Section-display for headings, accent-italic for emphasized phrases, body for descriptions - Shape: 0.5rem corner radius - Spacing: 2rem internal padding - Composition: Two panels side by side with equal width; halftone texture bleeds from top-right corner

Pricing Table - Anatomy: Tiered rows with endpoint ranges and per-unit pricing - Surface: White background with subtle border, header row in muted tone - Typography: Body for labels and values, label token for column headers - Shape: 0.5rem corner radius on container - Spacing: Generous cell padding for readability - Composition: Narrow table alongside wider descriptive panel

Promotional Banner - Anatomy: Icon, italic headline, and action button in horizontal arrangement - Surface: Sage green background with dark text - Typography: Accent-italic for headline, label for button - Shape: 0.5rem corner radius - Spacing: Full-width with internal padding - Composition: Flex row with space-between, button right-aligned

Responsive behavior

The asymmetrical hero layout should stack vertically on narrower viewports, with imagery moving below text and scaling to maintain visual weight. The pricing page's side-by-side table and description panel should collapse to a single column, with the table becoming horizontally scrollable or accordion-style to preserve readability. Comparison panels should stack rather than sit side by side, maintaining their internal padding and halftone corner treatments.

Type sizes should reduce proportionally: hero-display to 2.5rem, section-display to 2rem on tablet, with further reduction to 2rem and 1.5rem on mobile. Body text remains at 1rem minimum for accessibility. Button touch targets should maintain at least 44px height regardless of viewport.

Practical implementation guidance

Preserve - The warm cream ground as the default page background; avoid shifting to pure white or cool gray - The three-tier typographic hierarchy: Argent Cf for display, Articulat Cf for body, Argent Pixel Cf for decorative italic accents only - Collage illustration style with vintage ephemera and technical wireframe motifs - Halftone dot textures as gradient alternatives in purple tones - Full-pill button shapes for all interactive actions

Avoid - Additional accent colors beyond the purple-lavender-sage system - Box shadows on elevated surfaces; rely on border and background contrast instead - Rounded corners larger than 0.5rem on cards and panels - Pure black text; maintain the warm ink tone for harmony with photography

Recommended Build Order 1. Establish cream canvas and ink text colors with Articulat Cf body typography 2. Implement pill-shaped primary and secondary buttons with purple action color 3. Add Argent Cf display typography for hero and section headings 4. Build card and panel components with white surfaces and subtle borders 5. Integrate collage illustration system with circular frames and halftone textures 6. Add Argent Pixel Cf italic accents as decorative headline moments 7. Implement pricing table and comparison panel layouts

Accessibility - Ensure purple action buttons meet contrast ratios against cream backgrounds; consider darkening to action-hover if needed - Provide visible focus states for pill buttons, likely using outline offset rather than fill change - Maintain semantic heading hierarchy despite decorative italic interruptions - Alt text for collage illustrations should describe conceptual content, not merely "decorative image"

Scope note

This guide covers the marketing site surfaces visible in the supplied images: homepage hero, platform feature pages, and pricing. Navigation, footer, form states, and authenticated application interfaces are not represented. Motion behavior, mobile-specific layouts, and dark mode variants are not documented. Measurements are practical adaptation targets derived from visual estimation against a 4px grid.

More website design guides

Browse website design guides by pattern and website.