Componenti Rails – Originale

HTML e classi da app/helpers (layout_helper, forms_helper). Stesso formato: classe → grafica sotto. → Framework Django

Scelte tipografiche (font, colori, grassetti…)
Font base:
-apple-system, BlinkMacSystemFont, San Francisco, Roboto, Segoe UI, Helvetica Neue, sans-serif
Proxima Nova Light:
menu, bottoni, titoli leggeri (fallback: base)
Proxima Nova Regular:
testo corpo, tooltip, elementi enfatizzati (fallback: base)
Dimensioni:
12px, 13px, 14px (base), 18px, 20px, 22px, 24px
Colori principali:
■ grigio extra scuro #4b4b4b (testo) · ■ menu gray #4F5D72 · ■ arancio #F5A000 (CTA, attivo) · ■ arancio scuro #E58D00 (hover)
Semantici:
■ rosso #c1282e (errore, elimina) · ■ verde #7AB55C (successo, menu) · ■ menu bg #333A3F · ■ menu scuro #1D2328
Grigi:
#FAFBFC · #EBEEF0 · #D3DBE2 · #868686 · #666666 · #333333 · #262626
Peso:
font-weight: normal (Light/Regular). Nessun bold di default nelle UI standard.
.wrap-title-bar, #title-bar, .page-title (ta_title_bar)
Titolo pagina centrato Nuovo Esporta
.content-search-form – minimo (ta_search_box items vuoti)
Ricerca avanzata Ricerca avanzata
.content-search-form.open – come produzione (Anagrafica)
+ Altri filtri
Ricerca avanzata Ricerca avanzata
.content-search-form con .save-filters-icon, .entries-info (Rails con risultati)
150 di 1200 01 gen 2025 - 31 gen 2025
Ricerca avanzata Ricerca avanzata
.ta-btn (ta_button)
Azione Indietro Elimina Conferma Dettagli Annulla
.form, .form .field
Annulla
.ta-checkbox-tag (ta_checkbox_tag)
.ta-onoff-checkbox
Off On
.table, .table-striped, .table-bordered, .table-orange
NomeCognome
MarioRossi
LuigiVerdi
Titolo tabella arancione
AB
12
.pagination
.ta-progress-bar (ta_progress_bar)
3 di 10
.ta-drop-down-button
Dropdown
.nav-link, .delete-link, .action-link
Link nav Elimina Azione
.label (ta_label)
Etichetta rossa Etichetta arancione Etichetta blu Etichetta verde
.back-btn (Rails)
‹ Indietro