# Shortverse — Design System
> A professional networking and distribution platform for the short film community.
- **Canonical:** https://uiuxskills.com/library/shortverse
- **Source:** https://www.shortverse.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:00.014Z

---

---
version: alpha
name: Shortverse
description: A professional networking and distribution platform for the short film community.
tone: Professional, collaborative, and community-focused.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#FFFFFF"
  surface-container: "#F4F4F4"
  on-surface: "#1A1A1A"
  on-primary: "#FFFFFF"
  outline: "#E0E0E0"
  error: "#D32F2F"
  success: "#388E3C"
  info: "#1976D2"
  focus-ring: "#000000"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  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-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#333333"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
  input-field:
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.info}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "#FDECEA"
    textColor: "{colors.error}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Shortverse is a community-driven platform designed for filmmakers, festivals, and industry professionals. Its visual identity is clean, functional, and cinematic, prioritizing content discovery and professional networking. The design language is minimal and accessible, focusing on clarity to let the film content take center stage.

## Colors

The color palette relies on a high-contrast, monochromatic foundation to ensure the interface remains neutral and professional. Semantic colors are used sparingly to guide user interaction and provide necessary feedback.

*   Primary (#000000): The core brand color, used for primary actions and high-contrast text.
*   Surface (#FFFFFF): The primary background color.
*   Surface-container (inferred) (#F4F4F4): Secondary background for sectioning.
*   On-surface (inferred) (#1A1A1A): Primary text color for readability.
*   On-primary (inferred) (#FFFFFF): Text color for primary buttons.
*   Outline (inferred) (#E0E0E0): Border color for cards and inputs.
*   Error (inferred) (#D32F2F): Destructive actions and alerts.
*   Success (inferred) (#388E3C): Positive feedback states.
*   Info (inferred) (#1976D2): Informational links.
*   Focus-ring (inferred) (#000000): Accessibility indicator for focus states.

## Typography

A clean, sans-serif typeface is used throughout to maintain readability and a professional aesthetic. Hierarchy is established through size and weight, prioritizing clear navigation and content legibility.

*   Display-lg (inferred): Hero headlines.
*   Display-md (inferred): Section titles.
*   Headline-lg (inferred): Secondary headers.
*   Headline-md (inferred): Card titles.
*   Headline-sm (inferred): Sub-headers.
*   Body-md (inferred): Standard paragraph text.
*   Label-sm (inferred): Captions and metadata.

## Layout

The platform utilizes a standard grid system with a 4px base unit for all margins and padding, ensuring consistent spacing. The layout is content-heavy and responsive, collapsing navigation into a mobile-friendly format on smaller viewports. The section order follows a consistent pattern: nav, hero, features, and footer. The hero pattern features a centered headline with a clear primary CTA and supporting illustration.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background, relying on subtle, single-layer shadows to maintain a clean, flat aesthetic.

*   `elevation.sm`: Subtle lift for small elements.
*   `elevation.md`: Standard card lift.
*   `elevation.lg`: Modal or overlay depth.

## Shapes

The design uses subtle rounding for UI elements, favoring a professional and slightly softened look rather than sharp, aggressive corners. The `rounded.md` token is the standard for cards, while `rounded.sm` is used for inputs and smaller UI elements.

## 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`


### Buttons
Primary buttons use `{colors.primary}` with `{colors.on-primary}` text for high visibility. Secondary buttons use a transparent background with a `{colors.primary}` border to maintain a lighter visual weight.

### Cards
Cards utilize `{colors.surface}` with `{rounded.md}` corners and `{colors.outline}` borders to maintain a clean, organized structure. Avoid heavy shadows; use `{elevation.md}` only when necessary to differentiate from the background.

### Inputs
Input fields use `{rounded.sm}` and `{colors.outline}` for borders. On focus, the border should transition to `{colors.focus-ring}` to ensure accessibility.

### Badges
Badges use `{colors.surface-container}` for backgrounds, with specific variants like `badge-error` and `badge-success` for semantic feedback. Use `{typography.label-sm}` for all badge labels.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Do not use `{colors.error}` for non-destructive actions. |
| Apply `{typography.body-md}` for all long-form content. | Avoid mixing `{typography.display-lg}` with body text in small containers. |
| Use `{rounded.md}` for all card components. | Do not use `{rounded.full}` on standard content cards. |
| Maintain `{spacing.md}` between grid items. | Avoid using `{spacing.xs}` for primary layout gutters. |
| Use `{colors.outline}` for all subtle dividers. | Never use low-contrast text on `{colors.surface-container}`. |
| Ensure `{colors.on-primary}` is used for text on primary buttons. | Do not apply heavy shadows to `{components.card}`. |
| Use `{colors.focus-ring}` for input focus states. | Avoid using non-standard border colors on inputs. |
| Use `{typography.label-sm}` for badge text. | Do not use large, bold typography for metadata. |

## Content Style

CTA style: Use direct, action-oriented verbs (e.g., "Sign Up", "Add a Film"). Labels should be concise to maintain the clean UI.

Heading tone: Use clear, benefit-driven statements that communicate value immediately. Avoid jargon; keep headlines professional and community-focused.

Copy density: Keep text concise and scannable. Use whitespace generously to separate sections, ensuring the platform feels breathable and not cluttered.

## Imagery & Icons

The imagery style is mixed, combining clean, flat illustrations with high-quality film imagery. Illustrations should be used to add personality to hero sections, while photography should remain high-fidelity to showcase film content. Avoid overly complex or decorative icon styles; keep them minimal to match the clean UI.