d33.io website design: fonts, colors and UI patterns

Overview

D33 presents itself as a contemporary design studio with a visual identity built on stark contrast and confident scale. The system pairs monumental geometric display lettering with restrained, functional body text and occasional handwritten accents that add human warmth. The overall impression is professional yet approachable—clean enough to convey expertise, bold enough to be memorable.

The design operates in two primary modes: light surfaces with dark text for informational and marketing content, and dark surfaces with light text for immersive moments like the contact form. Cards serve as the primary content container, consistently using generous rounded corners and soft shadows to create depth without heaviness. Photography appears in rounded frames, often with playful rotation that breaks the grid slightly. The color palette is intentionally minimal, relying on black, white, and grays with a single green accent for interactive states and pricing highlights.

Colors

The color system is fundamentally monochromatic with a single functional accent. Black and white establish the dramatic contrast that defines the brand's visual punch, while the gray family handles hierarchy and information density. The green accent appears sparingly—only where it guides action or clarifies pricing options. Dark surfaces use slightly lighter grays for input fields to maintain legibility without breaking the immersive tone. Light surfaces stay clean and airy, with shadows providing the only depth variation.

Typography

The type system combines three distinct voices: Righteous for bold geometric display that dominates visual memory, Geist for modern functional headings with slight character, and Inter for all readable text. Caveat enters as a handwritten accent for personal touches like team member roles beneath portraits. Every size is a whole-number multiple of 4px (0.25rem), creating a tight but consistent vertical rhythm.

Righteous carries no designer attribution in the available records. Geist was designed by Basementstudio, Andrés Briganti, and Mateo Zaragoza, with vendor support from Basementstudio and Vercel. Inter was designed by Rasmus Andersson, with vendor Rsms. Caveat carries no designer attribution. Verify licensing for these families before production use.

Layout

The layout philosophy centers on generous whitespace and clear content grouping through cards. Sections stack vertically with substantial breathing room between them—typically 6rem or more. Content rarely spans the full viewport width; instead it sits within a comfortable reading measure, often around 1200px maximum, with consistent horizontal padding.

Cards are the fundamental layout unit. They appear as single containers or in paired arrangements, as seen in the pricing section where two cards sit side by side with equal prominence. The light and dark pricing cards share identical internal spacing and border radius, creating visual rhyme despite their tonal opposition. Within cards, content aligns to a consistent internal grid with padding of approximately 2rem on all sides.

The contact form demonstrates a contained dark experience: a rounded rectangle of deep black sits centered on white, with form sections separated by subtle horizontal rules. Inputs stack vertically with consistent gaps, while related fields like full name and email share a horizontal row at the top.

Footer layout spreads horizontally, with link columns on the left and the massive D33 logo mark dominating the lower right. The logo extends beyond typical content bounds, bleeding toward the edge to create visual tension. Social icons cluster tightly beneath contact information.

Visual language

The visual personality balances precision with playfulness. Geometric rigor appears in the custom D33 logotype—bold, blocky letterforms with distinctive cutouts that create rhythm and recognition. This same geometric confidence carries through to button shapes, which use full pill rounding for a friendly but decisive presence.

Photography breaks the geometric mold with organic, slightly rotated framing. Team portraits appear in rounded squares with subtle corner radius, each tilted at a slightly different angle to suggest personality and movement. The rotation is consistent enough to feel intentional, varied enough to avoid mechanical repetition.

Depth is achieved through layered shadows rather than borders. Cards float with soft, diffuse shadows that suggest elevation without harsh edges. The shadow color remains neutral, never tinted, preserving the monochrome discipline.

The handwritten script of Caveat appears only in supporting roles—beneath portraits, in casual annotations—never competing with the structural type. This restraint keeps the identity professional while allowing moments of human warmth.

Components

Pricing Card

The pricing card comes in two variants that share structure but invert surface treatment. Both use a border radius of 1.5rem and internal padding of 2rem.

