--- version: alpha name: Morphic Studio description: Dark, media-first interface for Morphic's GenAI studio — neutral greys that stay out of the way of images and video, one electric blue for action. colors: primary: '#0075FF' primary-hover: '#0065DB' on-primary: '#F5F5F5' background: '#171717' surface-sunken: '#0F0F0F' surface: '#1E1E1E' surface-raised: '#242424' surface-hover: '#292929' surface-strong: '#404040' border: '#242424' border-subtle: 'rgba(255, 255, 255, 0.05)' overlay-subtle: 'rgba(255, 255, 255, 0.08)' overlay-hover: 'rgba(255, 255, 255, 0.12)' text-primary: '#F5F5F5' text-secondary: '#A3A3A3' text-muted: '#737373' text-disabled: '#404040' danger: '#FB2C36' danger-hover: '#E7000B' warning: '#F58400' warning-hover: '#CC6E00' success: '#2CAF31' selection: 'rgba(0, 117, 255, 0.35)' accent-cyan: '#0192B2' accent-indigo: '#3B4EDD' accent-sapphire: '#4558E7' accent-jade: '#6DA44D' accent-forest: '#31855F' accent-ocean: '#7F9E93' accent-goldenrod: '#B19943' accent-copper: '#98682E' accent-taupe: '#766340' accent-lightbrick: '#CB5F5F' accent-rose: '#91213D' accent-fuchsia: '#A64B89' accent-amethyst: '#653D9A' typography: display: fontFamily: Inter fontSize: 24px fontWeight: 600 lineHeight: 30px letterSpacing: -0.025em title: fontFamily: Inter fontSize: 20px fontWeight: 600 lineHeight: 30px letterSpacing: -0.025em heading: fontFamily: Inter fontSize: 18px fontWeight: 600 lineHeight: 28px letterSpacing: -0.02em body-lg: fontFamily: Inter fontSize: 16px fontWeight: 500 lineHeight: 22px letterSpacing: -0.015em body: fontFamily: Inter fontSize: 14px fontWeight: 500 lineHeight: 18px letterSpacing: 0em body-long: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0em label: fontFamily: Inter fontSize: 12px fontWeight: 500 lineHeight: 14px letterSpacing: 0.01em caption: fontFamily: Inter fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0em micro: fontFamily: Inter fontSize: 11px fontWeight: 500 lineHeight: 13px letterSpacing: 0em rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 14px 2xl: 16px full: 9999px spacing: 1: 4px 2: 8px 3: 12px 4: 16px 5: 20px 6: 24px 8: 32px 10: 40px components: button-primary: backgroundColor: '{colors.primary}' textColor: '{colors.on-primary}' typography: '{typography.body}' rounded: '{rounded.md}' height: 36px padding: 9px 16px button-primary-hover: backgroundColor: '{colors.primary-hover}' button-secondary: backgroundColor: '{colors.overlay-subtle}' textColor: '{colors.text-primary}' typography: '{typography.body}' rounded: '{rounded.md}' height: 36px padding: 9px 16px button-secondary-hover: backgroundColor: '{colors.overlay-hover}' button-inverse: backgroundColor: '{colors.text-primary}' textColor: '#000000' rounded: '{rounded.md}' height: 36px button-ghost: textColor: '{colors.text-muted}' rounded: '{rounded.md}' height: 36px button-ghost-hover: backgroundColor: '{colors.surface-hover}' textColor: '{colors.text-primary}' button-danger: backgroundColor: '{colors.danger}' textColor: '{colors.on-primary}' rounded: '{rounded.md}' height: 36px button-danger-hover: backgroundColor: '{colors.danger-hover}' button-disabled: backgroundColor: '{colors.surface-raised}' textColor: '#525252' input: backgroundColor: '{colors.background}' textColor: '{colors.text-primary}' typography: '{typography.body}' rounded: '{rounded.sm}' padding: 9px 8px card: backgroundColor: '{colors.surface}' rounded: '{rounded.lg}' padding: 16px dialog: backgroundColor: '{colors.surface}' rounded: '{rounded.2xl}' padding: 24px chip: backgroundColor: '{colors.overlay-subtle}' textColor: '{colors.text-secondary}' typography: '{typography.caption}' rounded: '{rounded.full}' padding: 4px 8px --- # Morphic Studio Design System The tokens in this file mirror the Morphic Studio theme. Tailwind class names are given in backticks so each value maps to a utility class. ## Overview Morphic is a studio for making films, characters, images and short video with AI. The interface is a **dark, quiet frame around the user's media**: near-black neutral surfaces, white text, and a single saturated blue reserved for the primary action. Nothing in the chrome should compete with the generated images and video it holds. Personality: professional creative tool (think editing suite, not consumer app). Dense but calm, precise spacing, small type, soft rounded corners, subtle translucent layers rather than heavy borders or shadows. The product is **dark mode only**. There is no light theme; do not design one unless asked. ## Colors **Primary — Morphic Blue `#0075FF`** (`blue-600` / `primary-600`, `oklch(0.5926 0.2236 258.42)`). Used for the main call to action on a screen, links, the active/selected state, focus on white surfaces, and text selection (`#0075FF` at 35%). Hover darkens to `#0065DB` (`blue-700`). Use it sparingly — usually one blue element per view. **Neutrals** carry almost the entire UI. They are pure greys (zero chroma), tuned darker than stock Tailwind: | Role | Hex | Tailwind | | ---------------------------------- | --------- | ------------- | | Deepest surface (canvas, sidebars) | `#0F0F0F` | `neutral-950` | | App background | `#171717` | `neutral-900` | | Panel / card | `#1E1E1E` | `neutral-850` | | Raised control, default border | `#242424` | `neutral-800` | | Hover surface | `#292929` | `neutral-750` | | Strong fill, disabled text | `#404040` | `neutral-700` | | Muted text, icons | `#737373` | `neutral-500` | | Secondary text | `#A3A3A3` | `neutral-400` | | Primary text | `#F5F5F5` | `neutral-100` | **Translucent whites** (`transparent-25` … `transparent-950`, i.e. white at 4%–96%) are the preferred way to layer controls on top of any surface or media: `white/8` for a resting control, `white/12` on hover, `white/5` for hairline borders. They adapt to whatever sits underneath, which matters over images and video. **Status:** danger `#FB2C36` (`red-500`), warning/credits `#F58400` (`orange-600`), success `#2CAF31` (`green-500`). Error fills use red at 20% alpha. **Accent palette** — thirteen muted colours (cyan, indigo, sapphire, jade, forest, ocean, goldenrod, copper, taupe, lightbrick, rose, fuchsia, amethyst; all at the `-600` step). These are for _categorising content_ — avatars, project/folder tags, character colours, timeline tracks — never for UI chrome or actions. ## Typography **Inter** for the entire product UI, with ligatures and kerning on (`font-feature-settings: 'liga', 'kern'`), antialiased. The base weight is **500 (medium)**, not 400 — the UI reads slightly heavier than default on dark backgrounds. Base body size is **14px**. The scale is small and tight, suited to a dense tool. Every size comes in `-normal` (400), `-medium` (500) and `-semibold` (600) variants, e.g. `text-sm-medium`: | Token | Size / line height | Tracking | Typical use | | --------------------- | ------------------ | -------- | -------------------------------- | | `text-2xl-*` | 24 / 30 | −2.5% | Page titles, empty states | | `text-xl-*` | 20 / 30 | −2.5% | Dialog titles | | `text-lg-*` | 18 / 28 | −2% | Section headings | | `text-base-*` | 16 / 22 | −1.5% | Large buttons, prominent body | | `text-sm-*` | 14 / 18 | 0 | Default body, inputs, md buttons | | `text-sm-normal-long` | 14 / 20 | 0 | Paragraphs, chat messages | | `text-xs-*` | 12 / 14 | +1% | Labels, small buttons, metadata | | `text-xs-normal-long` | 12 / 18 | 0 | Small paragraphs, help text | | `text-xxs-*` | 11 / 13 | 0 | Badges, timestamps, counters | Larger sizes get progressively tighter (negative) tracking; small sizes get neutral or slightly positive tracking. Headings use semibold, never bold. Kalam and Nothing You Could Do are decorative handwritten faces used only in specific illustrative moments. The user-selectable fonts for video captions and titles are not part of the UI system. ## Layout - **Spacing** follows Tailwind's 4px grid. Common gaps are 4, 8, 12, 16 and 24px. Fine-tuning by 1px (e.g. 5px, 7px, 9px) is common inside controls to optically centre icons — match existing components rather than rounding. - **App shell:** 46px editor header; 38px sidebar/tab row; panels align to these rows. - **Content widths:** chat content max 960px; asset/card grids are `repeat(auto-fill, minmax(274px, 1fr))`. - **Responsive:** mobile is supported (bottom sheets, safe-area insets). A `tall:` variant (min-height 720px) adjusts vertical layouts. - Media is the hero: give images and video as much space as possible and keep chrome thin around them. ## Elevation & Depth Depth comes from **surface lightness, not shadows**: deeper layers are darker (`#0F0F0F` → `#171717` → `#1E1E1E` → `#242424`), and anything raised is a step lighter. Shadows, when used, are dark and soft: - `shadow-border` — a 1px pure-black ring, used to separate a surface from a similar-coloured background (an "inner edge" that a light border can't give on dark UI). - `shadow-border-blur` — 1px black ring plus `0 2px 4px` at 16% — the standard for floating controls. - `shadow-badge` / `shadow-xl` — popovers, menus, dialogs. Frosted glass (`backdrop-blur` + translucent dark fill, e.g. `halo-blur-bottom`) is used for controls that float over the canvas or media. ## Shapes Rounded but not bubbly. Corner radius grows with element size: - 4–6px (`rounded-sm`, `rounded-md`): small buttons, inputs, thumbnails, badges - 7–8px (`rounded-[7px]`, `rounded-lg`): standard buttons and menu items - 10–14px (`rounded-[10px]`, `rounded-xl`, `rounded-1xl`): cards, panels, popovers - 16px+ (`rounded-2xl`): dialogs, large containers - `rounded-full`: pills, avatars, icon buttons, chips — the most-used radius in the codebase Nested elements use a smaller radius than their container. ## Components Reuse an existing component before designing a new one. **Button** — four variants × colours, five sizes, two shapes: - _Variants:_ `solid` (blue primary, red destructive, orange, grey), `subtle` (translucent white fill; or `white` — a light button with black text for high-emphasis on dark), `ghost` (no fill, grey text, fills on hover), `link` (text only). - _Sizes (height):_ tiny 24px · xs 28px · sm 30px · md 36px · lg 40px. Text is `xs-medium` up to sm, `sm-medium` at md, `base-medium` at lg. Icons 14px (≤ sm) or 16px. - _Shapes:_ `square` (6–9px radius scaling with size) or `pill` (fully rounded). - _Disabled:_ fill drops to `#242424`, text to `#525252`. **Inputs** — `#171717`-ish dark fill, 6px radius, 14px text, `neutral-500` placeholder, 1px `neutral-800` border that lightens to `neutral-500` on hover/focus. **Cards & panels** — `neutral-850`/`neutral-800` fill, 10–14px radius, hairline `white/5` or `neutral-800` border. **Focus** — always visible for keyboard users: a 1px white ring (`focus-ring`) on dark surfaces, a 1px blue inset ring (`focus-ring-blue`) on light surfaces, underline for text links (`focus-text`). **Motion** — snappy and short. Use the `ease-out-strong` curve `cubic-bezier(0.23, 1, 0.32, 1)` for UI transitions; Tailwind's default ease-out feels too soft. **Icons** — Iconify icon sets, rendered at 14–16px in controls, coloured `neutral-500` at rest and `neutral-100` on hover/active. ## Do's and Don'ts **Do** - Keep backgrounds neutral so user media is the most colourful thing on screen. - Use one blue primary action per view; make everything else grey (`subtle`/`ghost`). - Layer controls with translucent white (`white/8` → `white/12` on hover) instead of new grey hexes. - Use the named text tokens (`text-sm-medium`, etc.) rather than raw font sizes. - Show a visible focus state on every interactive element. **Don't** - Don't introduce a light theme, pure-white backgrounds, or coloured panel backgrounds. - Don't use accent colours (jade, amethyst, …) for buttons, links or states — they're for categorising content. - Don't use bold (700) type or large heavy headings; semibold at 24px is the ceiling. - Don't rely on heavy drop shadows for depth; step surface lightness instead.