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

Overview

Penny presents a pension platform designed specifically for women through a visual language that balances editorial confidence with everyday warmth. The system pairs a distinctive serif display typeface with clean, modern sans-serif body text, creating a hierarchy that feels both authoritative and approachable. The color story centers on a warm cream canvas with a signature yellow accent that appears in calls-to-action, highlighted badges, and full-bleed feature panels. Photography throughout the site features natural, unposed moments of women in professional and personal contexts, reinforcing the brand's human-centered positioning. The overall composition favors generous whitespace, rounded corners on cards and panels, and a restrained two-tone palette that keeps attention on the message rather than decorative elements.

Colors

The palette operates in three modes. The default light mode uses canvas as the page background with ink text, creating a warm alternative to stark white. The accent mode deploys full yellow panels for high-energy moments like the hero banner, pairing the yellow with dark text for strong contrast. The muted mode uses surface-warm for testimonial cards and photography backdrops, allowing lifestyle imagery to sit comfortably without competing for attention. Dark text on light backgrounds dominates, with occasional inversion for the dark secondary button style. The yellow accent is used sparingly but decisively, appearing only where user action or brand personality needs emphasis.

Typography

The typographic system relies on the contrast between Eighties Comeback, an elegant serif with classical proportions and a distinctive asterisk-like terminal detail, and Inter, a neutral grotesque with excellent legibility at small sizes. Eighties Comeback appears only at display sizes, where its characterful forms create immediate brand recognition. Inter handles all functional text with a medium weight that maintains presence without heaviness, and a consistent negative letter-spacing that tightens the texture of paragraphs and labels alike.

The hero-display size at 96px establishes commanding presence in the full-bleed hero, while section-display at 64px scales appropriately for interior page sections. Body text at 18px with 500 weight ensures comfortable reading for longer explanations. The label style at 14px with 600 weight provides clear hierarchy for interactive elements.

The complete set of font families present in the system includes Eighties Comeback, Eighties Comeback Var, Inter, Inter-Italic, Applesystem, System-Sansserif, and Times. Eighties Comeback Var is a variable variant of the display serif. Inter-Italic provides italic emphasis within the Inter family.Verify licensing for these families before production use. Eighties Comeback is designed by Nicky Laatz and available from Nicky Laatz. Inter is designed by Rasmus Andersson and available from Rsms.

Layout

The layout system uses a consistent 24px horizontal padding across all major sections, creating breathable margins that frame content without constraining it. Vertical rhythm is established through generous section spacing, with 160px top padding creating dramatic separation between major content blocks. The grid alternates between full-bleed hero sections and contained content areas, with interior sections typically using the same 24px side padding.

Spacing follows a clear hierarchy: 8px for tight internal gaps within components, 16px for related element grouping, 24px for card padding and medium gaps, 32px for card internal spacing, 48px for section sub-grouping, 80px for major internal divisions, and 160px for section breaks. The 120px horizontal padding appears in specialized wide panels that need extra breathing room.

Cards and panels use rounded corners throughout, with 8px for standard cards, 24px for larger feature panels, and fully rounded pills for buttons and badges. The border radius system reinforces the soft, approachable character of the brand. Images within cards receive the same 8px radius, creating consistent containment.

The header floats above content with its own background treatment, containing the logo mark, navigation links, and a prominent yellow login button. Navigation items are spaced with comfortable gaps, maintaining readability without crowding.

Visual language

Photography is central to Penny's visual identity, featuring women in candid, natural moments rather than staged corporate settings. Images show subjects in warm interior environments, at work, or in everyday situations, always with a relaxed, confident energy. The photography treatment favors warm tones that harmonize with the cream and sage palette, avoiding cold or clinical color casts.

The brand mark uses an asterisk motif that appears in the logo and as a decorative element throughout the interface. This asterisk is integrated into the wordmark "Penny*" and reappears as a standalone symbol on branded merchandise and UI elements. The motif suggests both a footnote of care and a spark of action, aligning with the brand's positioning of making pensions accessible.

Iconography and UI elements maintain the rounded, friendly character established by the border radius system. Badges and status indicators use the yellow accent with dark text, creating high-visibility markers that draw attention without alarm. The overall visual density is low, with generous whitespace allowing each element to breathe and the photography to serve as a primary content element rather than mere decoration.

Shadows appear subtly on elevated cards, using a layered shadow that creates depth without harshness: a tight, dark shadow for immediate lift and a broader, softer shadow for ambient depth. This treatment appears on floating product mockups and dashboard cards, suggesting physical presence without breaking the flat, modern aesthetic.

Components

Primary Action Button - Anatomy: Text label centered within a fully rounded pill shape - Surface: Yellow accent background with dark ink text, or dark ink background with white text for secondary variant - Typography: label style, 14px Inter at 600 weight - Shape: 9999px border radius creating a pill - Spacing: 16px vertical padding, 20px horizontal padding - Composition: Appears inline with text or centered in hero sections

