Caterpillar Construction Yellow (1925)

Free

Hi-Way Yellow de Caterpillar fue elegido en 1931 para que las cuadrillas de carreteras pudieran distinguir cada bulldozer y motoniveladora contra tierra, polvo y luz menguante. Unido a un grueso logotipo negro slab y la emblemática «A» triangular amarilla, se volvió el color más reconocido de la industria pesada. Este sistema trata ese amarillo saturado como la propia página: un fondo de alta visibilidad donde letra negra, franjas de peligro y paneles blancos de especificaciones comunican con la franqueza de un dibujo de ingeniería.

Más sobre el estilo Caterpillar Construction Yellow (1925) (English)

OriginPeoria, Illinois, USA
Period1925 founded (Holt + Best merger); Hi-Way Yellow 1931; current CAT logo 1989–present
DesignerBenjamin Holt · C. L. Best · Lippincott (1989 rebrand)
MovementsAmerican industrial design · heavy-equipment identity · ISO machinery branding

Web examples

Slide examples

Typography

Heading system

Anton · 3rem / 700 / 1.1 / -0.02em

Body system

Inter · 1rem / 400 / 1.5

Anton + Inter

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Numbers 0 1 2 3 4 5 6 7 8 9

Color palette

primary

secondary

accent

neutral

success

warning

error

info

Buttons

Cards

Flat

No shadow

Elevated

Shadow

Outlined

Border

Glass

Blur

Spacing

Scale

2px4px6px8px12px16px24px32px48px64px96px128px

Gaps

8px16px24px48px

Section padding

32px64px96px128px

Elevation

shadows.inner

inset 0 2px 4px rgba(0,0,0,0.1)

shadows.focus

0 0 0 3px rgba(15,15,15,0.4)

Shapes & Radii

none

2px

4px

6px

8px

full

9999px

Composition

Layout: grid
Content Width: full-bleed
Framing: solid
Grid Intensity: strong
Rhythm: 4px

Material

Surface: flat
Blur: none
Borders: 2px solid #0F0F0F

Motion

Level

minimal

Durations

instant · 0msfast · 100msnormal · 200msslow · 300msslower · 500ms

Easings

defaultinoutspring

Hover

opacitytint

Iconography

Treatment: linear
Set: lucide
Stroke: 2px
Sizes: sm 16px · md 20px · lg 24px

Techniques

Hazard stripe accent

Diagonal black-and-yellow repeating stripes used as a decorative border or section divider, evoking ISO 3864 safety markings.

.hazard-stripe {
  background: repeating-linear-gradient(
    -45deg,
    #0F0F0F,
    #0F0F0F 10px,
    #FFCD11 10px,
    #FFCD11 20px
  );
  height: 8px;
  width: 100%;
}

Machine-data panel

A concrete-gray card with monospace type and thick black border, styled like an equipment instrument readout.

.machine-panel {
  background: #3F4347;
  border: 3px solid #0F0F0F;
  border-radius: 4px;
  padding: 24px;
  color: #FFFFFF;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
}

Full-bleed yellow hero

A section that saturates the viewport with CAT yellow, using the condensed Anton headline at maximum scale against the brand ground.

.hero-yellow {
  background: #FFCD11;
  padding: 96px 32px;
  text-align: left;
}
.hero-yellow h1 {
  font-family: 'Anton', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  color: #0F0F0F;
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

Do's & Don'ts

+Do

Use CAT yellow (#FFCD11) as the dominant page ground — it IS the brand
Set headlines in Anton uppercase for maximum industrial impact
Use thick black borders (2–4px) to define panel edges
Reserve safety orange exclusively for warnings and hazard states
Keep corners sharp (2–4px radius) — machined, not friendly

−Don't

Use mustard, olive, or muted yellows — must be saturated Pantone 109
Apply neumorphic or glossy surfaces — industrial paint is matte
Use decorative serif type anywhere — this is engineering print
Add cute or playful micro-animations — CAT is workmanlike
Use pure white as page ground — yellow is the page
Round corners beyond 8px — machine surfaces have hard chamfers