Submission Guidelines

Supported code and preview safety

JavaScript is supported for component-local interactivity in CSS + JS, Tailwind + JS, and React + Tailwind. Choose the stack that matches your code.

HTML + CSS

HTML and CSS for layout, styling, and native HTML interactions. Choose CSS + JS for a separate JavaScript file.

HTML + CSS + JavaScript

HTML, CSS, and JavaScript for component-local interactivity inside the isolated preview.

HTML + Tailwind

HTML with Tailwind utilities and native HTML interactions. Choose Tailwind + JS for a separate JavaScript file.

HTML + Tailwind + JavaScript

HTML, Tailwind utilities, and JavaScript for component-local interactivity inside the isolated preview.

React + Tailwind

React components, state, and event handlers with Tailwind and platform-supported preview dependencies.

Component code runs in an isolated, sandboxed preview. Do not access the host page, account data, or attempt to escape the sandbox.

Malicious code, XSS attempts, credential or data theft, and attempts to bypass preview isolation are prohibited.

Do not include your own external scripts, images, or fonts. Use platform-provided runtimes and supported preview dependencies.

Working in preview does not guarantee approval. Code sanitization, compiler diagnostics, and admin review still apply to every stack and category.

Failure Cases

Common Rejections

Real anti-patterns rendered live. Click "Source" to see the offending markup - recognize them in the wild and you'll never ship one.

Oversized Shadows

Rejected

Aggressive drop-shadows break the visual hierarchy and feel dated. Keep elevation subtle.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<button style="
  box-shadow:
    0 30px 60px rgba(0,0,0,.6),
    0 20px 30px rgba(0,0,0,.4);
">
  Click me
</button>

Preview HTML

<button class="bad-shadow">Click me</button>

Preview CSS

.bad-shadow {
        padding: 14px 32px;
        border-radius: 999px;
        background: #111;
        color: #fff;
        font: 600 15px/1 system-ui, sans-serif;
        border: 0;
        box-shadow: 0 30px 60px rgba(0,0,0,.7),
                    0 20px 30px rgba(0,0,0,.5);
      }

Low Contrast

Rejected

Insufficient contrast between text and background impacts accessibility. Aim for WCAG AA (4.5:1).

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<p style="
  color: #b0b0b0;
  background: #ffffff;
">
  Hard to read
</p>

Preview HTML

<p class="bad-contrast">Hard to read</p>

Preview CSS

.bad-contrast {
        font: 500 18px/1.4 system-ui, sans-serif;
        color: #c8c8c8;
        background: #ffffff;
        margin: 0;
        padding: 16px 24px;
        border-radius: 6px;
      }

External Assets

Rejected

Hardcoded links to external images, fonts, or scripts are strictly prohibited. Inline everything.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<style>
  @import url("https://fonts.example.com/x.css");
</style>
<img src="https://cdn.example.com/x.png" />

Preview HTML

<div class="bad-assets">
  <p>Loading external font & image…</p>
  <div class="bad-assets__img">404</div>
</div>

Preview CSS

.bad-assets {
        text-align: center;
        font: 500 14px/1.4 system-ui, sans-serif;
        color: #9a3412;
      }
      .bad-assets__img {
        margin: 12px auto 0;
        width: 96px;
        height: 64px;
        background: repeating-linear-gradient(
          45deg,
          #fdba74 0 6px,
          #fed7aa 6px 12px
        );
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7c2d12;
        font-weight: 700;
        border-radius: 4px;
      }

Bloated SVGs

Rejected

Excessive SVG markup with redundant attributes should be optimized. Strip metadata, round numbers.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<svg viewBox="0 0 24 24" width="24" height="24"
     enable-background="new 0 0 24 24"
     xml:space="preserve"
     style="fill: #000000; stroke: none;">
  <metadata>…bloat…</metadata>
  <path d="M1.000000 2.000000 L23.000000 2.000000 …" />
</svg>

Preview HTML

<svg viewBox="0 0 24 24" width="96" height="96"
     enable-background="new 0 0 24 24"
     xml:space="preserve"
     style="fill: #9ca3af; stroke: none;">
  <metadata>…bloat…</metadata>
  <path d="M1.000000 2.000000 L23.000000 2.000000 L23.000000 22.000000 L1.000000 22.000000 Z" />
</svg>

Lack of Value

Rejected

