Sistema de disseny corporatiu de la Unió Artística Musical d’Ontinyent. Referencia per a qualsevol desenvolupament d’interfície.
Totes les variants de color del sistema de disseny corporatiu.
#0e1235
--color-brand
#080c23
--color-brand-dark
#0e1257
--color-brand-mid
#c6b300
--color-accent
#a89800
--color-accent-dark
#e6d000
--color-accent-light
#c19b67
variant amoriguerra
#ffffff
--color-surface
#f4f4f2
--color-surface-alt
#0e1235
--color-surface-dark
#1d1d1b
--color-text
#5c5c5a
--color-text-muted
#ffffff
--color-text-on-dark
Tipografia corporativa: Weissenhof Grotesk
clamp(2rem, 5vw, 3.5rem) · font-weight: 700 · line-height: 1.1 · letter-spacing: -0.025em
clamp(1.5rem, 3.5vw, 2.5rem) · font-weight: 400 · line-height: 1.1
clamp(1.15rem, 2.5vw, 1.75rem) · font-weight: 400 · line-height: 1.1
Cos de text (1rem / 16px, font-weight: 400)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
font-size: 1rem · font-weight: 400 · line-height: 1.6 · letter-spacing: -0.01em
Text petit (0.875rem) — Per a metadades, peus de pàgina, textos secundaris.
Regular (400) — Cos de text i títols h2–h6
Bold (700) — Títol h1 i elements destacats
Italic (400) — Èmfasi en text i títols
A més de la Weissenhof Grotesk corporativa, certs projectes culturals fan servir tipografies específiques per a necessitats dramàtiques o promocionals.
Usat a amoriguerra. Sense fonts externes: totes les tipografies són del sistema per a càrrega instantània. Times New Roman forçat per al títol principal per evocar l’estètica d’un cartell d’òpera clàssic.
Unió Artística Musical d’Ontinyent
direcció musical · Roberto Poveda Cebrián
Una sarsuela en dos actes
| Element | Font | Pes | Estil | Cas d’ús |
|---|---|---|---|---|
| Títol principal | Times New Roman, Georgia, serif |
700 | italic | Cartell d’òpera / sarsuela |
| Subtítol | ui-serif, Georgia, serif |
400 | italic | Descripció artística |
| Cos de text | ui-serif, Georgia, Cambria, Times, serif |
400 | normal | Sinopsi, contingut literari |
| Etiquetes / Nav | ui-sans-serif, system-ui, sans-serif |
400 | normal | Navegació, metadades, labels |
| Organització | ui-sans-serif, system-ui, sans-serif |
400 | uppercase | Nom de l’entitat |
/* Títol dramàtic — estil cartell d'òpera */
.dramatic-title {
font-family: 'Times New Roman', Georgia, serif;
font-weight: 700;
font-style: italic;
line-height: 0.9;
letter-spacing: -0.025em;
color: var(--warm-gold, #c19b67);
}
/* Cos de text literari */
.dramatic-body {
font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
font-weight: 400;
line-height: 1.625;
letter-spacing: 0.025em;
color: rgba(212, 207, 196, 0.9);
}
/* Etiquetes superiors — sans-serif estret */
.dramatic-label {
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 0.6rem;
letter-spacing: 0.4em;
text-transform: uppercase;
}Etiquetes per a categories, nivells i metadades.
Targetes amb imatge i contingut. Radi: 0.75rem. Ombra només al hover.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nivell inicial per a nous estudiants.
Les targetes poden no tenir imatge.
Camps de formulari amb estats i validació. Radi dels inputs: 0.4rem.
Variants de secció per estructurar contingut.
.section — Fons blanc per defecte
.section--alt — Fons gris clar alternatiu
.section--dark — Fons marí fosc, text blanc
Estil per a contingut renderitzat des de CMS / Markdown.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Imatge anterior amb border-radius: 0.5rem. Enllaços dins de prose:
exemple d’enllaç amb color de marca.
Patrons extrets d’El Racó de l’Arxiu. Sense toggle de tema — el mode fosc és l’únic mode.
.card--glass — fons semi-transparent amb backdrop-filter.
Espai de conservació i difusió de documents musicals de la Unió Artística Musical d’Ontinyent.
Recentment hem completat la restauració de diverses partitures històriques que estaven en procés de degradació al fons documental.
Hem publicat una nova secció amb documents digitalitzats per a consulta pública.
| Document | Data | Format |
|---|---|---|
| Partitura original 1892 | 1892 | |
| Programa de mà 1954 | 1954 | JPG |
| Carta de la Societat 1901 | 1901 |
El fons documental de la Unió Artística Musical d’Ontinyent conté una col·lecció diversa de partitures, programes de mà, fotografies i documents administratius que abasten des de la fundació de l’entitat fins als nostres dies. La preservació digital d’aquest patrimoni és fonamental per garantir que les futures generacions puguin accedir a la memòria musical d’Ontinyent.
La digitalització sistemàtica, iniciada el 2025, ha permès crear un arxiu accessible en línia on investigadors, músics i ciutadans poden consultar documents històrics de gran valor. Cada document passa per un procés de catalogació, digitalització en alta resolució i indexació per facilitar-ne la cerca i la consulta.
/* Configuració Hugo per a mode fosc */
defaultTheme: dark
disableThemeToggle: true
params:
ShowReadingTime: false
ShowShareButtons: falseReferència completa dels tokens de disseny.
| Token CSS | Hex | Ús |
|---|---|---|
| --color-brand | #0e1235 | Color principal de marca |
| --color-brand-dark | #080c23 | Hover / focus de marca |
| --color-accent | #c6b300 | Accent daurat (CTAs, highlights) |
| --color-accent-dark | #a89800 | Hover de l'accent |
| --color-accent-light | #e6d000 | Accent clar (fons, resplendor) |
| --color-surface | #ffffff | Superfície principal |
| --color-surface-alt | #f4f4f2 | Superfície alterna |
| --color-text | #1d1d1b | Text principal |
| --color-text-muted | #5c5c5a | Text secundari / metadata |
| --color-text-on-dark | #ffffff | Text sobre fons fosc |
| --color-border | #e0e0de | Vores clares |
| --color-border-dark | rgba(255,255,255,0.12) | Vores sobre fons fosc |
| Token | Valor | Ús |
|---|---|---|
| --radius-xs | 0.25rem | Enllaços de nav |
| --radius-sm | 0.35rem | Botons |
| --radius-md | 0.4rem | Inputs de formulari |
| --radius-lg | 0.5rem | Imatges de targetes, prose |
| --radius-xl | 0.75rem | Targetes |
| --radius-2xl | 1rem | Modals, hero cards |
| --radius-pill | 999px | Píndoles, tags, fotos circulars |
| Token | Valor | Ús |
|---|---|---|
| --shadow-header | 0 2px 16px rgba(0,0,0,0.25) | Header sticky |
| --shadow-dropdown | 0 4px 12px rgba(0,0,0,0.2) | Dropdowns |
| --shadow-card | 0 4px 16px rgba(0,0,0,0.08) | Targetes (hover) |
| --shadow-card-strong | 0 8px 24px rgba(0,0,0,0.1) | Targetes curs/blog (hover) |
| --shadow-modal | 0 20px 40px rgba(0,0,0,0.3) | Modals |
| Token | Valor | Ús |
|---|---|---|
| --transition-fast | 0.15s ease | Nav, links, form inputs |
| --transition-normal | 0.2s ease | Botons (bg + transform) |
| --transition-image | 0.35s ease | Zoom d'imatges de targetes |
| --transition-menu | 0.25s ease | Obrir/tancar menús |
| --transition-hero | 1s cubic-bezier(0.16, 1, 0.3, 1) | Animacions d'entrada hero |