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

Overview

Doodle Duo presents a warm, family-centered visual identity built around the approachable personality of a home-based dog breeder. The design system balances playful energy with trustworthy clarity through its distinctive color pairing of soft coral against muted teal, grounded by generous cream backgrounds that evoke warmth and domestic comfort. The visual language relies heavily on circular and pill-shaped elements—rounded photo frames, capsule labels, and a circular logo seal—that reinforce the friendly, approachable nature of the brand. Photography dominates the experience, with candid dog portraits and family photos presented in overlapping, slightly scattered compositions that feel spontaneous and authentic rather than rigidly structured. The typography combines a bold, geometric sans-serif for navigation and labels with a softer, more decorative display face for the hero title, creating clear hierarchy while maintaining personality. This is a design system built for emotional connection first, using color, shape, and imagery to communicate care, warmth, and the joy of raising puppies in a family environment.

Colors

The palette draws from natural, earthy tones with two strong accent colors that create memorable contrast. The warm cream canvas serves as the dominant background, allowing photography to remain the focal point while providing visual rest. Coral functions as the primary accent for interactive and highlighted elements, while teal provides secondary structure and section differentiation.

The system operates in a light mode exclusively across the visible surfaces. The coral accent carries the emotional weight of the brand—friendly, energetic, and warm—while the teal provides cooling contrast for longer reading sections and profile cards. The cream canvas avoids stark white, keeping the experience approachable and slightly vintage. Black appears only for maximum contrast situations: the circular logo seal and primary body text. No dark mode is defined in the visible system. Photographic content introduces additional warm browns, soft greys, and natural greens that harmonize with the controlled palette without competing for attention.

Typography

The type system combines four distinct families, each serving a specific communicative role. The display and label faces carry the brand personality, while the body face ensures readability for longer content.

Genty Sans, designed by Flavor Type Foundry, provides the friendly, slightly retro display character for the hero title. Canva Sans, from Colophon Foundry, delivers bold, geometric clarity for navigation and section headers with its distinctive wide tracking. Open Sans, from Ascender Corporation, handles all body reading with neutral, open forms. Poppins, designed by Jonny Pinhorn and offered by Indian Type Foundry, contributes semibold weight for compact labels and the circular seal. Verify licensing for these families before production use.

The scale builds from a 4px relative unit. Display sizes use whole-number multiples: 16px (1rem) for labels, 24px (1.5rem) for navigation, 32px (2rem) for section headers, and 64px (4rem) for the hero display. Body text at 20px (1.25rem) provides comfortable reading density. Tracking varies significantly by role—tight for display, expansive and uppercase for navigation and labels.

Layout

The layout system favors centered, stacked compositions with generous breathing room between sections. Horizontal bands of contrasting color—teal against cream—create clear section boundaries without heavy structural elements. Content typically centers within a comfortable reading width, with asymmetric photo arrangements providing visual interest.

The hero section establishes the pattern: full-width photographic background with a floating badge overlay positioned in the lower left quadrant. The badge uses rounded corners and generous internal padding, creating a focal point that partially overlaps the photography beneath. This layered approach continues through content sections, where images and text blocks interleave with intentional overlap.

Profile and announcement sections use a split composition: descriptive content on the left, dominant circular or scattered photography on the right. The circular photo frame in the Dames and Sires card demonstrates the system's embrace of organic geometry—the frame breaks the rectangular grid, extending slightly beyond its bounding area with a thick coral border that creates depth through shadow-like layering.

Spacing follows a 4px base unit. Section padding uses large multiples—24 units (6rem)—to create dramatic vertical rhythm. Component internal padding uses 8 units (2rem) for cards and panels, while tight spacing of 4 units (1rem) handles label padding and small gaps. The scattered puppy photos in the litter announcement demonstrate loose, organic spacing rather than rigid grid alignment, with images rotated slightly and overlapping to suggest casual arrangement.

Visual language

The visual identity centers on approachable warmth expressed through three core elements: organic geometry, candid photography, and warm color contrast. Every shape avoids sharp corners when possible—pills replace rectangles, circles replace squares, and even rectangular photos carry subtle rounded corners. The circular logo seal encapsulates this philosophy, its scalloped edge suggesting a hand-stamped quality that reinforces the family-business authenticity.

Photography treatment prioritizes natural lighting and outdoor settings. Dogs appear in grass, held by family members, or posed casually rather than in studio environments. The color grading leans warm, with golden-hour lighting that connects to the cream and coral palette. Photo presentation varies by context: strict circles for profile portraits, scattered rectangles with slight rotation for litter announcements, and full-bleed hero backgrounds for emotional impact.

The coral-to-teal pairing creates distinctive brand recognition. Coral draws the eye to actions and names; teal recedes to provide structure. This warm-cool tension prevents the palette from becoming overly sentimental or clinical. The black logo seal anchors the system with graphic weight, its stark contrast making it memorable at small sizes.

Texture appears minimal but intentional—the cream background suggests uncoated paper or natural fiber, while the solid color fields avoid gradients or patterns that would compete with photography. The overall impression is of a carefully crafted scrapbook or family album, updated for digital presentation.

Components

