# 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-like
- `h2`: Inter semibold, 28px, weight 600 (used for section titles in footer/white area)
- `h3`: **Teko**, 45px, weight 500, uppercase — cinematic display impact
- `h4/body/a`: Inter, 15–16px, weight 400 — neutral utility
- `h5`: **Rogan**, 13px, weight 500, capitalize, +0.33px tracking — label badges
- `button`: 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*