UMLAC Visual Style Audit

Documento visual para revisión de diseño. Fuente de verdad: tokens y clases escaneados desde layouts y CSS.

Abrir plantilla en Google Docs

Modo de generación: deterministic

Archivos escaneados: 73

Rutas: layouts, static/css, assets/css

Colores Usados

CLR-001

#FFF

Usos: 39

Ejemplo: static/css/library/30-template-components.css

CLR-002

#028389

Usos: 10

Ejemplo: layouts/partials/article/shell.html

CLR-003

#10282C

Usos: 9

Ejemplo: static/css/design-tokens.generated.css

CLR-004

#D86805

Usos: 6

Ejemplo: static/css/design-tokens.generated.css

CLR-005

#E3F5E7

Usos: 4

Ejemplo: static/css/design-tokens.generated.css

CLR-006

#C7CCD2

Usos: 3

Ejemplo: static/css/design-tokens.generated.css

CLR-007

#FFFFFF

Usos: 3

Ejemplo: static/css/design-tokens.generated.css

CLR-008

rgba(254, 224, 138, .09)

Usos: 3

Ejemplo: static/css/library/20-site-foundation.css

CLR-009

#111827

Usos: 2

Ejemplo: layouts/serie-educativa/docentes.html

CLR-010

#2B6974

Usos: 2

Ejemplo: layouts/partials/blocks/home_interface_hero.html

CLR-011

#7EAFA9

Usos: 2

Ejemplo: layouts/partials/blocks/card_grid_links.html

CLR-012

#E5E7EB

Usos: 2

Ejemplo: layouts/serie-educativa/docentes.html

CLR-013

#F3F4F6

Usos: 2

Ejemplo: static/css/design-tokens.generated.css

CLR-014

rgba(16, 40, 44, .22)

Usos: 2

Ejemplo: static/css/library/20-site-foundation.css

CLR-015

rgba(16, 40, 44, {{ $behavior.overlay_opacity }})

Usos: 2

Ejemplo: layouts/partials/blocks/hero_banner.html

CLR-016

rgba(255, 255, 255, 0.42)

Usos: 2

Ejemplo: static/css/library/40-home-interface-hero.css

CLR-017

#374151

Usos: 1

Ejemplo: static/css/design-tokens.generated.css

CLR-018

#A1ADAD

Usos: 1

Ejemplo: static/css/design-tokens.generated.css

CLR-019

#D1D5DB

Usos: 1

Ejemplo: static/css/design-tokens.generated.css

CLR-020

#DCDCDC

Usos: 1

Ejemplo: static/css/design-tokens.generated.css

CLR-021

#DEE2E1

Usos: 1

Ejemplo: static/css/design-tokens.generated.css

CLR-022

#E0C36B

Usos: 1

Ejemplo: static/css/design-tokens.generated.css

CLR-023

#FEE08A

Usos: 1

Ejemplo: static/css/design-tokens.generated.css

CLR-024

rgba(16, 40, 44, .18)

Usos: 1

Ejemplo: static/css/library/20-site-foundation.css

CLR-025

rgba(16, 40, 44, .24)

Usos: 1

Ejemplo: static/css/library/20-site-foundation.css

CLR-026

rgba(16, 40, 44, .58)

Usos: 1

Ejemplo: static/css/library/20-site-foundation.css

CLR-027

rgba(16, 40, 44, .62)

Usos: 1

Ejemplo: static/css/library/20-site-foundation.css

CLR-028

rgba(16, 40, 44, .86)

Usos: 1

Ejemplo: static/css/library/20-site-foundation.css

CLR-029

rgba(16, 40, 44, .88)

Usos: 1

Ejemplo: static/css/library/20-site-foundation.css

CLR-030

rgba(16, 40, 44, 0.04)

Usos: 1

Ejemplo: static/css/library/40-home-interface-hero.css

CLR-031

rgba(16, 40, 44, 0.08)

Usos: 1

Ejemplo: static/css/library/40-home-interface-hero.css

CLR-032

rgba(16, 40, 44, 0.16)

Usos: 1

Ejemplo: static/css/library/40-home-interface-hero.css

CLR-033

rgba(16, 40, 44, 0.28)

Usos: 1

Ejemplo: static/css/library/40-home-interface-hero.css

CLR-034

rgba(16, 40, 44, 0.64)

Usos: 1

Ejemplo: static/css/library/40-home-interface-hero.css

CLR-035

rgba(16, 40, 44, 0.82)

Usos: 1

Ejemplo: static/css/library/40-home-interface-hero.css