The light variant presents on a soft gray surface (#F5F5F5) with dark text. It features a package name in Geist at section-display size, a price in larger bold figures with "USD" or "/m" in smaller text, and a toggle switch for add-on options. The toggle uses a green accent (#4CAF50) for its active state label. Below, a feature list stacks in body size with muted color for secondary items. A primary button in full pill shape anchors the bottom.

The dark variant inverts to a near-black surface (#1A1A1A) with white text. It lacks the toggle, instead presenting a subtitle in muted color followed by a feature list in white. The bottom button becomes a secondary treatment: white fill, dark text, same pill shape.

Contact Form

The contact form container uses a dark surface (#1A1A1A) with generous rounding (1.5rem) and substantial padding. Internal sections divide with hairline horizontal rules in slightly lighter gray. Form labels appear in white at label size, with parenthetical hints in muted color. Text inputs use a slightly lifted gray (#333333) with half-rem rounding and comfortable padding. Checkboxes align in a grid for service selection. The submit button uses the full pill primary treatment with white text on black. A privacy policy link appears in muted color with underline.

Team Card

The team experience card combines text content with portrait photography on a light gray surface. Left-aligned text stacks in three groups: a muted prefix, a bold statement in Geist, and a star rating in filled black. On the right, three portraits in rounded square frames with approximately 1rem radius appear with slight rotational variation. Handwritten captions in Caveat identify roles beneath each portrait. A text-only link with arrow sits below the text stack.

Button

Two button treatments appear consistently. The primary button uses black fill, white text, and full pill rounding with horizontal padding of 1.5rem and vertical padding of 0.75rem. The secondary button inverts to white fill with dark text. Both use label typography with medium weight and include a right arrow icon.

Footer

The footer spreads across the full width with generous top padding. Left column contains a "Links" heading in bold, followed by stacked navigation items in body size, contact email, and social icons (X, Instagram, LinkedIn). The lower portion features the massive D33 logo mark in a gradient from solid black to fading gray, creating a visual echo effect. A thin horizontal rule separates the logo from copyright text and legal links in small, muted type.

Responsive behavior

The design appears optimized for desktop presentation with its generous spacing and side-by-side card layouts. At narrower viewports, the pricing cards should stack vertically, maintaining their internal structure but losing the horizontal comparison. The team card's portrait row would benefit from horizontal scroll or stacking to preserve the playful rotation without crowding.

The contact form container should remain centered with consistent side padding, allowing internal fields to stack fully at small sizes. The footer logo mark, with its extreme scale, may require scaling down or horizontal scroll treatment to prevent layout breakage.

Touch targets for buttons and form inputs should maintain minimum 44px height. The toggle switch in pricing cards should enlarge slightly for reliable interaction on touch devices.

Practical implementation guidance

Preserve - The stark black-and-white contrast as the primary visual signature - Full pill rounding on all buttons for consistent friendly authority - The three-typeface hierarchy: Righteous for display, Geist for headings, Inter for body - Generous card padding and soft shadow elevation - Slight photographic rotation for personality in portrait presentations - The single green accent for functional highlights only

Avoid - Adding saturated colors beyond the green accent; the monochrome discipline is core to the identity - Sharp corners on interactive elements; the rounded language is consistent - Using Caveat for primary headings or long text; it functions only as accent - Heavy borders; rely on shadow and surface contrast for separation - Tightening the generous section spacing; the airy quality is intentional

Recommended Build Order 1. Establish the type scale with Inter body and Geist headings 2. Implement the card component with consistent padding, radius, and shadow 3. Build button variants with full pill rounding 4. Create pricing card layouts in both light and dark treatments 5. Add the contact form with dark container and input styling 6. Integrate Righteous for hero display and logo moments 7. Layer in Caveat accents for team captions and informal touches

Accessibility - Ensure the green accent (#4CAF50) meets contrast requirements when used on light surfaces; it may need darkening for small text - Dark form inputs on dark surfaces require clear focus indicators, likely with outline or border color shift - The extreme scale of hero display type should still respect user zoom preferences - Maintain visible focus states on all interactive elements, especially the pill buttons and toggle switch - Provide text alternatives for the star rating visual in the team section

Scope note

This guide covers the visible landing and contact page surfaces of d33.io, including pricing, team presentation, contact form, and footer components. Motion behavior, hover states, loading sequences, additional pages, and mobile-specific layouts are not represented in the available material. Measurements are practical adaptation targets derived from visual inspection against a 4px base grid. Verify licensing for all font families before production use.

More website design guides

Browse website design guides by pattern and website.