A broad invitation, with depth a click away.
The opening message creates room for different application needs. Dedicated expertise, approach, and quality pages carry the more specific story. Project references stay compact on the homepage.
Form & Phase / Form & Phase system
A studio. A system.
A working expression.
A studio-initiated project connecting the Form & Phase identity, a glass-inspired visual language, and the components behind this website.
The starting point
Give a broad capability
a clear expression.
Build an independent studio identity that can speak about the whole application journey without turning the homepage into a technical inventory.
The site needed to feel expansive and approachable, while offering enough detail for someone to understand how the work would be handled. The studio’s own story needed to stand independently of its founder’s personal portfolio.
The supplied folded F mark and Form & Phase name provided the foundation. The website connects that identity to open compositions, strong light/dark contrast, and a restrained optical material language.
The important choices
A few decisions that shaped it.
Use atmosphere without obscuring the interface.
The hero carries the glass composition. Controls retain stable fills and sharp content, with a nearby directional rim and soft halo. Primary buttons separate a pale inner line from a colored outer glow.
Make the guide and the implementation connect.
Shared tokens define colors, type, spacing, and surface roles. React components carry variants and behavior. A working lab exposes controls, states, themes, and content stress examples.
Keep the less visible behavior in scope.
Compound controls use Radix primitives; text fields retain native browser behavior. The contact flow includes visible labels, validation, error-summary focus, and feedback when a message needs another attempt. Reduced-motion and plain-surface fallbacks are part of the implementation.
Inspectable work
Open the system.
Try the details.
Explore the foundations and working components behind the website.
Current result
A working foundation.
A studio identity expressed through a connected website and shared design system.
The pages, navigation, themes, and component examples draw from the same foundations. Reusable patterns connect the visual language to the way the website behaves, giving the studio a coherent expression across every destination.
The written guide makes the decisions understandable. The component lab makes them tangible. Together, they give future pages and features a shared place to begin.
Explore the design systems practice