Salta al contenuto

Anteprima del design system

Pagina di servizio per controllare token e componenti. Testi segnaposto.

Colori

  • --color-petrol

    #0F6B65

  • --color-night

    #102A35

  • --color-mint

    #F1F7F5

  • --color-white

    #FFFFFF

  • --color-orange-action

    #C2500D

  • --color-orange-action-strong

    #A8460C

  • --color-orange-deco

    #E0601A

    Solo decorativo, mai testo.

  • --color-orange-light

    #F0A57A

  • --color-red-light

    #F2B8B5

  • --color-border-light

    #DCE9E6

  • --color-border-strong

    #5F8A84

  • --color-muted

    #4A6470

  • --color-paper

    #F5F3EE

  • --color-petrol-night

    #0B2A2B

  • --color-petrol-deep

    #1A4543

  • --color-petrol-mid

    #476F6A

  • --color-petrol-light

    #5E8F88

  • --color-sage-dark

    #8DB0A8

  • --color-sage

    #C3D6D2

  • --color-sage-light

    #DCE9E3

  • --color-paper-sage

    #EDF1EC

  • --color-mint-50

    #F1F7F4

  • --color-mint-100

    #EAF3F0

  • --color-mint-200

    #DDEBE6

  • --color-mint-300

    #D5E4E1

  • --color-mint-400

    #CFE3DD

  • --color-mint-500

    #C9E0D9

  • --color-sage-text

    #B9CFCB

  • --color-duo-dark

    #0F3B3A

  • --color-duo-light

    #DCEBE6

  • --color-text

    var(--color-night)

    Primitivo: --color-night

  • --color-text-muted

    var(--color-muted)

    Primitivo: --color-muted

  • --color-heading-accent

    var(--color-petrol)

    Primitivo: --color-petrol

  • --color-bg

    var(--color-paper)

    Primitivo: --color-paper

  • --color-bg-sheet-white

    var(--color-white)

    Primitivo: --color-white

  • --color-bg-night

    var(--color-petrol-night)

    Primitivo: --color-petrol-night

  • --color-bg-section

    var(--color-mint)

    Primitivo: --color-mint

  • --color-bg-sheet

    var(--color-mint)

    Primitivo: --color-mint

  • --color-border

    var(--color-border-light)

    Primitivo: --color-border-light

  • --color-border-control

    var(--color-border-strong)

    Primitivo: --color-border-strong

  • --color-action

    var(--color-orange-action)

    Primitivo: --color-orange-action

  • --color-action-hover

    var(--color-orange-action-strong)

    Primitivo: --color-orange-action-strong

  • --color-on-action

    var(--color-white)

    Primitivo: --color-white

  • --color-icon

    var(--color-petrol)

    Primitivo: --color-petrol

  • --color-focus

    var(--color-petrol)

    Primitivo: --color-petrol

  • --color-rule-deco

    var(--color-orange-deco)

    Primitivo: --color-orange-deco

  • --color-error

    var(--color-orange-action-strong)

    Primitivo: --color-orange-action-strong

  • --color-disabled-bg

    var(--color-mint)

    Primitivo: --color-mint

  • --color-disabled-text

    var(--color-muted)

    Primitivo: --color-muted

  • --color-text-on-dark

    var(--color-paper)

    Primitivo: --color-paper

  • --color-text-muted-on-dark

    var(--color-sage-text)

    Primitivo: --color-sage-text

  • --color-note-on-dark

    var(--color-sage-text)

    Primitivo: --color-sage-text

  • --color-rule-on-dark

    var(--color-petrol-light)

    Primitivo: --color-petrol-light

  • --color-flow-line-on-dark

    var(--color-petrol-light)

    Primitivo: --color-petrol-light

  • --color-flow-text-on-dark

    var(--color-paper)

    Primitivo: --color-paper

  • --color-flow-node-on-dark

    var(--color-sage-dark)

    Primitivo: --color-sage-dark

  • --color-figure-warm-on-dark

    var(--color-orange-light)

    Primitivo: --color-orange-light

  • --color-flag-on-dark

    var(--color-red-light)

    Primitivo: --color-red-light

  • --color-flow-line

    var(--color-border-control)

    Primitivo: --color-border-control

  • --color-flow-out

    var(--color-action)

    Primitivo: --color-action

Tipografia

Plus Jakarta Sans, peso 700: "Plus Jakarta Sans Variable", "Plus Jakarta Sans", system-ui, sans-serif

Plus Jakarta Sans, peso 400: var(--font-heading)

Plus Jakarta Sans, peso 500: var(--font-heading)

Plus Jakarta Sans, corsivo vero

Scala del testo

Testo di esempio

--text-h1: clamp(34px, 1.4vw + 26px, 48px)

Testo di esempio

--text-h2: clamp(30px, 1.2vw + 22px, 40px)

Testo di esempio

--text-h3: clamp(24px, 0.6vw + 20px, 28px)

Testo di esempio

--text-h4: 22px

Testo di esempio

--text-lg: 20px

Testo di esempio

--text-base: 17px

Testo di esempio

--text-sm: 15px

Spaziature

  • --space-1: 4px

  • --space-2: 8px

  • --space-3: 12px

  • --space-4: 16px

  • --space-6: 24px

  • --space-8: 32px

  • --space-12: 48px

  • --space-16: 64px

  • --space-24: 96px

  • --space-28: 112px

Override per breakpoint

  • --space-section: var(--space-24) ((min-width: 768px))
  • --gutter: var(--space-8) ((min-width: 768px))
  • --space-section: var(--space-28) ((min-width: 1200px))

Raggio

  • --radius: 8px
  • --radius-panel: 20px

Suggerimento di esempio.

Messaggio di errore di esempio.

Card bianca

Contenuto di esempio.

Card menta

Contenuto di esempio.

Bordi e focus

  • --border-width: 1px
  • --focus-width: 2px

Bordo leggero

Bordo campo

Filetto decorativo arancio.

Premi Tab per vedere il focus visibile.

Contenitore

--container-max: 1200px

Larghezza massima del contenuto.

Movimento

  • --dur-fast: 150ms
  • --dur-base: 250ms
  • --dur-slow: 600ms
  • --dur-count: 1200ms
  • --dur-timeline: 2400ms
  • --dur-instant: 0.01ms
  • --ease-standard: cubic-bezier(0.2, 0, 0, 1)
  • --ease-out: cubic-bezier(0.16, 1, 0.3, 1)
  • --dur-pulse: 1800ms
  • --dur-pulse-stagger: 450ms
  • --dur-reveal-stagger: 200ms
  • --ease-pulse: cubic-bezier(0, 0, 1, 1)

1.250 numero di esempio

Con riduzione del movimento attiva le animazioni non partono e si vede subito lo stato finale.

Icone