1600.agency website design: fonts, colors and UI patterns

Overview

1600.agency uses a stark, highly centered landing-page composition. The page begins with a floating rounded header, then drops into a large stacked headline, a short promise line, three compact chips, and a single dark appointment button. The structure is simple, but the proportioning makes it feel deliberate rather than plain. The headline is the dominant object on the page, and everything else stays small enough to keep attention on that statement.

The system is built from contrast instead of decoration. A pale page ground supports black type, dark pills, and low-contrast gray logos. A wide light media stage follows the hero and introduces a portrait inside a large rounded frame. The page ends by inverting into a deep black footer with city clocks, contact details, and a dense legal rail. That shift from bright to dark gives the page a clear chapter break without requiring extra visual effects.

The design reads as a motion-studio portfolio with a restrained commercial tone: calm, direct, and highly legible.

Colors

Core palette

The palette stays nearly monochrome, but the page still relies on a few small accents outside the neutral base. The warm button icon and the green floating contact control give the page energy without widening the main UI palette. Keep those accents small and local. The page should remain readable as a black-and-gray system first, with color used as punctuation rather than a surface language.

The bright upper page and the dark footer are not competing themes; they are two ends of the same neutral system. Light surfaces carry the hero, trust row, and media stage. Dark surfaces are reserved for the final contact area so the page can end with a lower, denser visual cadence.

Typography

Visby Cf carries the strongest voice on the page. It is the face of the central claim and the large footer clock headings. Dm Sans handles the interface layer: navigation, chips, buttons, and general body copy. Dm Sans 9 Pt is the tight utility voice for compact labels and dense footer text. Inter stays quiet and practical for small metadata and address-style copy. Together they form a single clean sans system with one forceful display voice and three supporting voices.

Verify licensing for these families before production use.

The typographic system depends on scale more than on variety. The hero is oversized and tightly stacked, with enough weight to survive a bright empty field. Supporting copy opens up just enough to stay calm at smaller sizes. Labels are concise and semibold, while legal copy stays quiet and narrow. Avoid adding decorative italic or condensed styles; they would fight the page’s straight, architectural rhythm.

Layout

The page is organized around a centered single-column story, but the header floats above that column as a separate rounded capsule. That capsule is wide, soft, and slightly elevated, with the logo on the left, navigation in the middle, and controls on the right. The hero content sits below with a generous vertical gap so the headline has room to breathe. The page is not visually busy; it uses distance as structure.

The hero itself is centered rather than left aligned. The title, subcopy, chips, and primary button all stack vertically, which makes the page feel calm and intentional. The trust line and logo row stretch horizontally underneath, adding width back into the composition without increasing density. That row works because the logos stay low contrast and small enough to remain background information.

The media stage is the next major block. It is a large rounded rectangle with soft edges and a pale surface, holding a centered portrait and a tiny control at the top edge. The stage feels like a contained screen or presentation frame rather than a generic card. It needs generous inset on all sides so the portrait can sit with air around it.

The footer reverses the mood. Its upper band distributes city clocks and addresses across several columns, then the lower band compresses the logo, navigation, city list, and legal text into a denser strip. The result is a page that starts open and ends compact. That change in density is a core part of the layout language.

Visual language

1600.agency builds personality through restraint. The shapes are round, but not playful. The page uses large radii on the main shell and smaller pill controls inside it, which gives the interface a soft edge without turning it into a cartoon. Soft shadows and faint borders keep the controls separated from the background, but nothing feels glossy or heavy.

The most visible signal is the black appointment button. It sits inside a rounded form, and the high contrast makes it feel like the page’s main destination. The chips below the hero use the same rounded language at a smaller scale, so the interface repeats one shape family rather than inventing multiple widget styles. The logo row beneath the hero is deliberately quiet, almost gray-on-gray, which lets the headline remain the loudest object.

The contact and utility accents are practical and small. The green floating contact control and the warm button icon act like live interface signals, not decorative themes. They should stay compact, circular, and visually separated from the main layout. The footer is the only place where the system goes fully dark, which creates a stage-like ending and strengthens the sense of progression from introduction to contact.

Components

