andreadiego.es website design: fonts, colors and UI patterns

Overview

andreadiego.es uses a quiet but dramatic editorial language. The site feels built around one strong idea: oversized serif lettering on a warm field, with small grotesk text carrying the useful information around it. That contrast gives the brand a studio-like tone rather than a conventional service-site tone. The pages rely on calm spacing, sharp alignment, and a few carefully placed image blocks instead of dense interface furniture.

The visual identity is simple in structure and strong in presence. The brand name can become the largest thing on the page. Contact details sit in compact columns. The inquiry page turns into a split composition where the image and the form share the same visual weight. Nothing feels inflated or decorative for its own sake. The system works because the type is confident, the surface is warm, and the supporting elements stay restrained.

The design language to preserve is built from a few steady moves:

• Black typography against a warm brown field.
• A tall serif face for names, headings, and key prompts.
• A compact grotesk face for navigation, labels, addresses, and legal lines.
• Thin rules and straight edges instead of soft panels.
• Small interior photographs used as framed content blocks.
• Large empty areas that make the text feel deliberate.

Colors

The interface itself rests on black. That is the only exact UI color that needs to be carried through the system. The warm browns, clay notes, wood tones, and pale paper-like softness belong to the site atmosphere and the imagery around it, not to a tokenized interface palette. Keeping the UI color set this narrow helps the typography stay dominant and prevents the surfaces from turning into a generic decor scheme.

Black works in every role on the page because the composition is already warm and quiet around it. The contact page uses black text directly on the brown field so the letters feel etched into the surface. The home and contact views keep the same sharp tone even when the background image shifts toward darker interior materials, since the typography remains the anchor. The brown and beige family should be described in prose and handled through photography, page surfaces, and adjacent content blocks rather than through extra color tokens. That keeps the brand focused on contrast, scale, and spacing instead of on a broader chromatic system.

Typography

Typography is the main identity carrier. Ot Neglige brings the tall, fashion-editorial serif shapes that define the headline and the contact prompts. Fk Grotesk supplies the quiet working layer for navigation, contact details, legal lines, and short guidance. Verify licensing for these families before production use.

The hierarchy depends on contrast between the two families more than on a broad weight range. Ot Neglige should remain tall, bold, and spacious, with tight leading and a slight negative track so the letters stay elegant rather than ornate. Fk Grotesk should remain plain and steady, with enough line spacing to keep stacked information readable in narrow columns. The form labels are unusually large, which makes the form feel like part of the page composition instead of a boxed utility. The send action should keep the same tone: a typographic end point rather than a small rounded control.

Layout

The layout feels assembled from a few strong blocks, not from a conventional app shell. The home view opens with a wide headline that stretches across the page and then settles into a low band of contact information and a small image block. The contact page moves into a centered statement and a split arrangement where the image sits beside the form. The lower contact area behaves almost like a footer, with location, schedule, and policy lines gathered into orderly columns.

The composition uses asymmetry in a controlled way. A slim left rail can hold navigation while the main column carries the name or headline. Elsewhere, the image and form balance each other side by side: the image is firm and rectangular, while the form stretches horizontally through long labels and thin rules. The page feels spacious because the gaps are intentional. Each block gets room to breathe, and the eye can move from headline to details without competing noise.

What holds the layout together is rhythm:

• Large title moments at the top.
• Smaller utility text tucked away from the main statement.
• Straight columns for address and contact details.
• A form zone built from rules and labels instead of boxes.
• A photograph used as a distinct object, not as wallpaper.
• Wide margins that keep the brand calm.

This language should stay constant across the site. The page can rearrange the blocks, but it should not lose the feeling of a carefully staged studio sheet: one strong headline, one quiet utility layer, and one or two image anchors.

Visual language

The visual language is restrained, but it still has personality. The tall serif face gives the site a gallery-like and fashion-like feel, while the grotesk face adds a working-studio tone. Together they create a contrast between statement and service. The warm field makes the whole site feel tactile and grounded in interior materials, while the black text keeps everything crisp and direct.

Imagery is used sparingly and with purpose. The smaller photos show fragments of interiors, materials, and human activity rather than broad lifestyle scenes. Their crops are tight, which makes them feel specific and practical. In the blurred hero treatment, the image acts like atmosphere behind the lettering, while the type keeps control of the composition. The result is personal without becoming sentimental and refined without becoming cold.

The strongest visual traits are:

• Tall, narrow serif proportions with high stroke contrast.
• A warm brown field that gives the page its temperature.
• Black lettering that stays sharp and legible.
• Thin horizontal rules that organize the form.
• Compact grotesk support text that never competes with the headlines.
• Rectangular image blocks with minimal framing.

Shape matters here. Straight edges and firm alignment do most of the work. The system does not need glow, shadow, or rounded containers to feel finished. The balance comes from scale and spacing: a few large words, a few orderly columns, and a few carefully framed photographs.