Hero Badge - Anatomy: Rounded rectangle containing brand name and subtitle tagline, positioned over full-bleed photography - Surface: Cream surface color with no border - Typography: Hero display for "Doodle Duo" in coral, section display for subtitle in coral on dark rounded pill - Shape: 1.5rem border radius, generous padding - Spacing: 2rem internal padding, positioned with offset from image edges - Composition: Lower-left placement, partially overlapping hero photography - Variants: Single badge visible; subtitle may appear as separate nested pill

Profile Pill Label - Anatomy: Horizontal capsule containing uppercase category text - Surface: Solid coral background - Typography: Section display in black, widely tracked uppercase - Shape: Full pill with 9999px radius - Spacing: 1rem vertical padding, 2rem horizontal padding - Composition: Centered or left-aligned above content sections - Variants: Multiple pills may stack vertically with consistent spacing

Circular Photo Frame - Anatomy: Perfect circle containing cropped portrait photograph, surrounded by thick colored border - Surface: Transparent center, solid coral border - Shape: 50% border radius, approximately 12px border width creating substantial ring - Spacing: Centered within its container, may extend beyond nominal bounds - Composition: Right-side placement balancing left text content - Variants: Single ring visible; may support multiple concentric rings for emphasis

Info Card - Anatomy: Rounded rectangle containing label-value pairs or descriptive text - Surface: Cream surface color, slightly lighter than page canvas - Typography: Label tokens for field names in uppercase, body text for values - Shape: 1.5rem border radius - Spacing: 2rem internal padding, fields stacked with 1rem gaps - Composition: Left-aligned within content sections - Variants: May contain single paragraph or structured field list

Logo Seal - Anatomy: Circular badge with scalloped or gear-like edge, containing line-art dog icon and brand text - Surface: Solid black background - Typography: Label token in cream, curved along top and bottom edges - Shape: Circular with decorative edge treatment - Spacing: Compact internal padding, icon centered - Composition: Appears in footer or signature position, small scale - Variants: Single seal design visible

Photo Scatter - Anatomy: Collection of rectangular photographs with slight rotation, overlapping arrangement - Surface: No borders or shadows, direct image presentation - Shape: Subtle rounded corners on rectangles - Spacing: Organic, non-uniform gaps with intentional overlap - Composition: Right-side or full-width cluster balancing text content - Variants: May include small identifying labels overlaid on parent photos

Responsive behavior

The visible system shows desktop-oriented compositions with centered content and generous margins. For narrower viewports, the split compositions should stack vertically—text content preceding photography, circular frames scaling down proportionally. The hero badge should remain positioned over imagery but shift to centered placement with reduced padding.

Pill labels should maintain their horizontal capsule shape but may reduce horizontal padding and font size to prevent overflow. The scattered photo arrangement should collapse to a two-column or single-column grid with reduced rotation angles for stability on touch devices.

Typography should scale down by approximately 25% on smaller screens, with the hero display reducing to 3rem and section display to 1.5rem to maintain proportional hierarchy. Line heights can increase slightly for body text to improve readability in narrower columns.

The circular photo frame's border thickness should scale with the frame diameter to maintain visual weight—approximately 8-10% of the diameter. The logo seal should remain visible but reduce to a compact signature size, maintaining legibility of the curved text.

Practical implementation guidance

Preserve - The warm cream canvas as the dominant background; avoid shifting to stark white - The distinctive coral-teal accent pairing; neither color should dominate alone - The circular and pill-shaped geometry; sharp rectangles undermine the friendly character - The candid, natural photography style with warm lighting - The generous tracking on uppercase labels and navigation - The layered badge-over-photography hero composition

Avoid - Cool greys or blue-tinted neutrals that clash with the warm palette - Sharp-cornered cards or buttons; maintain rounded continuity - Studio-lit or heavily processed photography that feels commercial rather than personal - Tight letterspacing on display text; the open tracking is intentional - Gradient backgrounds or drop shadows that add visual noise - Multiple competing accent colors beyond coral and teal

Recommended build order 1. Establish the cream canvas and coral accent as foundational tokens 2. Implement the typography scale with Genty Sans for hero and Canva Sans for labels 3. Build the hero badge component with proper overlay positioning 4. Create the circular photo frame with responsive border scaling 5. Develop the pill label system for section headers 6. Add the logo seal with SVG or carefully crafted border-radius approximation 7. Implement photo scatter layouts with CSS transforms for rotation 8. Polish with section banding using teal backgrounds

Accessibility - Ensure coral text on cream backgrounds meets minimum contrast ratios; the coral-ink pairing on pills should be verified for WCAG AA compliance - Provide alt text for all dog photography describing breed appearance and context - Maintain touch targets of at least 44px for any interactive pill labels or navigation - Consider reducing motion for users who prefer reduced motion, particularly for any photo scatter animations - Ensure the curved text in the logo seal has accessible hidden text equivalent

Scope note

This guide covers the homepage and profile card surfaces visible in the supplied images. Interior pages, mobile layouts, form interactions, and checkout flows are not represented. Motion behavior, hover states, and focus indicators were not captured and should be designed to match the system's warm, approachable character. Measurements are practical adaptation targets derived from visible proportions.

More website design guides

Browse website design guides by pattern and website.