Skip to main content
Weld.com

Website design system · v1

Design system

One shared base for the three homepage proposals: brand, type, layout and components stay the same; each proposal changes the color theme. Every rule shows where it comes from.

Sources

Tags next to each rule say where it comes from. Dashed red tags are Vectorial proposals that still need client approval.

  • WELD color and font legendBrand legend
  • Logo files and WELD App icon sent by the clientBrand files
  • Vectorial project brief for the homepageBrief
  • Website Refresh project brief videoLoom
  • Strategic direction deck and content strategyStrategy
  • Vectorial proposal, pending approvalProposal
  • Client design feedback, Loom of 10 Nov 2026Feedback

Color

Only the client's colors: the four gradient colors from the brand legend, plus the black of the one-color mark and the white of the WELD App icon.

  • Black
    #000000Brand files
    RGB 0, 0, 0 · --color-blackDark backgrounds, text on light
  • White
    #FFFFFFBrand files
    RGB 255, 255, 255 · --color-whiteLight backgrounds, text on dark
  • Red
    #AF2F20Brand legend
    RGB 175, 47, 32 · --color-redPrimary button (white text), errors on light
  • Orange
    #F49D63Brand legend
    RGB 244, 157, 99 · --color-orangeHighlight text on dark, primary button hover, errors on dark
  • Sky
    #A6CBFFBrand legend
    RGB 166, 203, 255 · --color-skyLight surfaces (black text)
  • Blue
    #4D7BDABrand legend
    RGB 77, 123, 218 · --color-blueFocus ring, large text and details only
Palette
Only these 6 colors. No grays, no new shadesBrand legend
Tints
Only hairlines (black or white at 25%) and partner logos (60%)Feedback
Photo scrims
Black gradient over photos so white text stays readableProposal
Secondary text
Same color as body text; hierarchy by size and weightProposal
Blue text
Only 24px and up (4.07:1 on white)Proposal
Red on black
Never as text (3.24:1)Proposal

Brand gradient

  1. #A6CBFFoffset 0
  2. #4D7BDAoffset 0.2083
  3. #AF2F20offset 0.5781
  4. #F49D63offset 1

