Lorenzo Dal Dosso

Overview

Lorenzo Dal Dosso is a minimalist IT specialist portfolio embodying 'Architectural Precision'—a design philosophy that treats digital interfaces as functional structures where every element serves a clear purpose. The brand serves IT professionals and businesses seeking technical expertise, evoking confidence through restraint: a warm cream canvas (#fffcf0) provides psychological comfort, while deep charcoal text (#000310) ensures legibility and authority. The electric blue primary (#0033ff) acts as a digital accent, appearing on CTAs and interactive elements to signal actionability without visual noise. Voice: direct, technical yet approachable, never flowery. Example: 'I handle System Support, Network Management, Backup & Security, and Website Management—let's solve your infrastructure challenges.'

Colors

The color system operates on a principle of 'functional minimalism': the cream surface (#fffcf0) reduces cognitive load and creates a paper-like aesthetic that grounds the digital experience. Primary (#0033ff) is the electric blue accent reserved exclusively for CTAs, links, and focus states—it commands attention through scarcity and contrast (luminance ratio 8.5:1 against the cream surface). Secondary (#1cc691) provides a supporting accent for success states, confirmations, and secondary actions. Tertiary (#ffd24d) is used sparingly for warnings or highlights. The surface stack progresses from #fffcf0 (base) through #f8f6f0 (container-low) to #e7e3db (container-highest), enabling subtle layering without sacrificing clarity. On-surface text (#000310) is a near-black with minimal blue under

Typography

The type system pairs two custom typefaces to create visual hierarchy through personality rather than weight variation. LDD (the brand's signature font) is used for display and headline scales (120px down to 70px), delivering distinctive character and brand recognition—its geometric, pixelated letterforms evoke precision and digital craftsmanship. NeueMontreal-Regular handles all body and label scales (18px to 12px), providing neutral readability and professional restraint. Line-height is set generously (130px for display, 40px for headlines, 28px for body) to prevent cramping and enhance scannability. Letter-spacing is negative for display (-0.02em) to tighten the distinctive LDD forms, while body text uses +0.02em to improve legibility at smaller sizes. Font-weight remains consistent at

Layout

The layout follows a 'responsive grid-based structure' with a fixed container max-width of 991px, ensuring content remains readable and focused. On mobile (< 960px), the grid uses 4 columns with 20px gutters; at 960px+, it expands to 8 columns with 40px gutters; at 1280px+, it reaches 12 columns with 16px gutters. The page width is set to 85vw on mobile, 95vw on tablet, and 92vw on desktop, creating breathing room around the container. Spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section margins, lg (40px) for major section breaks, and xl (64px) for hero spacing. The gutter variable (20px mobile, 40px tablet/desktop) is used consistently for horizontal rhythm. White-space is treated as a design element—sections are separa

Elevation & Depth

Depth is achieved through a restrained shadow system that respects the minimalist aesthetic. Level 1 (Base Surface) uses no shadow—the cream background (#fffcf0) is the foundation. Level 2 (Cards & Containers) applies box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), creating a subtle lift without visual drama. Level 3 (Elevated Cards & Modals) uses box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), doubling the blur radius and spread for increased separation. Level 4 (Overlays & Dialogs) applies box-shadow: 0 8px 16px 4px rgba(0, 0, 0, 0.2), the strongest shadow reserved for modals and cookie notices that d

Shapes

The shape philosophy is 'Geometric Restraint'—rounded corners are used strategically to soften precision without sacrificing clarity. Buttons and toggles use full (64px) border-radius to create pill-shaped forms that feel friendly and clickable. Cards and containers use md (10px) radius for subtle rounding that respects the architectural aesthetic. Input fields use DEFAULT (5px) radius for minimal softening, maintaining a technical appearance. The favicon and logo use 50% border-radius (perfect circles) to create brand recognition through geometric simplicity. Modals and overlays use lg (16px)

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use backgroundColor: {colors.primary} (#0033ff), textColor: white, padding: 8px 32px, height: 40px, and rounded: full (64px). On hover, the background darkens to #0024cc over 200ms using cubic-bezier(0.2, 0, 0.8, 1) for snappy feedback. On active, it shifts to #001a99. Secondary buttons use backgroundColor: {colors.surface-container-high} (#ede9e1) with a 1px border in {colors.outline-variant} (#dadada), providing a lower-emphasis alternative. Links use textColor: {colors.primary} with text-decoration: underline and transition to #0024cc on hover. All interactive elements include a 200ms transition to prevent jarring state changes.

Containers & Surfaces Cards are the primary content container, using bac

Do's and Don'ts

**Do**

• Do use the primary blue (#0033ff) exclusively on CTAs, links, and focus states—its scarcity makes it powerful.
• Do maintain generous line-height (28px+ for body text) and letter-spacing (+0.02em) to ensure readability on the warm cream background.
• Do apply the full (64px) border-radius to buttons and toggles to signal interactivity; use md (10px) for cards to maintain architectural precision.
• Do use the shadow system hierarchically: Level 2 for cards, Level 3 on hover, Level 4 for modals—never skip levels.
• Do pair LDD (display/headlines) with NeueMontreal-Regular (body/labels) to create visual hierarchy through personality, not weight.
• Do use the surface container stack (surface-container-low through surface-container-highest) for layering, never hardcode grays.

**Don't**

• Don't use the primary blue (#0033ff) for backgrounds, body text, or non-interactive elements—reserve it for CTAs only.
• Don't apply border-radius > 10px to cards or inputs; the architectural aesthetic demands angular precision in structural elements.
• Don't use shadows stronger than Level 3 (0 4px 8px rgba(0, 0, 0, 0.08)) on standard cards—reserve Level 4 for modals and overlays.
• Don't mix NeueMontreal-Regular and LDD at the same scale; LDD is for display/headlines, NeueMontreal-Regular for everything else.
• Don't use opacity-based colors for text; always use the on-surface or on-surface-variant tokens to maintain the warm, legible aesthetic.
• Don't add decorative gradients or textures to the cream background—the minimalist aesthetic depends on a clean, undisturbed surface.