starboy – CREATURE

Overview

starboy – CREATURE is a precision-engineered product showcase system celebrating the intersection of industrial design, mechanical clarity, and playful interactivity. The brand serves design-forward audiences who appreciate tactile, bespoke objects and the meticulous craftsmanship behind them. The aesthetic movement is 'Mechanical Minimalism'—a philosophy that strips away ornament to reveal the essential geometry and function of engineered forms. The UI evokes a sense of controlled precision: every element is intentional, every interaction is responsive, and the visual language mirrors the product's own technical sophistication. The emotional response is one of quiet confidence—the user feels they're engaging with something rare and carefully considered.

The brand voice is direct, lowercase, and conversational without being casual. Vocabulary patterns favor technical precision over marketing hyperbole: 'eye looks' instead of 'color variants,' 'render' instead of 'image,' 'little guy' as an affectionate, human-scale descriptor. The tone is playful yet authoritative, inviting users to explore without condescension. Example sentence in brand voice: 'he's just a little guy with a lot of personality.'

Colors

The color system operates on a principle of 'monochromatic foundation with vivid accent punctuation.' The primary palette is a near-black (#2a2b2c) paired with off-white (#f9f9f9), creating maximum contrast and visual clarity—essential for showcasing product renders and technical details. This neutral foundation is deliberately austere, reflecting the industrial aesthetic. Secondary and tertiary colors (neon green #00ff00 and bright yellow #ffff00) are reserved for accent moments: interactive states, highlights on product renders, and call-to-action emphasis. These saturated accents appear sparingly but with high impact, creating visual tension that draws attention without overwhelming the composition.

Usage rules: Primary (#2a2b2c) is applied to all interactive elements—buttons, links, a

Typography

The type system is built on two custom typefaces—MillingTriplex1mm for headlines and CTAs, MillingTriplex1_5mm for body text—both loaded via @font-face with font-display: swap to ensure fast rendering. MillingTriplex1mm is a condensed, geometric sans-serif that conveys precision and technical authority; MillingTriplex1_5mm is slightly more open, optimized for readability at smaller sizes. Display (166px, -0.08em letter-spacing) is reserved for hero headlines and sets the visual tone with extreme scale and negative tracking. Headline-lg (48px) and headline-md (32px) establish section hierarchy with consistent -0.04em to -0.055em letter-spacing, creating a tight, engineered appearance. Body text (18px–16px) uses -0.04em letter-spacing across both typefaces, maintaining the brand's compressed

Layout

The layout system uses a fluid, container-query-based grid with a maximum width of 1600px and a 4-column layout on desktop, collapsing to single-column on mobile. The hero section employs aspect-ratio: 1.25 / 1 to maintain consistent proportions across viewports, with product renders positioned absolutely and rotated via CSS transforms (rotate(63deg), rotate(-10deg), etc.) to create dynamic visual depth. Spacing follows a semantic scale: lg (40px) separates major sections, md (24px) provides breathing room within cards and form groups, and sm (12px) tightens internal component spacing. The gutter is consistently 24px, applied as padding on the main-content wrapper. Container queries (container-type: inline-size) enable responsive typography scaling via cqw units (e.g., font-size: 13cqw for

Elevation & Depth

Depth in this system is achieved through layered shadows and z-index stacking rather than color gradation. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle dividers and disabled states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and dropdown panels, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating elements. Product renders use mix-blend-mode (screen, plus-lighter) and filter effects (saturate(1.2), contrast(1.3), hue-rotate(9deg)) to layer over the background without traditional shadows, creating a luminous, integrated appearance. The ren

Shapes

The shape philosophy is 'Architectural Sharpness'—a commitment to right angles and zero border-radius as the default, reflecting the product's engineered precision. All rounded values are set to 0px (sm, DEFAULT, md, lg, xl), with full (9999px) reserved only for badge components and circular UI elements. This hard-edge aesthetic mirrors the product's industrial design language and creates visual consistency with the technical renders. Buttons, cards, inputs, and dropdowns all maintain sharp corners (border-radius: 0px) to reinforce the mechanical aesthetic. The only exception is badges (.badge

Components

Action Elements Buttons are the primary interaction affordance and come in two variants: primary (solid dark background) and secondary (transparent with border). Primary buttons use backgroundColor: rgb(42, 43, 44), textColor: rgb(249, 249, 249), padding: 16px 24px, height: 48px, with no border-radius. On hover, they scale to 0.95 and reduce opacity to 0.85 via transition: transform 0.3s ease, opacity 0.3s ease, creating tactile feedback without moving the element. Secondary buttons maintain a transparent background with border: 1px solid #d0d0d0 and shift to backgroundColor: #fafafa on hover. The eye-looks-button component is a specialized CTA that spans the full width of its container, displaying 'view all 400' with an inline SVG arrow. It uses the same hover behavior (scale 0.95, op

Do's and Don'ts

**Do**

• Do use the primary color (#2a2b2c) exclusively for interactive elements—buttons, links, and active states—to create a clear affordance hierarchy and maintain visual consistency.
• Do apply negative letter-spacing (-0.04em to -0.08em) across all typography to reinforce the compressed, engineered aesthetic and maintain brand distinctiveness.
• Do reserve secondary (neon green #00ff00) and tertiary (bright yellow #ffff00) colors for accent moments only—product render highlights, interactive feedback, and secondary CTAs—to maximize their visual impact.
• Do use container queries (container-type: inline-size, font-size: 13cqw) for responsive typography scaling to ensure text remains proportional to its container across all viewports.
• Do maintain sharp corners (border-radius: 0px) on all standard components to reinforce the mechanical, architectural aesthetic and create visual consistency with the product's design language.

**Don't**

• Don't apply rounded corners (border-radius > 0) to buttons, cards, or inputs—the sharp-edge aesthetic is fundamental to the brand identity and any deviation breaks visual cohesion.
• Don't use the secondary or tertiary accent colors on primary CTAs or body text—reserve them for highlights and interactive feedback only to prevent visual noise and maintain hierarchy.
• Don't exceed 1600px container width or deviate from the 4-column grid on desktop—the layout system is intentionally constrained to support the product showcase and maintain visual rhythm.
• Don't apply text-transform: uppercase or use sentence case in body copy—the brand voice is lowercase by default, and uppercase breaks the casual-yet-precise tone.
• Don't add drop shadows or blur effects to standard UI elements—elevation is achieved through z-index stacking and subtle outline borders, not atmospheric effects, to maintain the clean, technical aesthetic.