fromanother

Overview

fromanother is an artist-led creative studio and collective that transforms complex strategic challenges into bold, culturally-resonant visual experiences. Operating across Ho Chi Minh City, Hong Kong, Tokyo, and Paris, the practice serves global brands seeking work that defines the present moment and shapes what comes next. The aesthetic movement is "Neon Minimalism with Depth"—a sophisticated fusion of deep, near-black navy backgrounds (#051236) with vivid cyan-to-blue gradients and luminous yellow accents (#fffde2), creating an immersive, almost ethereal digital environment that evokes both technical precision and artistic experimentation. The UI conveys clarity through constraint: every element is intentional, every color choice carries meaning, and the overall effect is one of focused intensity rather than visual noise.

The brand voice is direct, confident, and unapologetically creative. fromanother speaks in declarative statements—"We craft work that defines the now and shapes what is next"—with a tone that is precise, ambitious, and never apologetic about its artistic ambition. The vocabulary leans into creative language ("artist-led," "craft," "curiosity") while maintaining professional credibility. Example sentence in brand voice: "We partner with global brands on strategy, UI/UX, and digital product—transforming vision into work that moves culture forward."

Colors

The color system is built on a high-contrast, immersive dark-mode aesthetic anchored by a deep navy surface (#051236) that serves as the primary canvas. This is not a neutral background—it is a deliberate, branded choice that evokes depth and sophistication. The primary accent is a medium blue (#1740a9), used sparingly on interactive elements, focus states, and key CTAs to create a sense of controlled energy. The secondary accent is a vivid cyan (#00d4aa), deployed for highlights, status indicators, and supporting UI elements to create visual rhythm and depth. The tertiary accent is a luminous, warm yellow (#fffde2), which appears as the dominant text color and is used strategically on the most prominent headlines and brand elements—creating a striking, almost neon-like contrast against th

Typography

The type system employs three custom font families—twkFont (primary, weights 400 and 600), ivoryFont (italic accent, weight 500), and herbikFont (secondary, weights 400 and 500)—to create a distinctive, artist-driven visual identity. Display (73px, 600 weight, -0.04em letter-spacing) is reserved for hero headlines and sets the tone with bold, condensed letterforms; Headline-lg (48px, 600 weight) is used for section titles and major content blocks; Body-md (16px, 400 weight, 24px line-height) is the workhorse for all body copy and ensures readability at any size. The type hierarchy is intentionally steep—there is significant visual separation between display and body text, which reinforces the brand's confidence and clarity. Label-md (14px, 500 weight, 0.01em letter-spacing) is used for but

Layout

The page layout uses a 12-column grid system with a fixed container max-width of 1200px, centered on the viewport. The grid is fluid on mobile (single column with 24px horizontal gutter) and expands to full 12-column layout at 1200px breakpoints. Horizontal padding (--padding-x) is 24px on mobile, 32px on tablet (768px+), and 48px on desktop (1200px+), creating a breathing room that scales with screen size. Section separation uses lg spacing (40px) for major content blocks and md spacing (24px) for subsections, creating a clear visual rhythm that guides the eye through the page. The hero section occupies the full viewport height with centered content, while subsequent sections use a 60/40 or 50/50 split layout depending on content type. Cards and content containers use md padding (24px) in

Elevation & Depth

Depth in this system is achieved through a layered approach combining backdrop-filter blur, rgba overlays, and subtle shadows. Level 1 (Base) is the deep navy surface (#051236) with no additional treatment. Level 2 (Standard Cards & Containers) uses backdrop-filter: blur(8px) with background: rgba(23,64,169,0.15) and a 1px border at rgba(255,253,226,0.1), creating a frosted-glass effect that sits slightly above the base. Level 3 (Modals & Elevated Surfaces) uses backdrop-filter: blur(12px) with background: rgba(23,64,169,0.25) and a 1px border at rgba(255,253,226,0.15), creating a more pronoun

Shapes

The shape philosophy is "Precision with Softness"—a balance between sharp, technical corners and approachable roundness that reflects the brand's dual nature as both a strategic consultancy and an artistic collective. Buttons and interactive elements use full border-radius (9999px), creating pill-shaped forms that feel modern and approachable; this is applied to all primary and secondary buttons, badges, and the consent banner. Cards and content containers use lg radius (1rem / 16px), providing enough roundness to feel contemporary without sacrificing the sense of structure. Input fields and s

Components

Action Elements Buttons are the primary interactive element and come in three variants: primary (solid background at {colors.primary}, text at {colors.on-primary}, rounded: full, padding: 6px 16px, fontWeight: 500), secondary (transparent background with 1px border at rgba(255,253,226,0.3), text at {colors.on-surface}, same radius and padding), and ghost (transparent, no border, used for tertiary actions). All buttons use label-md typography and apply a 0.2s ease transition on hover. Primary buttons on hover shift to {colors.primary-container} (#2d5fd6) with text remaining at {colors.on-primary-container}. Secondary buttons on hover use background: rgba(255,253,226,0.1). The consent banner includes two button variants: consent-button-allow (solid black background, white text, rounded:

Do's and Don'ts

**Do**

• Do use the yellow (#fffde2) as the primary text color on dark surfaces—it is the brand's signature and must be protected for maximum impact.
• Do apply backdrop-filter: blur(8px) to all elevated surfaces to create the frosted-glass depth effect that defines the visual system.
• Do maintain at least 4.5:1 contrast ratio between text and background colors to ensure accessibility across all UI elements.
• Do use the primary blue (#1740a9) sparingly on interactive elements and focus states—it is an accent, not a dominant color.
• Do scale spacing proportionally with breakpoints: use 24px gutter on mobile, 32px on tablet, 48px on desktop to maintain visual rhythm.
• Do apply 0.2–0.3s ease transitions to all hover and focus states for smooth, responsive feedback.
• Do use full border-radius (9999px) on buttons and badges to create the modern, approachable pill-shape aesthetic.
• Do reserve the cyan secondary color (#00d4aa) for highlights and supporting elements—never use it as a primary text color.

**Don't**

• Don't use the yellow (#fffde2) on light backgrounds—it has insufficient contrast and will become illegible.
• Don't apply heavy drop shadows (box-shadow: 0 20px 60px) to create depth; instead, use backdrop-filter blur and rgba overlays for the frosted-glass effect.
• Don't mix border-radius values inconsistently—use the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual coherence.
• Don't override the primary blue (#1740a9) with other accent colors on interactive elements; it is the brand's interactive signal.
• Don't use system fonts or generic sans-serif fallbacks—always load the custom font stack (twkFont, ivoryFont, herbikFont) via @font-face.
• Don't apply text-shadow to body copy—only use it on small labels over busy backgrounds or on hero headlines for lift.
• Don't create new color values outside the defined palette—all surfaces should use rgba overlays of the primary blue or the defined hex values.
• Don't reduce letter-spacing on display text below -0.04em; the condensed letterforms are part of the brand's visual identity.