CLR-036

rgba(16,40,44,.08)

Usos: 1

Ejemplo: static/css/library/30-template-components.css

CLR-037

rgba(16,40,44,.16)

Usos: 1

Ejemplo: static/css/library/30-template-components.css

CLR-038

rgba(254, 224, 138, .04)

Usos: 1

Ejemplo: static/css/library/20-site-foundation.css

CLR-039

rgba(255, 255, 255, .78)

Usos: 1

Ejemplo: static/css/library/20-site-foundation.css

CLR-040

rgba(255, 255, 255, .86)

Usos: 1

Ejemplo: static/css/library/20-site-foundation.css

Tipografías Declaradas

FAM-001

var(--font-sans)

Usos: 57

Ejemplo: static/css/library/30-template-components.css

FAM-002

var(--font-display)

Usos: 27

Ejemplo: static/css/library/20-site-foundation.css

FAM-003

"EB Garamond", serif

Usos: 3

Ejemplo: layouts/partials/blocks/hero_banner.html

FAM-004

var(--font-body)

Usos: 2

Ejemplo: static/css/library/20-site-foundation.css

FAM-005

"Barlow Condensed", sans-serif

Usos: 1

Ejemplo: layouts/partials/blocks/hero_banner.html

FAM-006

"EB Garamond",serif

Usos: 1

Ejemplo: layouts/partials/blocks/feature_panel.html

Font Sizes Declarados

FZS-001

.875rem

Usos: 10

FZS-002

1.25rem

Usos: 7

FZS-003

var(--size-sm)

Usos: 6

FZS-004

1rem

Usos: 5

FZS-005

clamp(1.45rem, 2.4vw, 2rem)

Usos: 5

FZS-006

clamp(3rem, 5vw, 3.75rem)

Usos: 5

FZS-007

1.05rem

Usos: 4

FZS-008

clamp(1.25rem, 2vw, 1.5rem)

Usos: 4

FZS-009

.9rem

Usos: 3

FZS-010

.8rem

Usos: 2

FZS-011

.92rem

Usos: 2

FZS-012

1.2rem

Usos: 2

FZS-013

1.35rem

Usos: 2

FZS-014

1.3rem

Usos: 2

FZS-015

1.5rem

Usos: 2

FZS-016

clamp(1.05rem, 1.25vw, 1.25rem)

Usos: 2

FZS-017

var(--size-2xl)

Usos: 2

FZS-018

var(--size-base)

Usos: 2

FZS-019

var(--size-lg)

Usos: 2

FZS-020

var(--size-md)

Usos: 2

FZS-021

var(--size-xs)

Usos: 2

FZS-022

.75rem

Usos: 1

FZS-023

.95rem

Usos: 1

FZS-024

0.82rem

Usos: 1

FZS-025

0.95rem

Usos: 1

FZS-026

1.2em

Usos: 1

FZS-027

1.35em

Usos: 1

FZS-028

1.55rem

Usos: 1

FZS-029

1.85rem

Usos: 1

FZS-030

100%

Usos: 1

FZS-031

1rem !important

Usos: 1

FZS-032

2.15rem

Usos: 1

FZS-033

2.35rem

Usos: 1

FZS-034

2.75rem

Usos: 1

FZS-035

20px

Usos: 1

FZS-036

2rem

Usos: 1

FZS-037

3.35rem

Usos: 1

FZS-038

3.75rem

Usos: 1

FZS-039

clamp(.95rem, 1.8vw, 1.25rem)

Usos: 1

FZS-040

clamp(0.95rem, 1.15vw, 1.08rem)

Usos: 1

FZS-041

clamp(1.05rem, 1.5vw, 1.25rem)

Usos: 1

FZS-042

clamp(1.05rem,1.6vw,1.35rem)

Usos: 1

FZS-043

clamp(1.15rem, 1.9vw, 1.45rem)

Usos: 1

FZS-044

clamp(1.15rem, 1.9vw, 1.55rem)

Usos: 1

FZS-045

clamp(1.18rem, 1.6vw, 1.45rem)

Usos: 1

FZS-046

clamp(1.1rem, 1.8vw, 1.35rem)

Usos: 1

FZS-047

clamp(1.25rem, 1.6vw, 1.6rem)

Usos: 1

FZS-048

clamp(1.25rem, 1.8vw, 1.55rem)

Usos: 1

FZS-049

clamp(1.25rem, 2.2vw, 1.75rem)

Usos: 1

FZS-050

clamp(1.25rem, 2.4vw, 1.65rem)

