Pamidor Studio

Overview

Pamidor Studio is a design practice centered on **Architectural Minimalism**—a philosophy that treats digital interfaces as carefully composed spaces where every element serves a structural purpose. The brand serves design-conscious founders, product teams, and brands seeking systems that are clean, scalable, and intentional. The visual language evokes precision and restraint: a near-black canvas (#0a0a0a) paired with generous whitespace, a single accent red (#d12424) reserved for moments of emphasis, and a secondary blue (#2563eb) for secondary interactions. The emotional response is one of clarity and confidence—the UI feels like a well-lit studio where ideas can breathe.

The voice is direct, unpretentious, and grounded in craft. Dor Sharaby's copy avoids jargon and hyperbole; instead, it speaks to the *why* behind design decisions. The brand personality is that of a thoughtful collaborator who takes the work seriously but never takes itself too seriously. Example: "Brands, products & the art in between. I take the fun seriously."

Colors

The color system is built on a **high-contrast, intentional-accent** model. The primary surface is a warm off-white (#efeeeb), chosen to reduce eye strain while maintaining visual warmth. The primary text color is near-black (#0a0a0a), ensuring WCAG AAA contrast (21:1 ratio) across all body copy and interactive elements. Secondary (#d12424) is a bold, saturated red reserved exclusively for CTAs, error states, and moments requiring immediate attention—it appears sparingly, making each use carry weight. Tertiary (#2563eb) is a medium blue used for secondary actions, links, and informational elements. The surface stack progresses from #fdfcfb (surface-bright, for inputs and elevated containers) through #efeeeb (base surface) to #e2e1de (surface-container-highest, for subtle depth). Outline co

Typography

The type system pairs **funnelDisplay** (a geometric, high-contrast display font) for headlines with **Archivo** (a humanist sans-serif) for body text, creating a clear hierarchy between structural and informational layers. Display sizes (88px, 500 weight, -0.0271em letter-spacing) are used sparingly for hero statements and major section breaks; headline-lg (48px, 500 weight) anchors project titles and key sections; body-md (16px, 400 weight, 24px line-height) is the workhorse for all descriptive copy. The letter-spacing is tightened on large sizes (-0.0271em on display, -0.015em on headline-lg) to create visual density and sophistication, while body text maintains neutral spacing (0em) for legibility. Space Grotesk (300–700 weights) is reserved for labels, tags, and micro-interactions, ad

Layout

The page layout uses a **fluid 12-column grid** with a max-width of 1280px, centered on the viewport. The gutter is a consistent 24px, scaling down to 12px on mobile. The spacing scale is semantic: `lg` (40px) separates major sections (hero, projects, footer), `md` (24px) is used for card padding and section subsections, and `sm` (12px) for internal component spacing. The hero section occupies the full viewport height with a 50/50 split: left side contains the headline and tagline (left-aligned, 64px margin-bottom), right side is reserved for a full-bleed image or video. Project cards are laid out in a 2-column grid on desktop, 1 column on tablet, with 24px gaps between cards. The container max-width of 1280px ensures comfortable line lengths (60–80 characters) for body text while allowing

Elevation & Depth

Depth is conveyed through **subtle shadow and border layering** rather than dramatic drop shadows. The elevation system uses three levels: (1) Base (no shadow, 1px outline at #cac7c7) for cards and containers at rest; (2) Hover (0 3px 8px rgba(0, 0, 0, 0.15), +8% background opacity) for interactive elements on hover; (3) Modal/Overlay (0 8px 24px rgba(0, 0, 0, 0.12), full-screen backdrop at rgba(0, 0, 0, 0.4)) for dialogs and expanded states. Borders are used as the primary depth cue: a 1px solid border at #cac7c7 (outline-variant) separates containers from the surface, while a 1px border at #

Shapes

The shape philosophy is **Geometric Precision with Minimal Softness**—a balance between sharp architectural lines and subtle human warmth. Border-radius follows a deliberate scale: `sm` (2px) is used for micro-interactions (focus rings, small buttons), `DEFAULT` (4px) for primary buttons and input fields, `md` (6px) for cards and containers, `lg` (10px) for larger modals and expanded surfaces, and `xl` (12px) for the largest containers or when a softer appearance is desired. The 4px default radius is the brand's signature: it's sharp enough to feel technical and intentional, yet rounded enough

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses a solid #0a0a0a background with white text, 4px border-radius, and 9px 15px padding. On hover, the background darkens to #1a1a1a and the shadow elevates to 0 3px 8px rgba(0, 0, 0, 0.15). Focus states add a 2px solid outline at 3px offset. Secondary buttons (button-secondary) use a transparent background with a 1px border at #0a0a0a and the same text color; on hover, the background fills with {colors.surface-container-high} (rgba(233, 231, 228, 1)). Tertiary buttons (button-tertiary) follow the same pattern but use the secondary red (#d12424) for border and text, with a hover background of rgba(209, 36, 36, 0.08). All buttons use label-md typography (14px, 500 weight) and transition a

Do's and Don'ts

**Do**

• Do use the primary red (#d12424) exclusively for CTAs, errors, and moments requiring immediate attention—never use it for decorative elements or secondary information.
• Do maintain the 24px gutter and 40px section separation to preserve the spacious, architectural feel of the layout.
• Do pair funnelDisplay headlines with Archivo body text to create a clear visual hierarchy between structure and content.
• Do use 4px border-radius as the default for buttons and inputs—it is the brand's signature and should appear consistently across all interactive elements.
• Do apply focus outlines at 3px offset with 2px solid stroke to ensure keyboard accessibility without disrupting the minimalist aesthetic.
• Do use the full surface-container stack (surface-container-low through surface-container-highest) to create subtle depth without introducing new colors.

**Don't**

• Don't use rounded corners larger than 12px (xl) on primary interactive elements—the brand's precision is compromised by excessive softness.
• Don't introduce new accent colors beyond primary (#0a0a0a), secondary (#d12424), and tertiary (#2563eb)—the restraint is intentional.
• Don't use drop shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12)—the minimalist aesthetic relies on subtle, diffuse elevation cues.
• Don't set line-height below 1.4 on body text or below 1.2 on headlines—readability and breathing room are non-negotiable.
• Don't apply text-shadow or text-outline to body copy—reserve these effects for small labels over complex backgrounds only.
• Don't use opacity shifts below 8% on hover states—changes must be perceptible without feeling jarring or over-animated.