linear-gradient(90deg,#A6CBFF 0%,#4D7BDA 20.83%,#AF2F20 57.81%,#F49D63 100%)

3 px line

Use
Only in a 3 px line and in small detailsBrief
Details
2px hairline under the header and stats, 32×2px mark before section labelsProposal
Borders
1.5px gradient ring, not solid orange, on card borders, arrow circles and outlined-button hoverFeedback
Glow
Warm orange light under the starter kit and partner cards onlyFeedback
Hover
Every hover lights the gradient ring with a blue-left, orange-right drop glow (bigger on cards and photos)Feedback
Section labels
The 32×2px gradient mark goes before every section labelFeedback
Offsets
Exact values from the brand legendBrand legend
Never
As a solid background for text or buttonsProposal
Subtle fill
At ~20% over black, only for the newsletter CTA cardProposal

Typography

Mulish

Brand legend
  • Aa 300
  • Aa 400
  • Aa 500
  • Aa 600
  • Aa 700

Is welding for you?

  • HeroProposal
    clamp(40px, 5.6vw, 88px) · lh 0.95 · -0.04em · 700

    Learn. Grow. Create.

  • DisplayProposal
    clamp(40px, 6.4vw, 104px) · lh 1 · -0.04em · 700

    Learn. Grow. Create.

  • H2Proposal
    clamp(32px, 4.2vw, 60px) · lh 1.05 · -0.03em · 700

    Learn. Grow. Create.

  • H3Proposal
    clamp(22px, 1.8vw, 28px) · lh 1.15 · -0.02em · 700

    Learn. Grow. Create.

  • LeadProposal
    clamp(22px, 2.6vw, 38px) · lh 1.2 · -0.025em · 400

    Learn. Grow. Create.

  • BodyProposal
    17px · lh 1.55 · 0 · 400

    Free videos, online courses and a community built by working welders.

  • SmallProposal
    15px · lh 1.5 · 0 · 400

    Free videos, online courses and a community built by working welders.

  • LabelProposal
    13px · lh 1.2 · 0.08em · 600

    Explore WELD

The Hero sample is shown smaller here; the spec is the value in its row.

Minimum text size
16 px for paragraphs and form fieldsProposal
Labels
Uppercase after a 32×2px gradient mark. No bracketsProposal

Layout

Columns
12Brief
Max width
1440pxBrief
Gutter
24px · 16px on mobileBrief
Spacing scale
Base 8: 8 · 16 · 24 · 32 · 48 · 64 · 96Proposal
Section padding
72px mobile · 112px tablet · 144px desktopProposal
Label to content
32px mobile · 48px tablet · 56px desktopProposal
Card radius
16pxBrief
Buttons
PillBrief

Spacing scale

  • s1 · 8px
  • s2 · 16px
  • s3 · 24px
  • s4 · 32px
  • s5 · 48px
  • s6 · 64px
  • s7 · 96px

12-column grid

Components

Hover over the buttons to see their hover state.

Buttons on light

Buttons on dark

Buttons

Height
48px, one size for every buttonProposal
Padding
0 24pxProposal
Text
15px · 600Proposal
Primary
Red #AF2F20 with white textBrief
Primary hover
Orange #F49D63 with black textProposal
White
White with black text, on Sky surfaces; hover inverts to blackProposal
Outline
1px border in the text colorProposal
Outline hover
Underline, no new colorProposal

States

Focus
3px Blue #4D7BDA outline, 3px offsetProposal
Focus on Sky
3px Black outline (Blue is 2.4:1 on Sky)Proposal
Error on light
Red #AF2F20 text and 2px borderProposal
Error on dark
Orange #F49D63 text and 2px borderProposal
External links
↗, new tab, “(opens in new tab)”Brief

Section label

Explore WELD

Chips

AWPFreeEvery Friday

Big link

See all courses

Field with error

you@exampleEnter a valid email address.

Imagery and copy

Imagery

People
Real working welders, never stock faces with namesStrategy
Partner logos
One color at 60%: black on light, white on darkBrief
Hero photo
A welder coming out of the darkBrief

Copy

Courses
“Fundamentals” or “Online courses”. Never “Certified”Strategy
Language
EnglishBrief
Tone
Real welders and real work over institutional career languageStrategy
Conversion
One: email capture (newsletter + free starter kit)Strategy

Motion

Entrance
Fade + 12px translateBrief
Reduced motion
All motion off, marquee pausedBrief

3 proposals

Same type, layout and components. Each homepage proposal applies one of these color themes.

A · Community

Brief

Structure from the project brief (coffee-tech reference), in the client's colors.

Join the list

Proposal A

Community

Black hero with the welder coming out of the dark, white body, black cards.

Get the free starter kitWatch on YouTube

Explore WELD

Online Courses

Start with the Fundamentals.

AWP

Watch

Free videos with welders on the job.

YouTube subscribers
1.4M

Lincoln Electric · ESAB · DeWalt · Airgas

Join the list
Hero
#000000
Background
#FFFFFF
Surface
#FFFFFF
Text
#000000
Accent
#AF2F20

B · Spark

Loom

The Loom suggests a dark theme for the welding industry.

Join the list

Proposal B

Spark

Fully black site, like a shop at night. The arc and the orange do the talking.

Get the free starter kitWatch on YouTube

Explore WELD

Online Courses

Start with the Fundamentals.

AWP

Watch

Free videos with welders on the job.

YouTube subscribers
1.4M

Lincoln Electric · ESAB · DeWalt · Airgas

Join the list
Hero
#000000
Background
#000000
Surface
#000000
Text
#FFFFFF
Accent
#F49D63

C · Pathway

Strategy

The strategy's “Convince” job: trust for people who visit official sites.

Join the list

Proposal C

Pathway

White and editorial with sky panels, built for parents, counselors and sponsors.

Get the free starter kitWatch on YouTube

Explore WELD

Online Courses

Start with the Fundamentals.

AWP

Watch

Free videos with welders on the job.

YouTube subscribers
1.4M

Lincoln Electric · ESAB · DeWalt · Airgas

Join the list
Hero
#FFFFFF
Background
#FFFFFF
Surface
#A6CBFF
Text
#000000
Accent
#AF2F20

Accessibility

Standard
AODA = WCAG 2.1 AABrief
Landmarks
Header, nav, main, footer; skip link firstBrief
Images
Alt text on every imageBrief
Lighthouse
Accessibility ≥ 95 · Performance ≥ 90Brief

Text contrast · AA needs 4.5:1 (3:1 for large text)

SampleText on backgroundRatioBody text24px+ text
AaBlack on White21.00PassPass
AaWhite on Black21.00PassPass
AaWhite on Red6.46PassPass
AaRed on White6.46PassPass
AaBlack on Orange9.85PassPass
AaOrange on Black9.85PassPass
AaBlack on Sky12.61PassPass
AaSky on Black12.61PassPass
AaBlue on White4.07FailPass
AaWhite on Blue4.07FailPass
AaRed on Black3.25FailPass

Focus ring · AA needs 3:1

  • Blue on White · 4.07 · Pass
  • Blue on Black · 5.16 · Pass
  • Blue on Sky · 2.44 · Fail
  • Black on Sky · 12.61 · Pass