Nine To Five Studio

Overview

Nine To Five Studio is an Italian architecture firm specializing in precision-driven BIM (Building Information Modeling) design. The brand embodies a philosophy of methodical rigor combined with creative vision, serving clients who demand uncompromising architectural excellence. The aesthetic is rooted in "Architectural Minimalism with Precision Accents"—a design language that pairs a clean, light-neutral canvas (predominantly white and soft grays) with bold, energetic accent colors (chartreuse-yellow #b8a600 and emerald-green #1cc691) that signal innovation and technical mastery. The UI evokes clarity, confidence, and forward-thinking methodology.

The brand voice is direct, professional, and intellectually rigorous—never casual, never apologetic. Vocabulary emphasizes precision, methodology, and creative integrity. Example sentence in brand voice: "Precision, method, and creativity converge in architecture without compromise." The tone avoids hyperbole; instead, it lets the work speak through clean typography, generous whitespace, and strategic use of accent color to highlight key ideas.

Colors

The color system balances a neutral, professional foundation with two distinct accent colors that represent the studio's dual commitment to technical precision and creative innovation. Primary (#b8a600, a warm chartreuse-yellow) is deployed on call-to-action buttons, key interactive elements, and brand-defining highlights—it signals energy and forward momentum. Secondary (#1cc691, an emerald-green) appears in status indicators, success states, and supporting UI elements, reinforcing the brand's commitment to sustainable, methodical practice. Tertiary (#0073ce, a professional blue) is reserved for informational hierarchy and secondary actions. The surface stack uses pure white (#ffffff) as the base, with carefully calibrated grays (#e9ecef for containers, #6c757d for secondary text, #505050

Typography

The type system is built on PPNeueMontreal, a geometric sans-serif that conveys technical precision and contemporary sophistication. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish section hierarchy with tight letter-spacing (-0.02em and -0.01em respectively) that reinforces the brand's methodical character. Body text (16px–18px, 400 weight, 24–28px line-height) maintains readability across all contexts with 0.01em letter-spacing for subtle refinement. Labels (12–14px, 500–600 weight) are used for UI controls and metadata, with 0.02em letter-spacing to ensure clarity at small sizes. When displaying labels over busy backgrounds or in high-con

Layout

The layout system employs a 12-column grid with a maximum container width of 1280px, supporting both fixed and fluid layouts depending on content type. The page rhythm is established through consistent spacing: lg spacing (40px) separates major sections, md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room within components. The gutter width is 24px, applied consistently across all breakpoints to maintain visual cohesion. White-space is treated as a design element, not an afterthought—generous margins around hero content, ample padding within cards (24px), and clear separation between interactive elements create a sense of calm professionalism. The container max-width of 1280px ensures content remains readable on large displays while the grid

Elevation & Depth

Depth is conveyed through a restrained shadow system that emphasizes clarity over drama. The elevation scale consists of three levels: Level 1 (sm) uses 0 1px 2px rgba(0, 0, 0, 0.06) for subtle definition of interactive elements like input fields and small buttons. Level 2 (md) applies 0 3px 8px rgba(0, 0, 0, 0.15) to cards, dropdowns, and hover states, creating a clear separation from the background. Level 3 (lg) reserves 0 8px 24px rgba(0, 0, 0, 0.12) for modals, overlays, and elevated panels that demand maximum visual prominence. No element uses blur effects or glassmorphism; instead, the s

Shapes

The shape philosophy is "Architectural Sharpness with Functional Softness"—a balance between the studio's precision-driven identity and user-friendly approachability. Buttons and interactive elements use rounded: sm (0.25rem / 4px) for a crisp, technical appearance that aligns with the brand's methodical character. Cards and containers use rounded: DEFAULT (0.5rem / 8px) to provide subtle softness without compromising the minimalist aesthetic. Input fields and form elements also use rounded: DEFAULT (0.5rem / 8px) to maintain visual consistency. Larger containers and modals use rounded: lg (1r

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses backgroundColor: {colors.primary} (#b8a600), textColor: {colors.on-primary} (#000000), padding: 6px 16px, height: 40px, rounded: {rounded.sm} (4px), and fontWeight: 600 at 14px. On hover, button-primary-hover transitions to backgroundColor: {colors.primary-fixed-dim} (#d4af37) with boxShadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift effect. button-secondary uses a transparent background with a 1px border in {colors.outline} (#6c757d) and textColor: {colors.primary}; on hover, it transitions to backgroundColor: {colors.surface-container-high} (#e0e0e0). All button transitions use 200ms ease timing to feel responsive without being jarring.

Containers & Surfaces Cards (card component) u

Do's and Don'ts

**Do**

• Do use primary color (#b8a600) exclusively on primary CTAs and key interactive moments—it's the brand's signature accent and loses impact if overused.
• Do maintain generous whitespace (lg spacing: 40px between sections, md spacing: 24px within cards) to reinforce the minimalist, precision-driven aesthetic.
• Do apply the full PPNeueMontreal type stack with precise letter-spacing values (display: -0.04em, headline: -0.02em, body: 0.01em) to preserve the technical, methodical brand voice.
• Do use the restrained shadow system (0 3px 8px rgba(0, 0, 0, 0.15) for elevated states) to create depth without visual noise or glassmorphism effects.
• Do pair primary (#b8a600) with secondary (#1cc691) strategically—use primary for action, secondary for success/confirmation states—to create a coherent accent palette.

**Don't**

• Don't use rounded corners larger than lg (16px) on buttons or form elements—the brand's precision requires crisp, defined edges (sm: 4px for buttons, DEFAULT: 8px for cards).
• Don't apply multiple shadows or blur effects to the same element; the elevation system is intentionally restrained to maintain clarity and minimize visual clutter.
• Don't override the PPNeueMontreal typeface with system fonts or generic sans-serifs—the geometric precision of PPNeueMontreal is core to the brand identity.
• Don't use the primary color (#b8a600) for body text, backgrounds, or disabled states; reserve it exclusively for interactive, attention-demanding elements.
• Don't reduce padding or spacing below sm (12px) in cards or containers—the minimalist aesthetic depends on breathing room, not compression.