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

Overview

Sundae Creative's design system is a bold, editorial approach to agency communications that relies on extreme typographic contrast and a restrained color palette. The visual identity pairs dramatically condensed display typefaces with clean, modern sans-serif body text to create a sense of confident sophistication. The system operates primarily in a dark mode environment, with near-black surfaces serving as the dominant canvas for white typography and coral accent labels. This high-contrast approach ensures that content commands attention while maintaining readability across long-form editorial sections and functional interface elements.

The design language draws from fashion and lifestyle editorial traditions, where large display headlines create visual impact and generous whitespace provides breathing room. The typographic hierarchy is steep, with hero display text reaching substantial sizes while supporting elements remain deliberately small and uppercase. Component surfaces are largely flat and border-driven, with rectangular shapes and precise hairline borders replacing rounded or shadow-based approaches. The overall effect is one of refined minimalism where every element feels intentional and precisely placed.

Colors

The color system is intentionally constrained, built on a near-black and white foundation with a single warm accent. This restraint allows the dramatic typography to remain the primary visual carrier of brand expression.

The dark surface color appears across the majority of the interface, from the contact section to the featured article card to the footer. On this dark ground, white text achieves maximum contrast and readability. The coral accent functions as a signal color, drawing attention to interactive elements and temporal metadata without competing with the primary typographic hierarchy. The muted gray serves supporting roles where full contrast would create visual noise, such as in multi-line address blocks. The system does not employ gradients, shadows, or translucent overlays; all surfaces are flat and opaque.

Typography

The typographic system combines four distinct font families to create clear role separation between display, functional, and body text. The condensed display faces provide dramatic vertical compression and strong horizontal rhythm, while the geometric sans-serif ensures clarity at small sizes and in extended reading contexts.

The display typography uses Söhne Schmal-Dreiviertelfett and Söhne Schmal-Halbfett, designed by Kris Sowersby at Klim Type Foundry. These condensed grotesques provide the system's most distinctive visual characteristic, with extremely tight letterforms that stack efficiently and create strong rectangular text blocks. The Canela Condensed Web Light, designed by Miguel Reyes at Commercial Type Inc, appears to serve as an alternative or complementary display face with a more refined, high-contrast serif character. Switzer, designed by Jeremie Hornus at Indian Type Foundry, handles all functional and body text with clean geometric proportions and excellent small-size performance.

Verify licensing for these families before production use. All four families require proper licensing through their respective foundries: Commercial Type Inc for Canela Condensed Web Light, Indian Type Foundry for Switzer, and Klim Type Foundry for Söhne Schmal-Dreiviertelfett and Söhne Schmal-Halbfett.

Layout

The layout system employs a full-bleed, edge-to-edge approach with generous internal spacing. Sections stack vertically without visible container boundaries, creating a continuous scrolling experience where each major area is defined by its background color rather than by borders or shadows.

The grid appears to follow a flexible proportional system rather than a rigid column structure. Content aligns to consistent margins on both sides, with text blocks and functional elements maintaining left alignment as a dominant organizational principle. The contact section centers its primary headline and topic selection cards, creating a moment of symmetrical focus within an otherwise left-weighted system. The footer distributes content across a wider horizontal field, with the email subscription occupying the left portion and address columns spreading toward the right.

Spacing between sections is substantial, typically using multiples of the base unit to create clear separation between content areas. Within components, padding is moderate and consistent, with rectangular buttons and input fields receiving uniform internal spacing. The topic selection cards demonstrate a more complex internal layout, with three equal-width options arranged horizontally and separated by vertical hairline borders, each containing centered text with decorative corner notches.

The article list section shows an alternating pattern where the featured article receives full dark treatment while subsequent items sit on white backgrounds with dark text, creating visual rhythm through surface alternation rather than through additional graphical elements.

Visual language

The visual language is defined by sharp geometry, high contrast, and typographic dominance over decorative elements. Corners are universally square; no rounded surfaces appear in buttons, cards, or containers. The only curved elements are the social media circles in the footer, which function as deliberate exceptions that draw attention through their geometric contrast.

Borders serve as the primary means of defining interactive and contained elements. Hairline borders in white or dark gray create precise perimeters around buttons, input fields, topic cards, and footer sections. These borders are consistently thin, functioning as optical delineation rather than as heavy framing devices. The topic cards introduce a distinctive decorative element with small triangular notches at each corner, creating a subtle sense of depth and craft without departing from the flat aesthetic.

Imagery and photography appear to play a supporting role, with the interface itself functioning as the primary visual experience. Where images do appear, they are likely treated with the same restraint as other elements, allowing typography to maintain hierarchy. The coral accent color is used sparingly and consistently, always in uppercase labels and always at small sizes, ensuring it reads as functional signaling rather than as decorative expression.

The overall mood is confident and editorial, suggesting a creative agency that understands contemporary visual culture and communicates through refinement rather than through excess. The system avoids gradients, drop shadows, glassmorphism, or any effects that would soften its precise, printed-quality aesthetic.

Components

Article card

The article card serves as the primary content unit for editorial material. It appears in two states: a featured variant with dark background and white display title, and a list variant with white background and dark display title.

Anatomy: Date label positioned top-left, "READ MORE" link positioned top-right, large display title occupying the central and lower portion, arrow icon at bottom-right.

Surface and text color: Featured variant uses ink background with canvas text and coral labels. List variant uses canvas background with ink text and coral labels.

