Alyssa Kapito

Overview

Alyssa Kapito is a design portfolio rooted in **Architectural Minimalism**—a philosophy that privileges spatial clarity, material authenticity, and the deliberate absence of ornament. The brand serves design professionals and collectors who value restraint, precision, and the quiet power of well-composed environments. Every visual element—from the warm cream background (#f5f4f2) to the serif-and-sans pairing—reinforces a curatorial sensibility: the UI recedes, allowing the work (photography, objects, spaces) to command attention. The emotional response is one of calm sophistication and intellectual rigor.

The voice is measured, precise, and never breathless. Vocabulary leans toward spatial and material language: "composition," "proportion," "materiality," "rhythm." The brand speaks to an audience that understands that design is about what you *remove*, not what you add. Example sentence in brand voice: "The studio explores how light, material, and proportion shape spatial experience."

Colors

The color palette is a study in restraint and warmth. **Primary (#000000)** is pure black, used sparingly on text, navigation links, and interactive states—it commands attention through contrast against the cream surface. **Secondary (#666666)** is a mid-tone gray, deployed for secondary text, disabled states, and subtle UI elements; it softens the harshness of pure black while maintaining legibility. **Tertiary (#8b7355)** is a warm brown—a nod to natural materials and wood tones visible in the portfolio photography—reserved for accents, badges, and tertiary CTAs that echo the brand's material sensibility.

The surface stack is anchored by **surface (#f5f4f2)**, a warm off-white that feels like linen or unbleached paper rather than digital white. **Surface-container** (#ede9e3) and **surf

Typography

The type system pairs **Libre Baskerville** (serif, 400 weight) for display and body text with **GT America** (sans-serif, 400 weight) for labels, navigation, and UI chrome. This pairing communicates editorial sophistication (serif) grounded in contemporary clarity (sans). Display (60px, 72px line-height, -0.02em tracking) is reserved for hero statements and major section headings; headline-lg (40px, 48px line-height) for subsection titles; body-md (16px, 24px line-height) for body copy and standard UI text. Apply letter-spacing: 0.03em to all label-md and label-sm text to enhance legibility and reinforce the geometric precision of the sans-serif. On small labels over busy photographic backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure contrast. Never use font-weight a

Layout

The layout operates on a **fixed 12-column grid** with a maximum container width of 1150px (1200px on screens ≥1200px). The page uses a **fluid-to-fixed** model: on mobile, the gutter is 15px per side; on lg+ screens, the gutter expands to 105px, creating breathing room around content. Section separation uses **lg spacing (40px)** between major blocks; subsection separation uses **md spacing (24px)**. The hero image spans full viewport height minus navigation (calc(100vh - 92px) on desktop), creating an immersive entry point. All text containers maintain a max-width of 1150px to prevent line-length from exceeding ~70 characters at body-md size. White-space is intentional: empty space is not wasted space—it's a design material that emphasizes the importance of what remains. Avoid centering

Elevation & Depth

Depth in this system is achieved through **subtle shadow layering** rather than dramatic drop-shadows. The elevation scale uses three levels: **Level 1 (Base)** has no shadow—elements sit flush on the surface (#f5f4f2). **Level 2 (Cards, Dropdowns)** applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests a thin lift from the surface. **Level 3 (Modals, Overlays)** applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger blur radius that conveys greater separation. All shadows use pure black (rgba(0, 0, 0, ...)) with low opacity (12–15%) to maintai

Shapes

The shape philosophy is **Architectural Precision**—sharp corners and minimal rounding that echo the geometric clarity of modernist design. **Buttons and inputs** use border-radius: 4px (rounded.DEFAULT), a subtle softening that prevents harsh corners without introducing visual softness. **Cards and panels** use border-radius: 4px as well, maintaining consistency across interactive surfaces. **Dropdowns and modals** use border-radius: 4px to 8px (rounded.lg) only when they need visual distinction from standard UI elements. The rationale: sharp corners feel intentional and controlled; excessive

Components

Action Elements Buttons are minimal and text-driven. **button-primary** uses background: #000000, color: #ffffff, padding: 12px 24px, border: 1px solid #000000, border-radius: 4px, with transition: all 200ms ease-out. On hover, shift to background: #505050, border: 1px solid #505050 to signal interactivity without jarring color shifts. **button-secondary** is transparent with a 1px black border and black text; on hover, apply background: #e9ecef to show activation. All buttons use label-md typography (14px, 400 weight, 0.03em tracking) and maintain a minimum height of 44px for touch targets. Avoid icon-only buttons; pair icons with text labels for clarity.

Containers & Surfaces **card** uses background: #f5f4f2, border: 1px solid #d0d0d0, border-radius: 4px, padding: 24px, box-sha

Do's and Don'ts

**Do**

• Do use pure black (#000000) for primary text and interactive elements; it creates necessary contrast against the warm cream surface.
• Do maintain 1px borders at #505050 or #9ca3af for all UI containers; borders are the primary visual separator in this flat, shadow-minimal system.
• Do apply letter-spacing: 0.03em to all sans-serif labels and navigation text to enhance geometric precision and readability.
• Do use the lg spacing (40px) between major sections and md spacing (24px) between subsections; white-space is a design material.
• Do pair Libre Baskerville (serif) with GT America (sans) consistently; never mix in additional typefaces or weights.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and dropdowns; avoid shadows with opacity >15% or colored shadows.

**Don't**

• Don't use colors outside the defined palette; the warm cream (#f5f4f2) and black (#000000) are non-negotiable anchors.
• Don't apply border-radius >8px to standard UI elements; excessive rounding conflicts with the architectural precision aesthetic.
• Don't center-align body text; use left-alignment to maintain clear visual hierarchy and reading rhythm.
• Don't use font-weight above 400; the brand's sophistication comes from size hierarchy and spacing, not boldness.
• Don't apply multiple shadows or layered effects; one shadow per elevation level is sufficient and maintains clarity.
• Don't use color alone to signal state changes (e.g., red for error); always pair color with text labels or icons for accessibility.