John Acunto

Overview

John Acunto is a personal portfolio brand that embraces Celestial Minimalism—a design philosophy that pairs vast, contemplative dark spaces with precise, elegant typography and high-contrast accents. The aesthetic evokes the quiet majesty of a starlit night sky, creating an atmosphere of aspiration and thoughtful introspection. The brand serves creative professionals and visionaries who value clarity, restraint, and the power of negative space. The UI communicates through silence and subtlety: a dark canvas (#161616) punctuated by pure white (#ffffff) and rare moments of accent color (tertiary yellow #ffff00), inviting users into a meditative, distraction-free experience.

The voice is measured, confident, and understated. Vocabulary leans toward timeless, sophisticated language—never trendy, never casual. The brand speaks in complete thoughts, favoring substance over brevity. Example sentence in brand voice: 'Launching Soon—a moment of anticipation before something meaningful begins.'

Colors

The color system is built on a dark-first philosophy: the dominant surface (#161616) creates a canvas of calm, while the primary accent—pure white (#ffffff)—serves as the only interactive and typographic anchor. This extreme contrast ensures accessibility and visual clarity without relying on color saturation. Secondary grays (#6f6f6f, #bfbfbf, #7f8080) provide subtle hierarchy and disabled states. The tertiary accent—bright yellow (#ffff00)—is reserved for rare, high-priority moments (alerts, highlights, or future interactive states) and should be used sparingly to maintain the brand's restraint. Error states use a muted red (#ff4444) to signal problems without jarring the user. Surface containers (#2a2a2a, #353535) create depth through incremental lightness, enabling layered UI without a

Typography

The type system pairs Playfair Display (serif, elegant, timeless) for display and headline scales with Source Sans Pro (humanist sans-serif, warm, accessible) for body and label text. This pairing creates a sophisticated hierarchy: Playfair's high contrast and distinctive letterforms command attention at large sizes (62px for display, 48px for headline-lg), while Source Sans Pro's open counters and generous spacing ensure readability at smaller scales (16px body-md, 14px label-md). Font weights are intentionally limited: Playfair uses 400 (regular) and 700 (bold) only, while Source Sans Pro employs 300 (light), 400 (regular), and 700 (bold) to avoid visual clutter. Line heights are generous (1.4–1.5 unitless ratios) to maximize legibility on dark backgrounds and reduce eye strain. Letter-s

Layout

The layout follows a fluid, single-column grid with a max-width of 1023px, centered on the viewport. This constraint ensures the design remains intimate and focused, preventing content from sprawling across ultra-wide screens. The spacing scale is semantic: lg spacing (40px) separates major sections (hero, subscription form, footer), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room within components. The gutter (24px) is applied consistently to left and right edges on mobile and tablet, scaling to 40px on desktop. White space is treated as a design element, not a void—the dark background absorbs silence, making negative space feel intentional and calming. Hero sections occupy 60–80% of the viewport height, allowing the background imagery

Elevation & Depth

Depth is conveyed through subtle shadow and layering rather than bright highlights or gradients. The shadow system uses three levels: sm (0 2px 6px rgba(0, 0, 0, 0.3)) for small interactive elements like buttons and badges, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and input fields, and lg (0 8px 24px rgba(0, 0, 0, 0.4)) for modals and overlays. Shadows are always dark and slightly warm-toned to harmonize with the dark background. Modals and overlays use a semi-transparent backdrop (rgba(22, 22, 22, 0.8)) to dim the background and focus attention. No gradients are used; instead, surface con

Shapes

The shape philosophy is Architectural Precision—a balance between sharp functionality and subtle softness. Border-radius values are conservative and purposeful: buttons and inputs use 4px (0.5rem / {rounded.DEFAULT}) for a clean, modern edge that feels technical without being cold; cards and larger containers use 12px (1rem / {rounded.lg}) to introduce warmth and approachability; modals and overlays use 16px (1.5rem / {rounded.xl}) to soften their dominance on screen. The full radius (9999px) is reserved for badges and pill-shaped elements to signal a distinct visual category. This graduated a

Components

Action Elements Buttons are the primary interactive affordance. The primary button uses {colors.primary} (#ffffff) background with {colors.on-primary} (#000000) text, {typography.label-md} (14px, 700 weight), {rounded.DEFAULT} (4px), and padding 8px 32px for a compact, high-contrast appearance. The button height is fixed at 40px to ensure touch-friendly sizing (minimum 44px is recommended, but 40px is acceptable for desktop-only interfaces). On hover, the background shifts to {colors.primary-container} (#e9ecef) with text color {colors.on-primary-container} (#161616), creating a subtle visual feedback without animation. Secondary buttons use a transparent background with a 1px border in {colors.outline} (#7f8080) and text in {colors.primary} (#ffffff), allowing them to recede visually

Do's and Don'ts

**Do**

• Do use white (#ffffff) as the primary interactive color—it commands attention and ensures accessibility on dark backgrounds.
• Do maintain generous line-height (1.4–1.5) on body text to maximize legibility on dark surfaces and reduce eye strain.
• Do apply subtle shadows ({elevation.md} and {elevation.lg}) to create depth without introducing gradients or bright highlights.
• Do reserve the tertiary yellow (#ffff00) for rare, high-priority moments—overuse dilutes its impact and breaks the minimalist aesthetic.
• Do use {rounded.DEFAULT} (4px) on interactive elements and {rounded.lg} (12px) on containers to maintain architectural precision.
• Do center content and limit max-width to 1023px to create an intimate, focused experience that resists sprawl.

**Don't**

• Don't use color saturation or gradients to create depth—rely on shadows, layering, and incremental surface lightness instead.
• Don't apply text-shadow to body text; reserve it for small labels (12px–14px) over photographic backgrounds only.
• Don't mix serif and sans-serif fonts within a single line or component—maintain clear typographic hierarchy by scale and weight.
• Don't use border-radius values between 5px and 11px; stick to the defined scale (4px, 12px, 16px) to avoid visual inconsistency.
• Don't animate transitions faster than 200ms or slower than 400ms; the brand favors subtle, purposeful motion over flashy effects.
• Don't introduce new accent colors; if a new status or state is needed, use tints or shades of existing primary, secondary, or tertiary colors.