Typography: Title uses section-display token. Date and read-more use label token in uppercase with coral color.

Shape and border: Rectangular with no radius. Featured variant has no visible border; list items separated by horizontal hairline rules.

Spacing: Generous internal padding, approximately 2rem on all sides. Title positioned with ample headroom below metadata row.

Composition: Two-row metadata header with date left and action right. Title spans full width below. Arrow icon provides directional cue without competing with text hierarchy.

Topic selection card

The topic card presents three selectable options for contact routing, arranged as a unified horizontal group with decorative corner details.

Anatomy: Three equal-width rectangular cells within a shared border container. Each cell contains centered uppercase label text. Small triangular notches appear at interior corners where cells meet.

Surface and text color: Transparent background with canvas border and canvas text on dark ground.

Typography: Section-display token at reduced size, centered within each cell.

Shape and border: Square corners throughout. Continuous outer border with internal vertical dividers. Corner notches create visual interest at intersection points.

Spacing: Substantial internal padding, approximately 3rem vertical and 4rem horizontal per cell.

Composition: Three-column equal distribution. Center cell contains stacked two-line text; side cells contain single-line text.

Email subscription field

The email field combines a text input with a submit button in a horizontal arrangement.

Anatomy: Text input with placeholder label, rectangular submit button positioned to the right, full-width hairline rule below.

Surface and text color: Transparent input background with canvas text and border. Button has transparent background with canvas border and canvas text.

Typography: Input placeholder uses label token in uppercase. Button uses label token in uppercase.

Shape and border: Both elements square-cornered. Input has bottom border only; button has full border.

Spacing: Input padding approximately 0.5rem vertical. Button padding approximately 1rem vertical and 2rem horizontal. Generous gap between input and button.

Social circle

Circular buttons for external social platform links, appearing in the footer.

Anatomy: Perfect circle containing centered uppercase platform name.

Surface and text color: Transparent background with canvas hairline border and canvas text.

Typography: Label token in uppercase, centered.

Shape and border: 50% radius creating perfect circle. Thin consistent border.

Spacing: Fixed size approximately 6rem diameter. Platform name centered both axes.

Footer

The footer anchors the page with contact information, subscription, and legal content.

Anatomy: Left column with subscription heading, input, and button. Center-right with two social circles. Right side with three-column address grid. Bottom row with copyright, credits, and legal links.

Surface and text color: Ink background throughout. Canvas text for headings and interactive elements. Muted gray for address details.

Typography: Subscription heading uses section-display token. Addresses use body token. Legal row uses legal-copy token.

Composition: Asymmetric grid with subscription as dominant left element. Addresses evenly distributed across three columns. Legal content spread across full bottom width with space-between alignment.

Responsive behavior

The design's strong horizontal emphasis and large display typography will require careful adaptation for narrower viewports. The topic selection cards, currently arranged in three columns, should stack vertically on mobile to maintain readable text sizes and touch targets. The footer address grid should collapse from three columns to a single column with increased vertical spacing between locations.

The article list maintains its alternating surface pattern regardless of width, but title sizes should scale down proportionally to prevent overflow. The featured article card's two-row metadata header may need to stack vertically on small screens, with date above read-more link.

The social circles, at 6rem diameter, provide adequate touch targets for mobile interaction without modification. The email subscription field should remain horizontal where possible but may stack with button below input on the narrowest viewports.

Typography should maintain its relative hierarchy across breakpoints, with hero-display scaling to approximately 3rem on mobile and section-display to approximately 2.5rem. Line heights can increase slightly at smaller sizes to maintain readability.

Practical implementation guidance

### Preserve - The stark near-black and white contrast; this is the system's foundational character - The square-cornered, border-driven component aesthetic - The uppercase label treatment for all functional and metadata text - The generous section spacing that creates editorial breathing room - The four-font typographic hierarchy: two condensed display weights, geometric sans body, geometric sans functional

### Avoid - Rounded corners on buttons, cards, or containers; they contradict the system's sharp precision - Drop shadows or elevation effects; the flat aesthetic is essential - Additional accent colors beyond coral; the restrained palette is intentional - Underlined text links outside of the explicit "READ MORE" label pattern - Background images behind display typography; the type is the image

### Recommended build order 1. Establish the color tokens and apply ink/canvas backgrounds to major sections 2. Implement the typography scale with proper font loading and fallbacks 3. Build the article card component with both featured and list variants 4. Create the topic selection card with corner notch decoration 5. Implement the footer with subscription field, social circles, and address grid 6. Add the coral accent color to labels and interactive states 7. Refine spacing and alignment across all components

### Accessibility - Ensure white text on near-black backgrounds maintains minimum 7:1 contrast ratio - The coral accent on dark backgrounds should be tested for sufficient contrast; consider lightening if it falls below 4.5:1 for small text - Social circle buttons need visible focus states beyond color change; consider border thickness increase or subtle background fill - The topic card corner notches are decorative and should not interfere with screen reader parsing of the selectable options - Large display headings should use proper heading hierarchy despite their visual size; hero-display should map to h1, section-display to h2

Scope note

This guide covers the homepage surface including the contact section, article list, and footer. Interior pages, mobile navigation behavior, hover and focus states, loading conditions, and motion design are not represented in the supplied material. Measurements are practical adaptation targets.

More website design guides

Browse website design guides by pattern and website.