Hiroto Sato

Overview

Hiroto Sato's portfolio embodies Architectural Minimalism—a design philosophy that treats digital space with the precision and restraint of modernist architecture. The brand serves creative technologists and design-conscious clients seeking a portfolio that communicates mastery through absence rather than abundance. The aesthetic is deliberately austere: a near-white canvas (#ffffff) anchored by deep charcoal text (#0b0b0a), with a single warm accent in burnt sienna (#8f6200) reserved exclusively for interactive moments and brand moments. This restraint creates an almost gallery-like quality, where every visual element—a navigation link, a project card, a transition—feels intentional and earned. The emotional response is one of quiet confidence: the work speaks louder than the frame.

The voice is precise, economical, and unapologetically technical. Hiroto communicates through understatement—no breathless marketing language, no decorative prose. The vocabulary favors specificity: "Creative development," "Motion," "3D modeling" rather than "innovative" or "cutting-edge." Tone is calm and direct, as if speaking to a peer in a studio. Example sentence in brand voice: "Tokyo-based. Focused on the intersection of code, motion, and form."

Colors

The color system operates on a principle of maximum contrast and minimal distraction. The primary surface is pure white (#ffffff, rgb(255, 255, 255)), which serves as the default canvas for all content. The foreground text is near-black (#0b0b0a, rgb(11, 11, 10)), chosen for its warmth compared to pure black—it reads as slightly softer without sacrificing legibility. The accent color, burnt sienna (#8f6200), is the brand's only true chromatic voice and appears exclusively on interactive elements: primary CTAs, active navigation states, and hover effects. This restraint makes the accent feel precious and intentional.

The secondary palette supports hierarchy and state: muted grays (#10100fad for disabled states, #0b0b0a94 for secondary text) create visual rhythm without competing for attent

Typography

The type system uses a single typeface family—Helvetica Neue LT Pro—across all scales, reinforcing the architectural minimalism of the brand. This monolithic approach mirrors the design philosophy: one tool, used with precision across contexts. Display sizes (60px, fontWeight 500, lineHeight 68px) anchor hero sections and major headings with generous leading (1.13x) that creates breathing room. Headline scales (40px, 28px) maintain the same weight and taper leading slightly (1.2x to 1.29x) as they descend, preserving visual hierarchy without introducing weight variation. Body text (16px–18px, fontWeight 400, lineHeight 24px–28px) uses a 1.5x line-height ratio for comfortable reading on screen. Labels and navigation use uppercase letterSpacing of 0.045em to 0.035em, creating a technical, pr

Layout

The page layout uses a fluid grid system anchored by a maximum container width of 960px, allowing content to breathe on larger screens while maintaining focus on medium displays. The primary spacing unit is 8px, with semantic scales: xs (4px) for micro-adjustments, sm (12px) for component padding, md (24px) for section separation, lg (40px) for major content blocks, and xl (64px) for full-page margins. Responsive gutter values use CSS clamp() to scale fluidly: ui-gutter-x ranges from 14px to 44px (clamp(14px, 2.6vw, 44px)), and ui-gutter-y from 18px to 40px (clamp(18px, 2.8vw, 40px)), ensuring the layout adapts gracefully from mobile to desktop without discrete breakpoints. Page height is set to 100svh (small viewport height) to account for mobile browser chrome. Content sections use a 12-

Elevation & Depth

Depth in this system is achieved through subtle shadow and layering, never through color darkening. The shadow palette consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and overlays. These shadows use a soft, spread blur (8px to 24px) and low opacity (6% to 15%) to maintain the minimalist aesthetic—they suggest depth without announcing it. Cards and panels sit at Level 1 (md shadow, 1px solid border at #10100f24) a

Shapes

The shape language follows Architectural Sharpness—a philosophy that favors clean lines and precise geometry over organic curves. The default border-radius is 0.5rem (8px), applied to input fields, dropdown panels, and small interactive elements. Larger components like cards and modals use 1rem (16px) for a slightly softer corner that still reads as intentional and controlled. Navigation buttons and the back-circle-control use 9999px (full) for a perfect circle, creating a visual punctuation mark that contrasts with the rectilinear layout. The rationale: sharp corners (0px) on structural eleme

Components

Action Elements Primary buttons use the accent color (#8f6200) as background with white text, 12px vertical padding, 24px horizontal padding, and a full-radius border (9999px). On hover, the background shifts to the fixed-dim variant (#c9a227) and the element translates -2px upward (transform: translate(-2px)), creating a subtle lift. The transition timing is 0.18s for background and 0.18s for transform, making the interaction feel responsive without being jarring. Secondary navigation links use transparent backgrounds with near-black text (#0b0b0a75 at 46% opacity), uppercase letterSpacing of 0.045em, and a 0.18s transition on color and transform. On hover, text color becomes fully opaque (#0b0b0a) and translates -2px, maintaining consistency with primary button behavior. The back-cir

Do's and Don'ts

**Do**

• Do use the accent color (#8f6200) sparingly—only on primary CTAs, active states, and brand moments—to maintain its visual impact and signal importance.
• Do maintain generous white space (lg spacing: 40px minimum between sections) to preserve the gallery aesthetic and allow content to breathe.
• Do use Helvetica Neue LT Pro exclusively across all scales and weights to reinforce the architectural minimalism and avoid visual fragmentation.
• Do apply the md-level shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all elevated surfaces and transition to lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)) on hover for consistent depth hierarchy.
• Do use uppercase letterSpacing (0.045em on labels, 0.035em on navigation) to create a technical, precise feeling that echoes the brand's focus on code and craft.

**Don't**

• Don't introduce new colors outside the defined palette—no gradients, no secondary accent colors, no brand-adjacent hues that dilute the minimalist identity.
• Don't use border-radius values between 0px and 8px except in micro-interactions; maintain clear hierarchy by using 0px (structural), 8px (interactive), 16px (cards), or 9999px (circles).
• Don't apply shadows to text or use text-shadow except on small labels (12px or smaller) over busy backgrounds, where a 0 1px 2px rgba(0, 0, 0, 0.1) shadow improves legibility.
• Don't animate transitions faster than 0.18s or slower than 0.26s; the brand voice is responsive but unhurried, and jarring or sluggish interactions undermine the precision aesthetic.
• Don't use dark mode or introduce high-contrast inverted color schemes; the brand identity is fundamentally tied to light, clarity, and the white canvas as a gallery space.