Paul Hartmann

Overview

Paul Hartmann's portfolio embodies **Austere Minimalism** — a design philosophy that strips away ornament to reveal pure structure and intent. The brand serves independent founders and technical teams seeking a full-stack engineer who combines strategic thinking with execution precision. The aesthetic is deliberately monochromatic (pure black #000000 and pure white #ffffff) with no color distractions, evoking the command-line interface and the clarity of well-architected systems. The visual experience is stark, fast, and unapologetically technical — every pixel earns its place.

The voice is direct, measured, and evidence-based. Sentences are short and active: "I design and build high-performing digital products — strategy, interface, engineering, and launch in one precise practice." The brand avoids hyperbole, marketing speak, and decorative language. Instead, it uses concrete nouns ("systems," "products," "precision") and action verbs ("move," "build," "shape"). The personality is that of a craftsperson who values clarity over charm, and who communicates through work rather than words.

Colors

The color system is a radical reduction: **Primary (#ffffff)** is pure white, used exclusively for interactive elements (CTAs, focus states, hover highlights) and primary text on dark backgrounds. It commands attention through contrast alone, never through saturation or warmth. **On-Primary (#000000)** is pure black, ensuring maximum legibility on white surfaces. **Surface (#000000)** is the canvas — deep black that recedes, allowing content to advance. **Surface-Variant (#1a1a1a)** and **Surface-Container (#1a1a1a)** provide subtle depth layers for cards, panels, and nested containers without breaking the monochromatic aesthetic. **On-Surface (#ffffff)** is the default text color. **On-Surface-Variant (#b3b3b3)** is a mid-gray used for secondary text, labels, and disabled states — it sits

Typography

The type system uses two distinct families to create cognitive separation: **Arial Narrow** (weights 700) for display and headline scales (147px down to 48px), and **Inter** (weights 400–700) for body and label scales. Arial Narrow's geometric, condensed letterforms evoke technical precision and industrial design; its tight tracking (-0.075em on display, -0.06em on headlines) creates visual density and forward momentum. **SFMono-Regular** (monospace, 12px–11px) is reserved for metadata, code snippets, and UI labels — reinforcing the technical identity. Body text uses Inter at 16px–20px with 1.4–1.5 line-height for comfortable reading. All display text uses a line-height of 0.78–1, creating a compressed, architectural feel. Letter-spacing on headlines is negative (-0.06em to -0.075em) to ti

Layout

The layout uses a **12-column fluid grid** with a max-width of 1600px, centered on the viewport. Horizontal padding is responsive: clamp(20px, 5.55vw, 80px), scaling fluidly from mobile to desktop without breakpoints. Vertical rhythm is governed by a 4px unit system, with semantic spacing tokens: **lg (40px)** separates major sections; **md (24px)** groups related content; **sm (12px)** tightens component internals. The hero section uses a 144px top padding and 48px bottom padding, creating a generous breathing room that emphasizes the hero headline. Section dividers are 1px solid borders in #1a1a1a, providing visual separation without visual weight. The work carousel uses scroll-snap-type: x mandatory with scroll-snap-align: start, allowing fluid horizontal scrolling on mobile while maint

Elevation & Depth

Depth is conveyed through **layered transparency and subtle shadows**, not through color gradation. The design uses three elevation levels: **Level 1 (Base)**: pure black background (#000000) with no shadow. **Level 2 (Cards/Panels)**: background-color: rgba(0, 0, 0, 0) (transparent), border: 1px solid #1a1a1a, box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). This shadow is soft and spread, creating a gentle lift without drama. **Level 3 (Modals/Overlays)**: background-color: rgba(0, 0, 0, 0.88), backdrop-filter: blur(12px), box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25). The blur effect creates a frost

Shapes

The shape philosophy is **Architectural Sharpness** — zero border-radius by default, with rare exceptions. Buttons, inputs, and cards have rounded: 0px, creating hard edges that reinforce the technical, industrial aesthetic. Only badges and select UI elements use rounded: 4px (md) or rounded: 8px (lg) when they need visual softening. The rationale: sharp corners are faster to parse, more aligned with code and command-line interfaces, and create visual tension that keeps the design feeling alive rather than soft. The single exception is the skip-to-content link, which uses rounded: 0px to maint

Components

Action Elements Buttons use two primary patterns: **button-primary** (white background, black text, SFMono-Regular 12px, padding: 8px 12px, no border, no radius) for CTAs and code-like actions; **button-secondary** (transparent background, white text, 1px border in #1a1a1a, 46px height, no radius) for navigation and secondary actions. On hover, button-primary transitions to background-color: #e9ecef (primary-fixed-dim) over 150ms. Button-secondary's border animates to white (#ffffff) on hover. All buttons use cursor: pointer and focus-visible: ring-2 ring-white for keyboard navigation.

Containers & Surfaces Cards are transparent (background-color: rgba(0, 0, 0, 0)) with a 1px border in #1a1a1a and a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)). On hover, the shadow deepens to 0 8px

Do's and Don'ts

**Do**

• Do use white (#ffffff) as the primary accent for all interactive elements — buttons, links, focus states — to create maximum contrast and visual hierarchy.
• Do maintain the monochromatic palette strictly; resist the temptation to add brand colors or accent hues, as they dilute the austere aesthetic.
• Do use Arial Narrow for all display and headline text (48px and above) to reinforce the technical, condensed identity.
• Do apply negative letter-spacing (-0.06em to -0.075em) on headlines to create visual density and forward momentum.
• Do use SFMono-Regular for all metadata, labels, and code-like UI elements to reinforce the engineering identity.
• Do animate hover states with cubic-bezier(0.22, 1, 0.36, 1) easing and 150–700ms durations for consistency.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) as the standard card shadow, deepening to 0 8px 24px rgba(0, 0, 0, 0.25) on hover.

**Don't**

• Don't introduce color accents, gradients, or brand hues — the system is intentionally monochromatic to emphasize clarity and structure.
• Don't use rounded corners on primary UI elements (buttons, cards, inputs); reserve border-radius for badges and secondary elements only.
• Don't use system fonts or generic sans-serif fallbacks in display text; always specify Arial Narrow for headlines to maintain the technical aesthetic.
• Don't apply text-shadow or blur effects to body text; reserve these for small labels over animated backgrounds only.
• Don't animate non-interactive elements; all motion should be tied to user interaction (hover, focus, scroll) or deliberate entrance sequences.
• Don't exceed a 1600px container max-width; wider layouts dilute the visual impact of the austere design.
• Don't use opacity or transparency for primary text; on-surface (#ffffff) and on-surface-variant (#b3b3b3) are the only approved text colors.