# LTX Studio — Design System
> An all-in-one AI-powered creative studio for video production, filmmaking, and advertising.
- **Canonical:** https://uiuxskills.com/library/ltx-studio
- **Source:** https://ltx.io/studio
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 79%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:02.430Z

---

---
version: alpha
name: LTX Studio
description: An all-in-one AI-powered creative studio for video production, filmmaking, and advertising.
tone: Modern, professional, high-energy, and creative.
color-scheme: dark
colors:
  primary: "#2B61FF"
  secondary: "#DD6B00"
  surface: "#0B0B0B"
  surface-bright: "#1A1A1A"
  on-surface: "#FFFFFF"
  on-primary: "#FFFFFF"
  outline: "#333333"
  error: "#FF0000"
  success: "#00C853"
  focus-ring: "#2B61FF"
typography:
  display-lg:
    fontFamily: Brownllsub
    fontSize: 57.6px
  display-md:
    fontFamily: Brownllsub
    fontSize: 48px
  headline-lg:
    fontFamily: Brownllsub
    fontSize: 32px
  headline-md:
    fontFamily: Brownllsub
    fontSize: 24px
  headline-sm:
    fontFamily: Brownllsub
    fontSize: 20px
  body-md:
    fontFamily: Miriamlibre
    fontSize: 19.2px
  body-sm:
    fontFamily: Miriamlibre
    fontSize: 16px
  label-md:
    fontFamily: Miriamlibre
    fontSize: 14px
  label-sm:
    fontFamily: Miriamlibre
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#1C4BB6"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.on-surface}"
  card:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#5A85FF"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
motion:
  duration-short: 150ms
  duration-medium: 300ms
  easing-standard: cubic-bezier(0.4, 0, 0.2, 1)
elevation:
  sm: 0 1px 3px rgba(0,0,0,0.1)
  md: 0 4px 6px rgba(0,0,0,0.1)
  lg: 0 10px 15px rgba(0,0,0,0.1)
---

## Overview

LTX Studio features a high-energy, dark-mode aesthetic tailored for creative professionals. The visual language is stark and high-contrast, designed to push AI-generated content to the forefront while maintaining a professional, studio-grade atmosphere.

## Colors

The color strategy relies on a deep, dark background to make content pop, using a vibrant blue as the primary action color.

