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

Overview

David Rinman's portfolio operates as a study in radical restraint: a near-total black canvas punctuated by white typography and single moments of electric green. The system rejects decorative excess in favor of typographic scale and spatial confidence. Every element serves the work—whether that work is expressed through words, through the curated list of clients and experience, or through the explosive project imagery that interrupts the monochrome field. The visual identity positions the practitioner as both meticulous craftsperson and bold creative director, capable of moving between systematic rigor and expressive gesture.

The homepage establishes this duality immediately. A massive biographical statement occupies the upper viewport in oversized sans-serif letterforms, followed by a project thumbnail where neon green typographic forms carve through photographic content. The About page extends the same logic into information architecture: large introductory paragraphs give way to dense, scannable grids of professional history. Navigation remains minimal and persistent, never competing with content. The overall impression is of a system that knows exactly what it wants to say and refuses to waste pixels saying it.

Colors

The palette is intentionally austere, built on a binary of absolute black and white with a single high-voltage accent. This restraint amplifies the impact of photographic and typographic content, which carries the full expressive burden.

The canvas color is not merely a background choice but the defining atmospheric condition of the site. Against this black field, white typography achieves maximum legibility and graphic presence. The accent green appears strategically—most dramatically in the homepage project thumbnail where oversized letterforms in pure green create a stencil effect over photography. This green reads as digital-native, almost screen-native, suggesting the practitioner's fluency in contemporary media. The muted ink serves a purely functional role, reducing visual weight for supporting information like employment dates and geographic locations without introducing a new hue. No gradients, shadows, or border colors are visible in the interface; all depth and hierarchy come from scale, spacing, and the single accent intervention.

Typography

The typographic system relies on a single family deployed across all roles, differentiated by size and line height rather than weight variation. By Larissa Kasper Rosario Florio Dinamo provides the structural backbone. Its grotesque forms carry enough character to feel considered at display sizes while remaining neutral and legible at text sizes.

The type scale is built on a 4px relative unit, with sizes landing at whole-number multiples: 16px (1rem), 28px (1.75rem), 40px (2.5rem), and 56px (3.5rem). Negative letter spacing on display sizes tightens the grotesque forms into cohesive word-shapes, preventing the open apertures from creating visual looseness at scale. The body-large size carries slightly negative tracking as well, maintaining the same crafted density that characterizes the display treatment. Line heights are tight throughout—display sizes sit at 1.05 to 1.1, creating stacked lines that read as single graphic blocks rather than separated sentences.

Verify licensing for By Larissa Kasper Rosario Florio Dinamo before production use. The family is available from Dinamo Typefaces.

Layout

The layout system favors asymmetry and deliberate misalignment over centered or rigidly balanced compositions. Content blocks are positioned with apparent casualness that reveals careful calculation upon inspection.

The site header spans the full viewport width with a three-part horizontal distribution: the practitioner name anchored left, the discipline descriptor centered, and navigation links right. This tripartite structure avoids the conventional logo-left, nav-right pattern, instead creating a more sophisticated horizontal rhythm.

Below the header, the homepage hero statement occupies the left two-thirds of the viewport, set flush left with generous but not excessive margins. The text block does not center itself; it claims space with confidence. Following this, project cards break the horizontal flow entirely—the green typographic cutout in the visible example fills the width, with imagery bleeding to edges or contained within the graphic frame depending on the specific project treatment.

The About page introduces a more systematic grid for information density. After the introductory paragraphs—again left-aligned with substantial margin—the page transitions to a three-column grid for professional data: Work Experience, Selected Clients, Services, and Work Featured In. This grid maintains consistent column widths with substantial gutters, allowing rapid scanning across categories. The footer reprises the header's three-part logic with copyright, email, and LinkedIn link distributed horizontally.

Vertical spacing between major sections measures approximately 6rem, creating clear articulation without excessive white space that would feel empty against the black canvas. Within sections, content gaps of 2rem separate related elements, while the info grid uses 3rem gutters to prevent column content from feeling cramped.

Visual language

The visual language operates through contrast and interruption. The overwhelming majority of the interface is monochrome—black and white in strict alternation—so any introduction of color or imagery carries disproportionate weight. This makes the green typographic moments feel like events rather than decorations.

The project imagery visible on the homepage demonstrates a key visual strategy: typography as mask and frame. The word "DANCE" in massive green letterforms cuts through and around photographic content, creating layered depth where flat graphic form overlaps documentary image. The green itself is pure and unmixed, reading as synthetic against the organic photographic tones. This tension between digital flatness and photographic depth characterizes the practitioner's stated expertise in brand identity and motion design.

Photography within the system appears to favor candid, urban, and human-centered subjects—visible in the street-portrait treatment of the homepage project. Images are not presented as pristine rectangles but as material integrated with typographic structure. The black canvas allows these images to glow with heightened saturation and contrast.

