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

Overview

Durup presents itself as a Copenhagen-based textile studio with a visual language that merges editorial sophistication with tactile warmth. The website operates through immersive full-bleed photography of woven fabrics, draped textiles, and interior surfaces, allowing the material quality of the product to dominate the viewing experience. Typography serves a dual role: large, classical serif letterforms provide dramatic headlines that feel borrowed from fashion publishing, while compact sans-serif labels and navigation maintain functional clarity without competing with the imagery. The color system is restrained and intentional—deep earth browns, warm terracotta reds, and clean whites create a palette that references natural dyes and woven fibers. The overall impression is of a luxury craft brand that treats its digital presence with the same material consciousness it applies to its textiles.

Colors

The color system draws from natural material references: unbleached fibers, iron-rich clay, and dark walnut tones. The interface alternates between light and dark modes depending on photographic context, with terracotta serving as the consistent accent across both.

The dark navigation overlay demonstrates the most saturated application of earth and terracotta, with the left edge carrying a bold vertical terracotta stripe that frames the menu. On the studio page, the BOOK AN APPOINTMENT button uses terracotta as a solid fill against photographic content, ensuring visibility without departing from the warm palette. Press logos in the partner bar render in terracotta against white, treating editorial credibility as a design element. The sand tone appears in textile photography as a natural midpoint between white and brown, and can serve as a subtle background when photography is absent.

Typography

Three font families create a clear hierarchy: Ivy Presto Display-1821064796920112946 for editorial impact, Futura Pt for readable body text, and Copyright Fort Foundry Llc-Not For Desktop Use for compact functional labels. The contrast between the high-contrast serif and geometric sans-serif defines the brand voice—luxury craft meeting modern utility.

Ivy Presto Display-1821064796920112946, designed by Jan Maack for The Ivy Foundry, supplies the dramatic serif voice. Its high stroke contrast and slightly condensed proportions suit large-scale headlines that must hold their own against rich photography. Futura Pt, from Para Type Ltd based on Paul Renner's original design, provides the neutral geometric body voice. Copyright Fort Foundry Llc-Not For Desktop Use, designed by Mattox Shuler for Fort Foundry, contributes the compact, slightly extended sans-serif used for all-caps labels and navigation. Verify licensing for these families before production use.

Layout

The layout philosophy prioritizes photographic immersion over conventional container constraints. Full-bleed imagery occupies the entire viewport on key pages, with text positioned through careful centering or edge alignment rather than grid-based offset.

The homepage hero places the DURUP wordmark and mission statement centered-right over a split textile photograph, using the natural color boundary between blue-white weave and mustard velvet as a compositional guide. The left edge carries a persistent MENU label and a vertical "Discover our studio" link with a small arrow and READ indicator, creating a sidebar-like navigation zone without a visible container.

The studio page extends this full-bleed approach with draped white and striped textiles, placing contact information and the DURUP wordmark in the center while anchoring functional elements—the email signup and BOOK AN APPOINTMENT button—at the bottom edge. This creates a clear vertical hierarchy: brand identity at optical center, conversion actions at the natural conclusion of the viewing path.

The navigation overlay replaces photographic content entirely with a solid earth background, centering large menu items while maintaining the DURUP wordmark at top center. A terracotta left border provides spatial orientation and brand continuity. Social links and secondary actions settle at the bottom, preserving the vertical rhythm established by the main pages.

Spacing follows a 0.25rem base unit. Section-level padding uses 6rem to create breathing room around content blocks, while component-level spacing of 1.5rem governs internal element relationships. The zero-radius approach throughout reinforces the studio's craft aesthetic—no softened corners, direct material presence.

Visual language

The visual identity centers on material authenticity and editorial restraint. Photography dominates every page surface, showing textiles in situ: draped over furniture, layered in interior settings, or presented as flat weaves with visible fiber texture. The images carry warm color grading that emphasizes ochre, cream, and dusty blue tones, connecting the digital experience to the physical product.

Typography treatment reinforces this materiality. Serif headlines appear in white with subtle shadow when overlaid on photography, ensuring legibility without the harshness of solid text backgrounds. The all-caps sans-serif labels feel like care labels or workshop stamps—functional information delivered with typographic confidence.

The terracotta accent color functions as a signature across contexts: press logos, active menu states, primary buttons, and decorative borders all share this warm red. This consistency allows the brand to shift between light and dark backgrounds without losing recognizability. The earth tone serves as a deep neutral rather than a stark black, preventing the dark navigation overlay from feeling like a generic modal.

Composition favors asymmetry within balance. The hero image splits between two textile surfaces; the studio page offsets white drapery against striped upholstery; the menu centers text while weighting the left edge with color. This creates visual interest without clutter, appropriate for a brand selling considered, slow-design objects.

Components

Primary Action Button

