Alche, Inc

Overview

Alche is a Tokyo-based creative studio specializing in digital entertainment experiences that challenge conventional design paradigms. The brand embodies "Architectural Minimalism"—a design philosophy that merges geometric precision with emotional resonance, using stark black canvases punctuated by vivid accent colors (neon red #eb103f, electric green #4eeb10, and cobalt blue #1068eb) to create visual tension and dynamism. The UI evokes a sense of controlled chaos: clean grid systems overlaid with diagonal line work, monospace typography for technical precision, and carefully orchestrated color moments that guide the user's eye toward key interactions. The emotional response is one of sophisticated energy—not chaotic, but deliberately composed, inviting users into a world where form and function are inseparable.

Alche's voice is precise, minimalist, and forward-thinking. The brand speaks in short, declarative sentences with technical vocabulary ("architect worlds," "spark hope") that positions the studio as both visionary and grounded. Tone is calm but assertive, never breathless or over-designed. Typography choices—Kozuka Gothic for body text paired with Roboto Mono for accents—reinforce this duality: Japanese typographic tradition meets international technical culture. Example sentence in Alche's voice: "Architect worlds that move hearts and spark hope."

Colors

The Alche color system operates on a principle of "chromatic punctuation"—a predominantly monochromatic black (#000000) and white (#ffffff) foundation is interrupted by three vivid accent colors that serve distinct roles. Primary red (#eb103f) is reserved exclusively for call-to-action buttons, interactive focus states, and brand-critical moments; it appears sparingly but with maximum impact. Secondary green (#4eeb10) and tertiary blue (#1068eb) function as supporting accents for status indicators, secondary CTAs, and thematic highlights in data visualization or portfolio items. The surface stack is minimal: surface (#000000), surface-container (#141414), and surface-container-high (#1f1f1f) provide subtle depth without compromising the stark aesthetic. On-surface text is pure white (#ffff

Typography

Alche's type system balances Japanese typographic tradition with international technical culture. Kozuka Gothic Pr6n serves as the primary typeface for all body and headline text, providing a clean, geometric aesthetic that feels both contemporary and rooted in Japanese design heritage. Roboto Mono is reserved for labels, metadata, and technical UI elements (buttons, form labels, timestamps), reinforcing the studio's precision-focused brand personality. Display text (72px, 700 weight, -0.02em letter-spacing) is used sparingly for hero statements and section headers; headline-lg (48px, 700 weight) anchors major sections; body-md (16px, 400 weight, 24px line-height) is the default reading size. Label-sm (11px, 700 weight, 0.08em letter-spacing) is applied to all interactive elements and appe

Layout

Alche employs a fixed 12-column grid system with a maximum container width of 1440px, maintaining visual rhythm across all viewport sizes. The gutter spacing is 50px on desktop (40px on tablet, 24px on mobile), providing generous breathing room that emphasizes the minimalist aesthetic. Page sections are separated by lg spacing (40px) vertically, creating clear visual breaks without excessive whitespace. The hero section uses a full-bleed background with geometric line work (rendered via SVG or CSS gradients) that extends edge-to-edge, while content within the hero is constrained to the container max-width and padded with md spacing (24px). Secondary sections use a card-based layout with surface-container backgrounds, each card padded with md spacing (24px) and separated by lg spacing (40px

Elevation & Depth

Depth in Alche's system is achieved through subtle shadow and layering rather than dramatic elevation changes. The base layer (Level 1) is the pure black background (#000000) with optional geometric line overlays (1px solid rgba(255, 255, 255, 0.1)). Standard cards and containers (Level 2) use box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to create a gentle lift from the background; these elements sit at surface-container (#141414) with no additional background tint. Elevated modals and floating elements (Level 3) use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and sit at surface-container-high (#1f

Shapes

Alche's shape language is defined by "Architectural Sharpness"—a deliberate rejection of rounded corners in favor of minimal, precise radii that suggest technical precision and control. Buttons and inputs use rounded-sm (2px), creating barely-perceptible softness that prevents harsh 90-degree angles while maintaining a sharp, technical appearance. Cards and larger containers use rounded-lg (12px), providing slightly more visual softness for content containers without compromising the minimalist aesthetic. The full radius (9999px) is reserved exclusively for badge components and circular icon b

Components

Action Elements Buttons in Alche follow a strict hierarchy. Primary buttons (button-primary) use the brand red (#eb103f) background with white text, 44px height, 12px vertical padding, and 2px border-radius. On hover, the background shifts to primary-container (#ff4d6d) with a 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) transition. Secondary buttons (button-secondary) have a transparent background with a 1px outline in outline color (#7e7e7e), shifting to surface-container-high on hover. Ghost buttons (button-ghost) use label-sm typography (11px, 700 weight) with transparent background and on-surface-variant text color, gaining a subtle rgba(255, 255, 255, 0.05) background on hover. All buttons use Roboto Mono for label text to reinforce technical precision.

Containers & Surfaces Ca

Do's and Don'ts

**Do**

• Do use the primary red (#eb103f) exclusively for high-priority CTAs and interactive focus states—never for decorative elements or backgrounds.
• Do maintain the stark black-and-white foundation; use accent colors as punctuation, not as dominant page elements.
• Do apply 2px border-radius to buttons and inputs; never use fully rounded corners except for badges.
• Do pair Kozuka Gothic body text with Roboto Mono labels to reinforce the technical-meets-cultural brand duality.
• Do use the geometric line work (grid overlays, diagonal strokes) at rgba(255, 255, 255, 0.05–0.1) opacity to add texture without competing with content.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels rendered over busy backgrounds for legibility.

**Don't**

• Don't use rounded corners larger than 12px on cards or containers; the brand aesthetic demands architectural precision, not organic softness.
• Don't apply accent colors (red, green, blue) to backgrounds or large surface areas; they are reserved for interactive moments and focal points.
• Don't mix typefaces within a single component; Kozuka Gothic for body, Roboto Mono for technical labels—never blend them.
• Don't use drop shadows or glows on interactive elements; rely on border color changes and background shifts to signal state.
• Don't exceed 40px of vertical spacing between sections; the layout should feel composed and intentional, not sparse.
• Don't apply opacity changes to accent colors; use the fixed-dim variants (primary-container, secondary-container, tertiary-container) for hover states instead.