Usos: 1

FZS-051

clamp(1.2rem, 1.9vw, 1.6rem)

Usos: 1

FZS-052

clamp(1.2rem, 2vw, 1.5rem)

Usos: 1

FZS-053

clamp(1.35rem, 2.2vw, 1.9rem)

Usos: 1

FZS-054

clamp(1.35rem, 2.6vw, 2rem)

Usos: 1

FZS-055

clamp(1.35rem, 2vw, 1.9rem)

Usos: 1

FZS-056

clamp(1.45rem, 2.6vw, 2.1rem)

Usos: 1

FZS-057

clamp(1.55rem, 2.6vw, 2.1rem)

Usos: 1

FZS-058

clamp(1.5rem, 2.2vw, 1.875rem)

Usos: 1

FZS-059

clamp(2.35rem, 4.35vw, 4.45rem)

Usos: 1

FZS-060

clamp(2.35rem, 5vw, 4.4rem)

Usos: 1

FZS-061

clamp(2.4rem, 5vw, 4.8rem)

Usos: 1

FZS-062

clamp(2.5rem, 5vw, 5.2rem)

Usos: 1

FZS-063

clamp(3.25rem, 8vw, 6.75rem)

Usos: 1

FZS-064

var(--size-3xl)

Usos: 1

FZS-065

var(--size-xl)

Usos: 1

Utility Classes Más Usadas

Texto

UTX-001 · text-sm (35)
UTX-002 · text-gray-900 (31)
UTX-003 · text-gray-800 (26)
UTX-004 · text-lg (21)
UTX-005 · text-2xl (16)
UTX-006 · text-gray-700 (16)
UTX-007 · text-[var(--color-chart-red)] (15)
UTX-008 · text-xl (12)
UTX-009 · text-xs (8)
UTX-010 · text-base (7)
UTX-011 · text-4xl (6)
UTX-012 · text-5xl (5)
UTX-013 · text-gray-500 (5)
UTX-014 · text-gray-600 (5)
UTX-015 · text-3xl (4)

Background

UBG-001 · bg-white (21)
UBG-002 · bg-[#028389] (4)
UBG-003 · bg-primary (2)
UBG-004 · bg-[#10282c]/20 (1)
UBG-005 · bg-[#E3F5E7] (1)
UBG-006 · bg-gray-200 (1)
UBG-007 · bg-gray-50 (1)

Border

UBR-001 · border-gray-200 (23)
UBR-002 · border (20)
UBR-003 · border-b (9)
UBR-004 · border-t (6)
UBR-005 · border-gray-100 (5)
UBR-006 · border-b-[3px] (3)
UBR-007 · border-white/60 (3)
UBR-008 · border-[#028389] (2)
UBR-009 · border-[var(--color-border-subtle)] (2)
UBR-010 · border-b-0 (2)
UBR-011 · border-gray-300 (2)
UBR-012 · border-gray-400 (2)
UBR-013 · border-t-0 (2)
UBR-014 · border-t-[3px] (2)
UBR-015 · border-transparent (2)

Radius + Spacing

URD-001 · rounded-[0.125rem] (29)
URD-002 · rounded-[60px] (5)
URD-003 · rounded-full (3)
URD-004 · rounded (1)
URD-005 · rounded-hero-xl (1)

USP-001 · mb-3 (18)
USP-002 · px-4 (18)
USP-003 · mx-auto (15)
USP-004 · mb-4 (11)
USP-005 · gap-3 (10)
USP-006 · mb-6 (10)
USP-007 · gap-2 (8)
USP-008 · mb-10 (8)
USP-009 · mb-12 (8)
USP-010 · mb-8 (8)
USP-011 · gap-4 (7)
USP-012 · mb-5 (7)

Mapa de Componentes

Header + Navigation

layouts/partials/site/header.html
layouts/_default/baseof.html
data/published/navigation.json

Homepage Sections

layouts/index.html
data/published/homepage.json

Article Shell + TOC + Sidebar

layouts/partials/article/shell.html
layouts/partials/blocks/related_links.html
data/published/articles.json
data/published/content_blocks.json

Footer + Newsletter

layouts/partials/site/footer.html
data/published/homepage.json

UMLAC Visual Style Audit

Colores Usados

Tipografías Declaradas

Font Sizes Declarados

Utility Classes Más Usadas

Texto

Background

Border

Radius + Spacing

Mapa de Componentes

Header + Navigation

Homepage Sections

Article Shell + TOC + Sidebar

Footer + Newsletter

Mantente Conectado.