The primary action appears as a solid terracotta rectangle with white uppercase label text. On the studio page, the BOOK AN APPOINTMENT button spans approximately one-third of the viewport width, positioned at the lower right. The zero border radius maintains the craft-direct aesthetic. Typography uses Copyright Fort Foundry Llc-Not For Desktop Use at label size with positive letter spacing for authority. Hover states are not visible in the supplied images; implement with subtle darkening or scale shift.

Menu Overlay

The full-screen navigation replaces page content with an earth-tone panel. A terracotta vertical stripe occupies the left edge, approximately 4rem wide, containing a CLOSE label at top. The main area centers four large menu items—PORTFOLIO, SERVICES, STUDIO, UNIVERSE—in Ivy Presto Display-1821064796920112946 at hero-display size. The active or hovered item (STUDIO) renders in white while others remain terracotta. Below the menu, secondary actions (BOOK AN APPOINTMENT, STAY IN TOUCH) appear in smaller uppercase text. Social links (Instagram, Pinterest) anchor the bottom center. The DURUP wordmark appears at top center in white, smaller than menu items but maintaining brand presence.

Hero Section

The homepage hero presents a split full-bleed photograph with centered-right text overlay. The DURUP wordmark appears first, followed by a multi-line mission statement in the same serif face. Text color is white with subtle shadow for separation from the warm-toned photography. A vertical navigation element on the left includes "Discover our studio" with directional arrow and READ indicator, suggesting scroll or click progression. The composition treats text as an integrated layer rather than an overlaid panel.

Email Capture

The studio page includes a minimal email signup at the bottom left. A single-line input with "Your email" placeholder sits above a SIGN UP label, both in white against photographic background. The input uses a bottom border only, no visible container or background fill. This treatment keeps the conversion element present without visual weight that would compete with the textile photography.

Press Logo Bar

A horizontal band displays publication logos in terracotta against white background. The "Featured in" label introduces five editorial marks: RUM, VOGUE LIVING, BØRSEN PLEASURE INTERIOR, ELLE DECOR, and EMIRATES WOMAN. Logos render at consistent height with generous horizontal spacing, treating press recognition as a design element rather than an afterthought. The serif typography of the publication marks harmonizes with the site's own display type.

Responsive behavior

The full-bleed photography and centered typography suggest a layout that scales proportionally across viewports. The hero text block should maintain centered-right positioning on wider screens while shifting to centered alignment on narrower viewports to preserve readability against busy photographic backgrounds.

The menu overlay's large serif items will require size reduction on mobile—consider scaling hero-display down to section-display size to prevent overflow. The left terracotta border may collapse to a thinner accent or disappear entirely on small screens where horizontal space is constrained.

The studio page's bottom-bar layout, with email capture left and button right, should stack vertically on mobile with the primary action button full-width. Social links can remain centered below.

Touch targets for the MENU and CLOSE labels should expand to at least 44×44dp. The email input requires adequate tap height and visible focus indication for accessibility.

Practical implementation guidance

### Preserve - Full-bleed photography as the dominant visual layer on every page - The three-typeface hierarchy: Ivy Presto Display-1821064796920112946 for drama, Futura Pt for body, Copyright Fort Foundry Llc-Not For Desktop Use for labels - Terracotta as the singular accent color across buttons, logos, and active states - Zero border radius on all interactive elements to maintain craft aesthetic - White text with subtle shadow treatment over photography rather than solid text backgrounds

### Avoid - Generic rounded buttons or card containers that contradict the material-direct aesthetic - Additional accent colors beyond the earth-terracotta-sand-white system - Heavy UI chrome that competes with textile photography - Small tap targets for navigation labels - Drop shadows on containers or panels

### Recommended Build Order 1. Establish the typeface stack with web font loading for Ivy Presto Display-1821064796920112946, Futura Pt, and Copyright Fort Foundry Llc-Not For Desktop Use 2. Implement the full-bleed hero section with responsive image handling and centered text overlay 3. Build the navigation overlay with earth background, terracotta border, and large serif menu items 4. Create the primary action button component with solid terracotta fill and uppercase Copyright Fort Foundry Llc-Not For Desktop Use label 5. Add the studio page footer with email capture and stacked bottom-bar layout 6. Implement the press logo bar with consistent terracotta rendering

### Accessibility - Ensure white text over photography meets WCAG contrast requirements; use text-shadow or subtle dark gradient overlays where photography is mid-toned - Provide visible focus states for the email input and all navigation elements - Use semantic heading hierarchy with h1 for DURUP wordmark and h2 for section titles - Add aria-label to the MENU and CLOSE controls since they rely on visual context - Consider reduced-motion preferences for any overlay transitions

Scope note

This guide covers the homepage and studio page surfaces visible in the supplied images, including the navigation overlay and press recognition section. Mobile layouts, hover states, form validation, loading sequences, and additional interior pages are not represented. Measurements are practical adaptation targets derived from visual estimation against the 4px base unit.

More website design guides

Browse website design guides by pattern and website.