*   Primary (#2B61FF): Main action color for CTAs and interactive elements.
*   Secondary (#DD6B00): Accent color for secondary highlights.
*   Surface (#0B0B0B): Base background color for the interface.
*   Surface-bright (inferred) (#1A1A1A): Background for cards and containers.
*   On-surface (#FFFFFF): Primary text color on dark backgrounds.
*   On-primary (inferred) (#FFFFFF): Text color for primary buttons.
*   Outline (inferred) (#333333): Border color for inputs and dividers.
*   Error (#FF0000): Semantic color for error states.
*   Success (inferred) (#00C853): Semantic color for success states.
*   Focus-ring (inferred) (#2B61FF): Accessibility focus indicator.

## Typography

The typography pairs a bold, geometric font for headings with a clean, readable sans-serif for body text.

*   Display-lg (Brownllsub): Hero headlines.
*   Display-md (inferred) (Brownllsub): Secondary display levels.
*   Headline-lg (inferred) (Brownllsub): Section headings.
*   Body-md (Miriamlibre): Primary body text.
*   Label-md (inferred) (Miriamlibre): UI labels and button text.

## Layout

The layout utilizes a wide-container approach with a 4px grid system to ensure strict vertical rhythm. Sections are ordered as: nav, hero, features, tools, social-proof, footer. The hero section follows a centered composition pattern. The design is mobile-first, with navigation collapsing into a menu on smaller viewports.

## Elevation & Depth

Depth is used sparingly, primarily for cards and interactive elements to separate them from the dark background.

*   `elevation.sm`: Subtle card lift.
*   `elevation.md`: Standard depth for cards and interactive components.
*   `elevation.lg`: Depth for modals or drawer overlays.

## Shapes

The shape language uses a consistent, subtle rounding approach. `{rounded.md}` (8px) is the standard for cards and buttons, balancing a modern technical feel with approachability.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and transparent backgrounds with `{colors.on-surface}` borders for secondary actions. They rely on `{typography.label-md}` and `{rounded.md}` for a consistent, modern touch.

### Card
Cards utilize `{colors.surface-bright}` as a background to lift content from the main `{colors.surface}`. They should always feature `{rounded.md}` corners and, where necessary, `{elevation.md}` to define boundaries.

### Input Field
Inputs use a dark `{colors.surface}` background with an `{colors.outline}` border. On focus, the border transitions to `{colors.focus-ring}` to ensure accessibility.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Avoid using `{colors.secondary}` for primary buttons. |
| Apply `{typography.display-lg}` for main hero headlines. | Do not use light backgrounds for main content areas. |
| Use `{rounded.md}` for all card components. | Do not use sharp corners (0px) on interactive components. |
| Maintain `{spacing.md}` between grid items. | Avoid excessive spacing larger than `{spacing.2xl}` between sections. |
| Use `{colors.on-surface}` for body text. | Do not use `{colors.error}` for non-destructive actions. |
| Apply `{elevation.md}` to cards for hierarchy. | Avoid mixing too many font families outside the defined scale. |
| Use `{colors.outline}` for input borders. | Do not use low-contrast text on `{colors.surface}`. |
| Use `{typography.label-md}` for UI labels. | Do not use `{colors.primary}` for non-interactive text. |

## Content Style

CTA labels should use imperative verbs (e.g., "Start now", "Book a Demo") and sentence case. Keep labels concise and action-oriented.

Headings should be direct, benefit-oriented, and professional. Avoid marketing fluff; focus on the utility of the AI tools.

Copy density is low; prioritize scannable, short paragraphs and clear, punchy headings. Use bullet points for lists to maintain readability.

## Imagery & Icons

Imagery features high-quality, AI-generated assets with a cinematic, high-contrast aesthetic that complements the dark mode UI. Icons are clean and minimalist. Avoid overly stylized or illustrative graphics; prioritize photographic or rendered content that feels production-ready.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for LTX Studio, a dark-mode, minimal, bold AI creative studio brand. Match its high-energy, professional tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or font names.
2. Use only components defined under `components:`. Do not invent variants (e.g., no outlined primary buttons, no pill-shaped cards) unless the spec lists them.
3. Follow the Layout narrative: wide-container, 4px grid, mobile-first, single breakpoint at 768px. Section order — nav, hero, features, tools, social-proof, footer — is fixed.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative token file exists, those values override the spec.

## Output contract

**Must:**
- Use token names for every color, radius, spacing, and typography decision.
- Cover hover, focus, and disabled states for all interactive components where the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{elevation.md}` to cards; use `{elevation.lg}` only for modals and overlays.
- Write CTAs in imperative sentence case ("Start now", "Book a demo") per the Content Style section.
- Animate interactive state transitions using `{motion.duration-short}` and `{motion.easing-standard}`.

**Must NOT:**
- Invent colors, font families, radii, or spacing values outside the spec.
- Use generic utility defaults when a brand token exists.
- Apply `{colors.secondary}` to primary CTAs or `{colors.primary}` to non-interactive text.
- Use light backgrounds for any main content area.
- Use 0px (sharp) corners on interactive components.
- Add emoji, filler copy, or marketing language.
- Rewrite existing page copy, button labels, or navigation items.
- Alter page section order or information architecture.

## When in doubt
- Ask the user before introducing any value not in the spec.
- Prefer composing existing components over adding new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for containers, use `{colors.surface-bright}`.
- For ambiguous text, use `{colors.on-surface}`; reserve `{colors.primary}` for interactive elements only.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.