Cámara Oficial de Comercio, Industria y Servicios de la provincia de Huesca

Design Specification — Cámara Oficial de Comercio, Industria y Servicios de la provincia de Huesca

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#A3002A). Display headings use a distinct face (var(--font-serif)) over the body stack (var(--font-sans)). Detected font weights: 300, 400, 500, 600, 700, 800. Detected style signatures: glassmorphism; soft-ui / layered elevation; rounded / pill-heavy.

Logo asset(s): https://www.camarahuesca.com/wp-content/themes/camara-huesca/assets/img/logo-camara-huesca-322.png · https://www.camarahuesca.com/wp-content/uploads/2022/07/logo-fundesa.jpg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(to bottom,transparent 0,rgba(255,255,255,.9) 50%,#fff 100%)
• linear-gradient(135deg,#c2002f 0,#9e0127 100%)
• linear-gradient(135deg,#d10032 0,#c2002f 100%)
• linear-gradient(135deg,#faf5ff 0,#ede9fe 100%)
• linear-gradient(to bottom,#fff 0,#f1f4f8 100%)
• linear-gradient(135deg,#c2002f 0,#a3002a 100%)
• radial-gradient(circle,rgba(255,255,255,.1) 0,transparent 70%)

Typography

Primary typeface: var(--font-sans) — stack: var(--font-sans)

Display / heading typeface: var(--font-serif) (used for large headings; body uses the primary stack)

Font stacks (most used first)

• var(--font-sans)
• var(--font-serif)
• 'Inter'
• 'Playfair Display'
• inherit

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700, 800

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 4px 8px rgba(194, 0, 47, 0.2)
• 0 10px 40px rgba(0,0,0,.15)
• 0 25px 50px -12px rgba(0,0,0,.15)
• 0 10px 25px -5px rgba(0,0,0,.15)
• 0 4px 20px -5px rgba(0,0,0,.08)
• 0 12px 30px -10px rgba(0,0,0,.15)
• 0 25px 50px -12px rgba(0,0,0,.2)
• 0 0 0 3px
• 0 4px 12px rgba(37, 211, 102, 0.4)
• 0 6px 20px rgba(37, 211, 102, 0.6)

Layout

Container max-width: 768px

Grid columns (largest detected grid): 6

Breakpoints

• 400px
• 480px
• 640px
• 767px
• 768px
• 1023px
• 1024px
• 1200px

Animation & Motion

Transitions

• all 0.3s ease
• all 0.2s ease
• color 0.2s
• top .2s
• all .3s ease
• color .2s
• all .2s ease
• all .2s
• transform .3s ease
• opacity .2s ease,visibility .2s
• transform .2s ease
• opacity .3s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease

Keyframes

@keyframes ccSlideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ccFadeOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } }
@keyframes slideInUp { from { opacity: 0; transform: translateY(100px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes bounceDown { 0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)} }
@keyframes aviso-ring { 0%{transform:scale(1);opacity:.6}80%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0} }
@keyframes aviso-chevron-nudge { 0%,100%,60%{transform:translateX(0)}80%{transform:translateX(4px)} }
@keyframes camara-live-pulse { 0%{box-shadow:0 0 0 0 rgba(220,38,38,.7)}70%{box-shadow:0 0 0 .4rem rgba(220,38,38,0)}100%{box-shadow:0 0 0 0 rgba(220,38,38,0)} }
@keyframes heart-glow { 0%,100%{opacity:.5;filter:brightness(.8)}50%{opacity:1;filter:brightness(1.2)} }
@keyframes heart-pop { 0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)} }

Animations

• ccFadeOut 0.8s ease-out forwards
• slideInUp 0.5s ease-out
• bounceDown 1.5s ease-in-out infinite
• none
• heart-glow 6s ease-in-out infinite
• heart-glow 3s ease-in-out infinite
• heart-pop .3s ease-out

CTA labels found on page

• Institución
• Sede electrónica
• Contactar Ahora
• Suscribirme
• Más información
• ¡Contacta con nosotros!
• ¡Únete al club!

Effects

• backdrop-filter: blur(12px)
• backdrop-filter: blur(10px)

Source Design Tokens (CSS custom properties)

:root {
  --wp-block-synced-color: #7a00df;
  --wp-block-synced-color--rgb: 122,0,223;
  --wp-bound-block-color: var(--wp-block-synced-color);
  --wp-editor-canvas-background: #ddd;
  --wp-admin-theme-color: #007cba;
  --wp-admin-theme-color--rgb: 0,124,186;
  --wp-admin-theme-color-darker-10: #006ba1;
  --wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
  --wp-admin-theme-color-darker-20: #005a87;
  --wp-admin-theme-color-darker-20--rgb: 0,90,135;
  --wp-admin-border-width-focus: 2px;
  --wp--preset--font-size--normal: 16px;
  --wp--preset--font-size--huge: 42px;
  --primary: #fff;
}

Do's and Don'ts

Do

• Do reserve the accent #A3002A for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do set large headings in var(--font-serif), and body copy in the primary stack.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700, 800.
• Do align spacing to the 8px base unit derived from the page.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #FFFFFF;
  --color-accent: #A3002A;
  --color-background: #FFFFFF;
  --color-surface: #F9FAFB;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #334155;
  --color-border: #DDDDDD;
  --color-on-primary: #000000;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F9FAFB;
  --color-surface-container: #F3F4F6;
  --color-surface-container-high: #E2E8F0;
  --color-surface-container-highest: #E5E7EB;
  --font-sans: var(--font-sans);
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-pill: 50%;
  --shadow-sm: 0 4px 8px rgba(194, 0, 47, 0.2);
  --shadow-md: 0 12px 30px -10px rgba(0,0,0,.15);
  --shadow-lg: 0 6px 20px rgba(37, 211, 102, 0.6);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --font-display: var(--font-serif);
  --tracking-label: .05em;
  --container-max: 768px;
}