### Header bar - Anatomy: Logo mark, horizontal navigation, language switch, filled appointment button, and a floating contact control at the far right. - Surface: Pale capsule with a soft shadow and a wide internal gutter. - Typography: Small semibold sans for navigation and utility items; nothing oversized. - Shape: Very round outer shell, with rounded pills inside it for the button and language control. - Visible states: The appointment control is filled and dark; the contact control is bright and circular; the rest stays neutral.

### Hero stack - Anatomy: Large centered claim, short supporting sentence, three chips, and one primary action. - Typography: Oversized display type with tight leading and slightly negative tracking. Supporting copy is much smaller and calmer. - Spacing: The stack uses large vertical gaps so each line reads independently. - Composition: The headline owns the center of the page; chips and button stay narrow and aligned under it. - Visible states: The middle chip reads a touch stronger than the others, which gives the row a mild hierarchy without changing its shape.

### Trust row - Anatomy: A short trust line and a row of partner marks. - Surface: No heavy container; the logos sit directly on the pale ground. - Typography: Small, gray, and low contrast. - Composition: Spread horizontally to widen the page after the narrow hero column. - Visible states: The row should stay subdued; it supports the headline rather than competing with it.

### Media stage - Anatomy: Large rounded frame, a tiny top-centered control, and a centered portrait inside a wide pale field. - Surface: Soft light gray, almost screen-like. - Shape: Large corner radius and a very calm rectangular footprint. - Spacing: Strong internal inset on all sides; the portrait needs room to breathe. - Visible states: The control at the top reads like a quiet utility label, not a dominant button.

### Footer - Anatomy: Upper contact band, lower navigation band, city list, and legal rail. - Surface: Deep black with lighter gray type. - Typography: Smaller and denser than the rest of the page; section headings are still legible, but not loud. - Composition: The upper row spreads into columns; the lower row tightens into a compact information strip. - Visible states: The footer should feel intentionally quieter than the hero, but still crisp and structured.

### Floating contact control - Anatomy: Circular bright icon button with a fixed docked position. - Surface: High-chroma accent against the otherwise neutral page. - Shape: Full circle with a compact hit area. - Behavioral tone: It reads like a persistent shortcut, not a secondary navigation item. - Visible states: Keep it visually separate from the main CTA so the page retains one primary action.

Responsive behavior

On narrower screens, preserve the order of the story: header, hero, chips, primary action, trust row, media stage, then footer. The centered headline can reflow into more lines, but the stack should remain short and vertically disciplined. The header capsule may need to wrap or compress, yet the logo and appointment control should stay visibly distinct.

The trust logos will need more compression on small widths, but they should remain in one readable line for as long as possible. The media stage should shrink before it changes shape; keep its rounded frame and central portrait relationship intact. In the footer, columns can collapse, but the dark/light contrast and the separated contact/legal bands should remain. The floating contact control should avoid covering the hero button or the footer copy.

Practical implementation guidance

### Preserve - Keep the headline as the primary event on the page. - Preserve the floating, rounded header shell instead of replacing it with a flat full-width bar. - Reuse the same pill geometry for chips, buttons, and utility controls. - Keep the page mostly neutral so the logo row and footer have room to breathe. - Let the media stage stay soft and spacious; it should feel like a presentation frame, not a generic card.

### Avoid - Avoid expanding the palette into a multi-color marketing scheme. - Avoid sharp rectangles, hard 2px enterprise borders, or heavy drop shadows. - Avoid shrinking the hero into a crowded left-aligned block. - Avoid turning the trust row into a loud logo wall. - Avoid mixing several competing button styles on the same page.

### Recommended build order 1. Build the floating header capsule and its right-side controls. 2. Establish the hero type scale and the centered stack. 3. Add chips and the primary appointment button. 4. Add the trust row and keep it visually quiet. 5. Build the pale media stage with the centered portrait. 6. Finish with the dark footer and its column rhythm. 7. Add the floating contact control last so it can be positioned against the finished page.

### Accessibility - Keep every control large enough to tap easily, especially the language switch, appointment button, and floating contact control. - Preserve strong text contrast in the hero and footer. - Give the logo row and portrait useful alt text. - Keep clear keyboard focus treatment on pills and buttons. - On small screens, ensure the floating contact control never blocks the main call to action or the footer links.

Scope note

This guide covers the English desktop home page: the floating header, centered hero, trust row, media card, and dark footer. Mobile stacking, motion, hover and focus transitions, loading states, and alternate language layouts are not included.

More website design guides

Browse website design guides by pattern and website.