studio.morflax.com — Design System
1. Visual Theme & Atmosphere
Studio Morflax is a 3D asset and mockup tool with a light, airy interface that feels product-forward rather than marketing-heavy. The pale off-white canvas (rgb(245,245,247)) blurs into white cards and gentle borders, creating an environment that subordinates itself to the 3D content it hosts. The black footer provides a dramatic anchor point at the bottom. The multi-typeface system — Inter for UI, Teko for dramatic display moments, and Rogan for labels — creates a layered hierarchy that ranges from neutral utility to punchy display impact.
2. Color Palette & Roles
| Role | Value | Usage |
|---|---|---|
| Canvas | rgb(245,245,247) |
Light gray-white background |
| White card | rgb(255,255,255) |
Raised surface panels |
| Off-white panel | rgb(248,249,250) |
Secondary surface tier |
| Gray divider | rgb(229,231,235) |
Borders and dividers throughout |
| Light gray bg | rgb(242,242,246) |
Subtle section backgrounds |
| Body text | rgb(50,50,56) |
Near-dark gray — primary content |
| Muted text | rgb(113,113,122) |
Secondary/UI text in buttons |
| Active link | rgb(248,249,253) with inset shadow |
Active nav state |
| Footer | rgb(0,0,0) |
Black footer — strong anchor |
No brand color. No accent. This is a deliberately neutral frame for a 3D content showcase.
3. Typography Rules
A three-typeface system, each with distinct roles:
h1: Inter, 18.75px, weight 400 — modest, almost label-likeh2: Inter semibold, 28px, weight 600 (used for section titles in footer/white area)h3: Teko, 45px, weight 500, uppercase — cinematic display impacth4/body/a: Inter, 15–16px, weight 400 — neutral utilityh5: Rogan, 13px, weight 500, capitalize, +0.33px tracking — label badgesbutton: Rogan, 15px, weight 500, uppercase, +0.75px tracking — CTA label
The Teko display headings at 45px are the visual centrepiece — a condensed typeface that commands attention for section titles.
4. Component Stylings
Rich shadow system: cards use rgba(0,0,0,0.03) 0px 2px 6px 0px (barely visible) up to rgba(0,0,0,0.1) 0px 20px 25px for floating elements. Border radius from 7.5px to 22.5px — consistently rounded, approachable. Buttons at rgb(255,255,255) with light gray border and subtle inset shadow. Active nav link gets an inset shadow to signal selection without color.
5. Layout Principles
Tailwind-powered with 12 breakpoints from 639 to 1636px. Sections use a negative margin trick (-37.5px 0px 37.5px) — likely for overlapping card effects. Max-width containers likely around 1280px based on breakpoint pattern.
6. Depth & Elevation
A well-defined shadow scale from nearly invisible (0px 2px 6px rgba(0,0,0,0.03)) to medium (0px 20px 25px rgba(0,0,0,0.1)). Inset shadow on active nav states. No harsh drop shadows — everything is ambient and soft.
7. Do’s and Don’ts
Do: Let the 3D content be the visual centrepiece. Use Teko for dramatic section labels only. Keep card shadows minimal. Use Inter for everything functional.
Don’t: Add accent colors — the neutrality is purposeful. Don’t use Teko at body sizes. Don’t add borders heavier than 1px solid rgb(229,231,235).
8. Responsive Behavior
12 breakpoints reflect a Tailwind-native, fine-grained layout. Standard sm/md/lg/xl/2xl progression plus custom 992/1279/1536/1636 extensions for the studio’s specific content ratios.
9. Agent Prompt Guide
“Design in the style of studio.morflax.com: pale off-white
rgb(245,245,247)canvas, white cards with micro-shadows, Inter for UI text, Teko uppercase for 45px display headings, Rogan for button/badge labels, no accent color, black footer anchor, rounded 7.5–22.5px components.”
Generated by Sparkbites — extracted from live CSS analysis