The overall mood is editorial and contemporary, closer to a fashion or culture publication than to a conventional design portfolio. There is no visible use of icons, buttons with rounded corners, cards with shadows, or other common UI conventions. The system communicates through type, space, and the strategic deployment of imagery alone.

Components

Site Header - Anatomy: Three horizontally distributed text elements—name, discipline descriptor, navigation links - Surface: Transparent over canvas, no visible border or background separation - Typography: Navigation token for all three elements, though name and discipline may share identical sizing - Spacing: Approximately 1.5rem vertical padding, 2rem horizontal margins - Composition: Flexbox or grid with space-between logic; center element truly centered rather than balanced by outer elements

Hero Statement - Anatomy: Single paragraph block, flush left, no containing box or background - Surface: Transparent - Typography: Hero-display token - Spacing: Generous top margin below header, substantial bottom margin before project content - Composition: Left-aligned, maximum width approximately 48rem to prevent overlong lines at display size

Project Card - Anatomy: Full-width container with layered content—typographic overlay and photographic image - Surface: Canvas background; accent green for typographic elements - Typography: Display-scale letterforms in accent color, possibly custom or heavily tracked - Shape: Sharp rectangular edges with zero border radius throughout - Spacing: Bleeds to viewport edges or maintains minimal margin - Variants: The visible example shows typographic cutout treatment; other projects may vary in overlay approach

Info Grid - Anatomy: Three-column grid with category headers and stacked list items - Surface: Transparent over canvas - Typography: Label token for headers, body token for list items; muted-ink for metadata - Spacing: 3rem gutters between columns; consistent vertical rhythm within columns - Composition: Columns of roughly equal width, left-aligned content within each

Contact Link - Anatomy: Text link, inline or block-level - Surface: Transparent - Typography: Section-display token for high visibility - States: Default in ink; hover potentially transitions to accent green

Footer - Anatomy: Three-part horizontal distribution mirroring header structure - Surface: Transparent over canvas - Typography: Body or label token for copyright; section-display or body-large for email and social links - Spacing: 3rem vertical padding, 2rem horizontal margins - Composition: Distributed alignment matching header logic

Responsive behavior

The system as visible appears optimized for desktop viewport widths. The three-column info grid and tripartite header would require significant reconfiguration for narrower viewports. Recommended adaptations include: collapsing the info grid to a single column with section headers as expandable disclosures or stacked blocks; reducing hero-display size to section-display or body-large on small screens to prevent overflow; maintaining the header's three elements but stacking them vertically or converting to a simplified two-row layout; and ensuring the project card's typographic overlay remains legible by scaling green letterforms proportionally or repositioning them to avoid obscuring critical image content.

Touch targets for navigation and links should maintain adequate size given the minimal interface—at least 44px height for header links. The high contrast between ink and canvas provides strong baseline accessibility for legibility, though the tight line heights on display sizes may require slight loosening for users who increase text size in their browsers.

Practical implementation guidance

Preserve - The absolute black canvas as the dominant background condition; any lightening fundamentally alters the site's character - The single accent green in its pure form; desaturation or darkening loses the electric quality - The tight line heights and negative tracking on display sizes; this density is essential to the typographic personality - The left-aligned, asymmetric compositions; centering everything would conventionalize the system - The sharp rectangular edges with zero border radius; this hardness contributes to the contemporary editorial feel

Avoid - Introducing additional accent colors; the monochrome-plus-green system is deliberately limited - Adding background colors, borders, or shadows to create false depth; the flatness is intentional - Rounding corners on any element; the system rejects this convention entirely - Using multiple font families; the single-family discipline is core to the visual identity - Centering text blocks that are currently left-aligned; the asymmetry is compositional strategy, not oversight

Recommended Build Order 1. Establish the black canvas and white ink as global defaults 2. Implement By Larissa Kasper Rosario Florio Dinamo with the full type scale, testing at display sizes first 3. Build the tripartite header with its specific horizontal distribution 4. Create the hero statement component with proper max-width and alignment 5. Develop the project card with layered typographic overlay capability 6. Construct the three-column info grid with consistent vertical rhythm 7. Add the footer as a structural mirror to the header 8. Implement accent green for hover states and project imagery integration

Accessibility - The high contrast between #ffffff ink and #000000 canvas exceeds WCAG AAA requirements for normal and large text - The accent green (#00ff41) against black provides strong contrast for large decorative elements but should not be used for small text - Focus indicators should be visible; consider white outlines or the accent green for keyboard navigation - The tight line heights on display sizes may cause clipping when users increase text size; test with browser zoom at 200% - Ensure link purpose is clear from context; the minimal interface provides few redundant cues

Scope note

This guide covers the homepage and About page surfaces visible in the supplied images. Project detail pages, additional work samples, motion behavior, hover states, and mobile layouts are not represented. Measurements are practical adaptation targets. The full type scale, spacing system, and component inventory may extend beyond what these two pages reveal.

More website design guides

Browse website design guides by pattern and website.