Vai al contenuto

Sandbox

Sandbox Components — Backlot Design System

Pagina di reference visivo per tutti i componenti del design system. Versione 1.2.0.

1. Heading scale

H1 Display XL — Welcome back, Marco

H2 Display LG — Le tue Land

H3 Display MD — Continua dove avevi lasciato

H4 — Card title standard

H5 — Sottotitolo
H6 — Eyebrow uppercase

CD01

Questo è un paragrafo di body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Strong oro, italic, inline code, link text, testo evidenziato, Cmd+K.

2. Buttons

Primary CTA
Secondary outline
Ghost
Danger

Small
Default
Large

3. Badges

Pass
Premium
New
Locked
Completed
In progress

4. Cards

CD02

Card lezione standard

Hover per vedere lift + glow oro sottile.

Riprendi

PREMIUM

Card cornice oro

Variante con double border art-deco. Usata per contenuti Premium e ticket personali.

ACCESS CARD · BASE

Backlot Pass

Marco Rossi · Attivato 2026-04-15

2 / 4 Land sbloccate

5. Blockquote + Callout

La regola. La luce è il primo attore della scena. Tutto il resto serve la luce.
Lezione CD03 — Composizione

⚡

Esercizio rapido

Apri MidJourney, genera 3 character con stesso prompt, varia solo la luce. Annota cosa cambia.

6. Tables

Comparison Pass vs Premium
Feature Pass Premium
Character District ✓ ✓
Production Lot ✓ ✓
The Vault — ✓
The Tower — ✓
Prezzo €29 €69

7. Code block (prompt example)

/imagine prompt:
A cinematic portrait of a Bigfoot character,
backlit by warm sunset light,
shot on Arri Alexa, 35mm anamorphic,
shallow depth of field, dramatic shadows,
8k, photorealistic, --ar 16:9 --v 6

Inline code: usa --style raw per disattivare l’estetica MJ default.

8. Lists

Default UL/OL

  • Primo bullet (oro)
  • Secondo bullet con strong e link
  • Nested:
    • Bullet annidato (gold-deep, più piccolo)
    • Altro nested
  1. Step uno
  2. Step due
  3. Step tre

Variants

  • Lista con check oro
  • Per “feature unlock”, “completati”, checklist
  • Lista con em dash
  • Per note, append, sottotemi

9. Dividers

Default <hr>:

Gem divider art-deco:

Small divider (60px):

10. Forms



Come vuoi essere chiamato nelle lezioni.




 



11. Alerts

i

Info

Pass Backlot include 2 Land su 4. Upgrade a Premium per sbloccare The Vault e The Tower.

✓

Success

Lezione completata. La tua progress bar è ora al 25%.

!

Warning

Hai 3 lezioni in corso non completate. Termina almeno una prima di iniziarne una nuova.

×

Errore

Impossibile salvare il quiz. Riprova tra qualche secondo.

12. Lock state demo

Versione semplice (overlay generato via ::after):

The Vault — VA01

Lezione contenuto Premium. Senza upgrade questo testo è offuscato e non interagibile.

Versione con CTA esplicito (a11y-friendly, raccomandata):

The Tower — TO01

Lezione contenuto Premium. Senza upgrade questo testo è offuscato e non interagibile.

🔒

Contenuto Premium

Sblocca The Vault e The Tower con Backlot Premium

Upgrade — €40

13. Utility classes (esempi)

.bkl-text-gold — testo oro

.bkl-text-muted — testo muted

.bkl-text-cream — testo crema (default body)

.bkl-text-center — centrato

Fine sandbox.

Torna in alto