Secondary Action Button - Anatomy: Text label within a fully rounded pill, dark fill variant - Surface: Dark ink background with white text - Typography: label style - Shape: 9999px border radius - Spacing: 16px vertical padding, 20px horizontal padding - Composition: Used when primary yellow would compete with adjacent accent panels

Feature Banner - Anatomy: Full-width container with centered text stack and single action button - Surface: Yellow accent background with dark ink text - Typography: section-display heading, body paragraph, centered alignment - Shape: 24px border radius on the panel - Spacing: 80px top padding, 48px bottom padding, 24px horizontal padding - Composition: Logo row above, content grid below, creating a focal point in the page flow

Testimonial Card - Anatomy: Quotation mark, testimonial text, attribution name, attribution role - Surface: Warm sage background (#DCDCD0) - Typography: body style for quote, label style for attribution with name at 600 weight and role in italic - Shape: 8px border radius - Spacing: 32px padding on all sides, 16px gap between text elements - Composition: Grid of cards with varying sizes, some spanning multiple columns, interspersed with lifestyle photography

Product Showcase Panel - Anatomy: Section heading, phone mockup with floating UI cards, feature badge row - Surface: Cream canvas background, warm sage panel behind phone - Typography: section-display heading, body text for descriptions - Shape: 8px radius on phone mockup, 8px on floating cards - Spacing: 160px top padding, 24px horizontal padding, 48px gap between elements - Composition: Asymmetric layout with phone centered and cards offset to create depth

Navigation Header - Anatomy: Logo mark, text links, login button - Surface: Semi-transparent or solid light background - Typography: navigation style for links, label style for login button - Shape: Pill button for login - Spacing: 24px horizontal padding, comfortable vertical centering - Composition: Logo left, links center, action right

Image Card - Anatomy: Full-bleed photograph with optional text overlay - Surface: Image fills container, no border - Shape: 8px border radius - Spacing: 24px gap in grid layouts - Composition: Grid arrangements with varying aspect ratios, some cards spanning multiple grid cells

Responsive behavior

The design appears optimized for desktop viewing with generous spacing and large display typography. At smaller viewports, the 160px section padding should compress to maintain proportion without creating excessive scroll distance. The multi-column testimonial grid and image grids should collapse to single or double columns. The hero headline at 96px should scale down to preserve line breaks and readability, likely to 48px or 64px depending on viewport width. Navigation links should collapse to a menu affordance on narrow screens. The phone mockup in product showcases should remain centered but scale down, with floating cards repositioning to avoid overlap. Touch targets for buttons should maintain at least 44px height. The yellow feature banner should remain full-width with text reflowing naturally.

Practical implementation guidance

Preserve - The contrast between Eighties Comeback display type and Inter body text; this pairing defines the brand voice - The warm cream canvas (#FCFCF2) rather than pure white; the subtle warmth is essential to the approachable feel - The signature yellow accent (#F4E34E) used decisively but sparingly for actions and highlights - Generous vertical spacing between sections; the breathing room is part of the premium, unhurried experience - Rounded corners on all cards, panels, and buttons; the softness supports the friendly positioning

Avoid - Adding additional accent colors beyond the yellow and dark ink; the restrained palette is intentional - Using Eighties Comeback at small sizes or for body text; it loses legibility and dilutes the display impact - Tightening the letter-spacing on Inter body text beyond the specified -0.025em; the current setting is calibrated for readability - Removing the asterisk from the Penny wordmark; it's an integral brand element - Using harsh shadows or sharp corners that contradict the rounded, soft aesthetic

Recommended build order 1. Establish the color tokens and apply canvas background to the page 2. Implement the typography scale with Eighties Comeback and Inter loaded 3. Build the navigation header with logo, links, and yellow login button 4. Create the hero section with full-bleed photography and centered headline 5. Implement the feature banner component with yellow background 6. Build the testimonial card grid with sage backgrounds 7. Add the product showcase with phone mockup and floating cards 8. Polish with image cards, badges, and final spacing adjustments

Accessibility - Ensure the yellow accent (#F4E34E) on dark ink text meets WCAG contrast requirements; the combination should be verified at all sizes - Provide text alternatives for all lifestyle photography, describing the scene and any text content - Maintain keyboard focus indicators that are visible against both cream and yellow backgrounds - Use semantic heading hierarchy with h1 for hero headlines and h2 for section displays - Ensure the login button and all navigation links have adequate touch targets on mobile devices

Scope note

This guide covers the Penny homepage and its primary marketing sections as visible in the supplied captures. Interior pages, account dashboards, form flows, and mobile-specific layouts are not represented. Motion, animation, and interactive states such as hover, focus, and loading are not documented.

More website design guides

Browse website design guides by pattern and website.