Standard browser defaults with minimal or zero creative modifications. We reward originality.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<button>Submit</button>
<input type="text" />
<select><option>One</option></select>

Preview HTML

<div class="bad-defaults">
  <button>Submit</button>
  <input type="text" placeholder="Name" />
  <select><option>One</option></select>
</div>

Preview CSS

.bad-defaults {
        display: flex;
        gap: 8px;
        align-items: center;
        font: 14px/1 system-ui, sans-serif;
      }

Inconsistent Spacing

Rejected

Uneven margins and padding disrupt structural alignment. Use a coherent spacing scale.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<div style="
  padding: 7px 13px 4px 19px;
  margin: 11px 2px 17px 0;
">
  Random gaps
</div>

Preview HTML

<div class="bad-spacing">Random gaps</div>

Preview CSS

.bad-spacing {
        font: 600 16px/1.2 system-ui, sans-serif;
        color: #4c1d95;
        background: #ede9fe;
        padding: 7px 13px 4px 19px;
        margin: 11px 2px 17px 0;
        border-radius: 6px;
        display: inline-block;
      }

Gold Standards

High-Fidelity Success

Production-grade replacements rendered live. These are the patterns that illustrate the criteria. Every submission still needs originality, safety, and quality review.

Premium Hierarchy

Approved

Sophisticated use of typography, color, and depth to guide the eye through layered information.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<article class="card">
  <h3 class="text-xl font-semibold tracking-tight">
    Plan
  </h3>
  <p class="text-muted leading-relaxed">
    $9 / month
  </p>
  <button class="btn-primary mt-6">Choose</button>
</article>

Preview HTML

<article class="good-card">
  <div class="good-card__head">
    <span class="good-card__price">$49<span>/ mo</span></span>
  </div>
  <h3 class="good-card__title">Professional</h3>
  <p class="good-card__body">For solo founders shipping fast.</p>
  <button class="good-card__btn">Choose plan</button>
</article>

Preview CSS

.good-card {
        width: 220px;
        padding: 22px 22px 18px;
        border-radius: 18px;
        background: #fff;
        box-shadow:
          0 1px 1px rgba(15,23,42,.04),
          0 8px 24px rgba(15,23,42,.06);
        font: 500 14px/1.45 system-ui, sans-serif;
        color: #0f172a;
      }
      .good-card__head { display: flex; justify-content: flex-end; }
      .good-card__price {
        font: 700 14px/1 system-ui, sans-serif;
        color: #0f172a;
        background: #e0f2fe;
        padding: 4px 10px;
        border-radius: 999px;
      }
      .good-card__price span { font-weight: 500; color: #0369a1; }
      .good-card__title { margin: 18px 0 6px; font-size: 18px; }
      .good-card__body { margin: 0 0 16px; color: #475569; }
      .good-card__btn {
        width: 100%;
        border: 0;
        padding: 10px 14px;
        border-radius: 10px;
        background: #6366f1;
        color: #fff;
        font: 600 14px/1 system-ui, sans-serif;
        cursor: pointer;
      }

Standardized Sizing

Approved

Maintains consistency with the platform design system and reflects real-world usage at any scale.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<button class="
  h-10 px-5
  text-sm font-medium
  rounded-full
">
  Save changes
</button>

Preview HTML

<button class="good-btn">Save changes</button>

Preview CSS

.good-btn {
        height: 40px;
        padding: 0 20px;
        font: 500 14px/1 system-ui, sans-serif;
        color: #fff;
        background: #0f172a;
        border: 0;
        border-radius: 999px;
        cursor: pointer;
        transition: background .15s ease;
      }
      .good-btn:hover { background: #1e293b; }

Optimized SVGs

Approved

Clean, minimal, and performant SVG implementations - single path, no metadata, no editor cruft.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<svg viewBox="0 0 24 24" width="20" height="20"
     fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round">
  <path d="M5 13l4 4L19 7" />
</svg>

Preview HTML

<svg viewBox="0 0 24 24" width="64" height="64"
     fill="none" stroke="#10b981"
     stroke-width="2" stroke-linecap="round"
     stroke-linejoin="round">
  <path d="M5 13l4 4L19 7" />
</svg>

Unique Innovation

Approved

Original concepts that provide fresh takes on common UI patterns - interactivity that surprises.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<button class="
  group relative overflow-hidden
  transition-transform
  hover:-translate-y-0.5
">
  <span class="
    absolute inset-0 -z-10
    bg-gradient-to-r
    from-indigo-500 to-fuchsia-500
    opacity-0 group-hover:opacity-100
    transition-opacity
  " />
  Hover me
</button>

Preview HTML

<button class="good-innov">
  <span class="good-innov__bg"></span>
  <span class="good-innov__label">Hover me</span>
</button>

Preview CSS

.good-innov {
        position: relative;
        overflow: hidden;
        padding: 12px 28px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.12);
        background: #0f172a;
        color: #fff;
        font: 600 14px/1 system-ui, sans-serif;
        cursor: pointer;
        transition: transform .2s ease, border-color .2s ease;
      }
      .good-innov__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: linear-gradient(120deg, #6366f1, #d946ef);
        opacity: 0;
        transition: opacity .25s ease;
      }
      .good-innov__label { position: relative; z-index: 1; }
      .good-innov:hover { transform: translateY(-2px); border-color: transparent; }
      .good-innov:hover .good-innov__bg { opacity: 1; }

Interactive States

Approved

Flawless execution of hover, focus, and active interaction animations with reduced-motion respect.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

button {
  transition: transform .15s ease, background .2s ease;
}
button:hover  { transform: translateY(-1px); }
button:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}

Preview HTML

<button class="good-states">Click me</button>

Preview CSS

.good-states {
        padding: 12px 24px;
        border-radius: 10px;
        border: 0;
        background: #4f46e5;
        color: #fff;
        font: 600 14px/1 system-ui, sans-serif;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(79,70,229,.25);
        transition: transform .15s ease,
                    box-shadow .2s ease,
                    background .2s ease;
      }
      .good-states:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(79,70,229,.35);
      }
      .good-states:active { transform: translateY(0); }
      @media (prefers-reduced-motion: reduce) {
        .good-states { transition: none; }
        .good-states:hover, .good-states:active { transform: none; }
      }

