JUNKBRANDING

Overview

JUNKBRANDING is a Japanese web design studio that specializes in transforming brand atmosphere into immersive digital experiences. The studio rejects the static, presentation-layer approach to web design in favor of what they call "入り込むWeb" (immersive web)—sites that invite users to step inside a brand's world rather than merely observe it. The aesthetic movement is **Atmospheric Glassmorphism**: a sophisticated blend of frosted-glass UI elements (backdrop-filter: blur(18px) saturate(130%), background: rgba(255, 255, 255, 0.08–0.14)) layered over a deep, dynamic background (#06070b to #24507e gradient), creating a sense of depth and presence without sacrificing clarity. The emotional response is one of calm sophistication—users feel they are navigating a curated space, not a generic corporate site.

The brand voice is precise, poetic, and deliberately Japanese in sensibility. Vocabulary emphasizes *空気感* (atmosphere, literally "air feeling"), *世界観* (worldview, the totality of a brand's aesthetic universe), and *体験* (experience, not mere information). The tone avoids breathless marketing language; instead, it speaks with the quiet confidence of a craftsperson. Example sentence in brand voice: "写真と文章を並べても、いちばん伝えたい空気感は、こぼれ落ちてしまう。" (Even when photos and text are arranged side by side, the atmosphere you most want to convey slips away.) This is not hyperbole—it is diagnosis.

Colors

The color system is built on a **deep-ocean foundation** with warm accents that pierce the darkness. Primary (#24507e) is a sophisticated navy-blue used sparingly on interactive elements and the hero background; it conveys trust and depth. The secondary accent, warm cream (#f4dcbb), appears on labels, eyebrows, and highlights—it is the brand's signature warmth, evoking natural materials and handcraft. Tertiary cyan (#bcefff) is reserved for subtle glows, inset borders (inset 0 1px rgba(255, 255, 255, 0.18)), and atmospheric accents that suggest light refraction through glass.

Surface colors follow a strict hierarchy: surface (#06070b) is the base black, surface-container (#142d50) is a mid-tone used for cards and modals, and surface-container-highest (#24507e) is the primary accent. All g

Typography

The type system pairs a serif headline family (Hiragino Mincho ProN / Yu Mincho for Japanese, serif fallback for Latin) with a humanist sans-serif body family (Hiragino Kaku Gothic ProN / Noto Sans JP). Serifs are reserved for display, headlines, and section titles—they convey editorial authority and craft. Sans-serif is used for body copy, labels, and UI text, ensuring legibility at small sizes. The hierarchy spans from display (60px, 0.02em letter-spacing) down to label-sm (12px, 0.42em letter-spacing for uppercase labels). All text over busy or dark backgrounds receives a subtle text-shadow: 0 1px 18px rgba(20, 45, 80, 0.55) to maintain readability without resorting to outline text. Line-height is consistently generous (1.6–2.1) to support Japanese character legibility and create breath

Layout

The layout uses a fluid 12-column grid with a max-width of 1180px (clamp(1.25rem, 5vw, 4rem) gutter). Sections are full-viewport height (min-height: 100svh) with generous vertical padding (clamp(7rem, 16vh, 12rem)) to create a sense of spaciousness and allow for scroll-triggered animations. The hero section is 100svh + 14svh padding-bottom to create a smooth blend into the next section. Container widths are set to min(100%, 1320px) for services and gallery sections, ensuring content never feels cramped on ultra-wide displays. White-space is treated as a design element: negative space around text and cards is never less than {spacing.lg} (40px), and section separators use transparent space rather than divider lines. The spacing scale is semantic—lg (40px) separates major sections, md (24px)

Elevation & Depth

Depth is achieved through **layered glassmorphism** rather than traditional shadow stacking. There are three elevation levels: Level 1 (Base) is the background gradient (#06070b to #24507e with radial-gradient overlays and blur(14px) scrim). Level 2 (Standard Glass) uses backdrop-filter: blur(18px) saturate(130%), background: rgba(255, 255, 255, 0.08), border: 1px solid rgba(225, 238, 255, 0.14), and box-shadow: 0 0.8rem 2rem rgba(35, 83, 128, 0.22), inset 0 1px rgba(255, 255, 255, 0.07). Level 3 (Elevated/Modal) increases blur to 40px (where used), background to rgba(255, 255, 255, 0.14), and

Shapes

The shape philosophy is **Precision Minimalism with Atmospheric Softness**. Buttons and interactive elements use border-radius: 999px (full pill shape) to signal interactivity and approachability, while cards and panels use border-radius: 14px (lg) for a subtle, refined corner. Input fields use border-radius: 4px (DEFAULT) for a technical, precise feel. The scatter gallery panels use border-radius: 2px (sm) to emphasize their photographic, documentary nature—they are windows into work, not decorative elements. This variation in radius creates visual rhythm: the softer pill buttons feel invitin

Components

Action Elements Buttons use a consistent glass-morphic treatment: background: rgba(255, 255, 255, 0.08), border: 1px solid rgba(225, 238, 255, 0.18), border-radius: 999px, padding: 0.65em 1.4em, and box-shadow: 0 0.8rem 2rem rgba(35, 83, 128, 0.22), inset 0 1px rgba(255, 255, 255, 0.07). On hover, transform: translateY(-2px) and border-color shifts to rgba(220, 236, 255, 0.34). Transitions are 0.28s ease for all properties. Focus-visible uses outline: 2px solid rgba(210, 232, 255, 0.76) with outline-offset: 4px. The "Funky Version" button in the header is a variant: it uses radial-gradient(circle at 50% 30%, rgba(235, 244, 255, 0.14), transparent 62%), #24507e80 background and includes a hover text swap (opacity: 0; transform: translateY(±0.55rem)) with 0.22s transition timing.

Co

Do's and Don'ts

**Do**

• Do use glass surfaces (backdrop-filter: blur(18px), background: rgba(255, 255, 255, 0.08–0.14)) as the primary container for all interactive elements—they are the visual language of the brand.
• Do apply text-shadow: 0 1px 18px rgba(20, 45, 80, 0.55) to all body text and labels over the background to ensure readability without sacrificing atmosphere.
• Do use the warm accent (#f4dcbb) sparingly on eyebrows, labels, and highlights—it is the brand's signature and should feel precious, not ubiquitous.
• Do maintain generous white-space (minimum {spacing.lg} / 40px) around cards and sections to create breathing room and emphasize the immersive, spacious feeling.
• Do use serif typography (Hiragino Mincho ProN / Yu Mincho) exclusively for headlines and display text—it conveys editorial authority and craft.

**Don't**

• Don't use hard shadows (box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)) or flat colors—they break the atmospheric glassmorphism aesthetic. All shadows must include inset highlights and warm tinting.
• Don't apply border-radius: 0 (hard corners) to interactive elements or cards—use at least border-radius: 14px (lg) for cards and 999px for buttons.
• Don't use sans-serif for headlines or display text—it undermines the editorial, crafted voice of the brand. Reserve sans-serif for body, labels, and UI text only.
• Don't exceed 3 accent colors in a single section—the brand relies on restraint. Warm (#f4dcbb), cyan (#bcefff), and primary (#24507e) should be used strategically, not decoratively.
• Don't remove or reduce the inset highlight (inset 0 1px rgba(255, 255, 255, 0.07–0.18)) from glass surfaces—it is essential to the refraction effect and visual cohesion.