Components

### Brand banner - Anatomy: Oversized name treatment, compact support lines, and a small amount of nearby information. - Typography: Use hero-display for the name and meta for secondary details. - Surface: The banner sits directly on the warm field without a visible card. - Spacing: Leave generous air above and below the name so the letters can breathe. - Visible states: Keep the banner clean and steady; if a smaller version is needed, preserve the letter shape rather than shrinking it into a generic logo bar.

### Sidebar navigation - Anatomy: Short stacked links and a small brand label. - Typography: Use navigation. - Surface: Transparent over the page field. - Shape: Keep the links plain; avoid pills and filled tabs. - Composition: The sidebar should stay secondary to the headline and form. - Visible states: A small underline or a slight weight shift is enough for the current item.

### Contact information block - Anatomy: Location, schedule, phone, email, supplier, social, and policy lines arranged in compact columns. - Typography: Use meta for labels and body-sized grotesk text for the values when needed. - Surface: Rest directly on the warm field. - Spacing: Keep the columns open enough to avoid a ledger feel. - Composition: The block should read like studio contact data, not like a dashboard. - Visible states: Links should remain understated and should not turn into loud call-to-action shapes.

### Inquiry form - Anatomy: Large heading, short intro line, stacked field labels, a consent row, and a send action. - Typography: Use section-display for the heading and form-display for the labels. - Surface: Same warm field as the rest of the page, with thin dark rules for separation. - Shape: Fields are straight and open; the visible structure comes from rules rather than boxed inputs. - Spacing: Let each label sit on its own line with generous horizontal room. - Visible states: Focus and hover should stay restrained, with no heavy chrome or glowing accents.

### Image tile - Anatomy: A rectangular interior photograph with a firm crop. - Surface: The image is content, not a background wash. - Composition: The tile balances the form and keeps the page from becoming only text. - Shape: Keep the crop square or nearly square; avoid rounded corners. - Visible states: If the image sits beside text, keep enough separation so it reads as a distinct block.

### Send action - Anatomy: One text-heavy action that feels part of the type system. - Typography: Use form-display. - Surface: A filled button is not necessary; the action can sit on the page field with a rule beneath it. - Composition: The action should anchor the bottom of the form and complete the vertical rhythm. - Visible states: Make the focus state clear, but do not turn the action into a capsule or a shadowed button.

Responsive behavior

On narrower screens, keep the reading order simple: headline, supporting line, image, then form or contact data. The sidebar should move away from the main title so it does not crowd the serif headline. The form labels need to stack cleanly without losing their upright rhythm, and the contact columns should collapse into a single readable list. The warm field and black type should stay unchanged at every width; only the spacing, order, and column count should shift.

The page should still feel spacious when compressed. That means preserving strong vertical gaps, letting the image keep a firm rectangle, and avoiding a crowded sequence of small rules. When text wraps, it should wrap in a way that keeps the line structure elegant rather than choppy. The goal is not to recreate the desktop layout in miniature, but to keep the same hierarchy and calm tone in a tighter frame.

Practical implementation guidance

### Preserve - Keep the black-on-warm-field contrast as the central identity cue. - Preserve the dramatic serif headline scale and the quiet grotesk utility layer. - Keep the interface nearly flat; the system depends on rules, spacing, and type. - Use rectangular image crops and avoid soft, generic presentation cards. - Let form labels stay large enough to feel like part of the page composition.

### Avoid - Avoid bright accent colors, glossy gradients, and decorative shadows. - Avoid pill buttons, rounded cards, or a standard app-dashboard look. - Avoid shrinking the serif headlines into ordinary site headers. - Avoid giving the two families equal visual weight in the same line. - Avoid filling the page with many tiny separators when one strong rule will do.

### Recommended build order 1. Set the warm field and black text pair. 2. Build the headline scale with Ot Neglige. 3. Add the Fk Grotesk utility layer for navigation and metadata. 4. Lay out the contact information columns. 5. Build the form with thin rules and large serif labels. 6. Add the image tile and check the wide-page balance. 7. Reflow the structure for narrower screens without changing the tone.

### Accessibility - Keep contrast high between the black type and the warm background. - Make every underlined link and form rule clearly keyboard focusable. - Pair each visible label with a programmatic form control. - Keep the send action readable as an action, not just as a typographic ornament. - Provide alt text that describes the interior subject of each image tile. - If the background shifts under photography, confirm that the headline still reads cleanly over the final crop.

Scope note

This guide covers the home banner and the contact surfaces shown here: the oversized serif name, the inquiry form, the contact information columns, and the small interior image blocks. It does not include project pages, motion, dark mode, or detailed small-screen breakpoints.

More website design guides

Browse website design guides by pattern and website.