Responsive Flow

Approved

Seamless adaptation to various viewport sizes and input methods - mobile, tablet, desktop, keyboard.

The illustrative snippet highlights the pattern. Preview HTML and CSS show the isolated example; external assets are simulated. Press Escape here or activate Source again to close.

Illustrative snippet

<nav class="
  flex flex-col gap-2
  md:flex-row md:items-center md:gap-6
">
  <a href="/">Home</a>
  <a href="/docs">Docs</a>
  <a href="/blog">Blog</a>
</nav>

Preview HTML

<nav class="good-nav">
  <a href="#">Home</a>
  <a href="#">Docs</a>
  <a href="#">Blog</a>
</nav>

Preview CSS

.good-nav {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 1px 1px rgba(15,23,42,.04),
                    0 4px 14px rgba(15,23,42,.05);
        font: 500 14px/1 system-ui, sans-serif;
        min-width: 140px;
      }
      .good-nav a {
        color: #0f172a;
        text-decoration: none;
        padding: 6px 8px;
        border-radius: 6px;
        transition: background .15s ease;
      }
      .good-nav a:hover { background: #f1f5f9; }
      @media (min-width: 640px) {
        .good-nav {
          flex-direction: row;
          align-items: center;
          gap: 24px;
        }
      }

Supported code and preview safety

Uniqueness is the standard

Approved Patterns

Restricted Patterns

Common Rejections

Oversized Shadows

Illustrative snippet

Preview HTML

Preview CSS

Low Contrast

Illustrative snippet

Preview HTML

Preview CSS

External Assets

Illustrative snippet

Preview HTML

Preview CSS

Bloated SVGs

Illustrative snippet

Preview HTML

Lack of Value

Illustrative snippet

Preview HTML

Preview CSS

Inconsistent Spacing

Illustrative snippet

Preview HTML

Preview CSS

High-Fidelity Success

Premium Hierarchy

Illustrative snippet

Preview HTML

Preview CSS

Standardized Sizing

Illustrative snippet

Preview HTML

Preview CSS

Optimized SVGs

Illustrative snippet

Preview HTML

Unique Innovation

Illustrative snippet

Preview HTML

Preview CSS

Interactive States

Illustrative snippet

Preview HTML

Preview CSS

Responsive Flow

Illustrative snippet

Preview HTML

Preview CSS

Ready to ship your craft?

Your submission journey

Ready to ship
your craft?