{"id":223490,"date":"2026-06-30T23:05:48","date_gmt":"2026-06-30T23:05:48","guid":{"rendered":"https:\/\/wp.lincolnelectric.coop\/LEC\/?page_id=223490"},"modified":"2026-08-17T22:51:57","modified_gmt":"2026-08-17T22:51:57","slug":"styleguide","status":"publish","type":"page","link":"https:\/\/wp.lincolnelectric.coop\/LEC\/styleguide\/","title":{"rendered":"StyleGuide"},"content":{"rendered":"
\n
\n
\n

LEC Website StyleGuide<\/h1>\n

This StyleGuide documents the approved visual system and reusable content patterns for the Lincoln Electric Cooperative website rebuild in WordPress using Divi 5.<\/p>\n

This first page contains the foundational design system and general interior-content patterns, including colors, typography, buttons, cards, contact blocks, alerts, notices, content sections, and calls to action.<\/p>\n

Continue to Homepage, Navigation, and Listing Patterns \u2192<\/span><\/a><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

Colors<\/h2>\n

The LEC color system keeps the website consistent across headings, text, buttons, cards, alerts, backgrounds, and reusable content blocks.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

 <\/p>\n<\/div><\/div>\n\n

lec-primary<\/h3>\n

Value:<\/strong> #38675b<\/p>\n

Main brand green. Use for primary brand moments, key accents, and strong visual identity.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-primary-light<\/h3>\n

Value:<\/strong> #eaf2ef<\/p>\n

Soft green background. Use for quiet sections, cards, and supporting areas.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-primary-dark<\/h3>\n

Value:<\/strong> #24463e<\/p>\n

Dark brand green. Use for high-emphasis sections, dark cards, and strong contrast areas.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-secondary<\/h3>\n

Value:<\/strong> #4bb649<\/p>\n

Bright support green. Use for positive highlights, success states, and selected accents.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

 <\/p>\n<\/div><\/div>\n\n

lec-secondary-light<\/h3>\n

Value:<\/strong> #eaf8ea<\/p>\n

Soft support green. Use for subtle success areas, light highlights, and quiet supporting backgrounds.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-secondary-dark<\/h3>\n

Value:<\/strong> #2f7d32<\/p>\n

Darker support green. Use when secondary green needs stronger contrast or more visual weight.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-accent-orange<\/h3>\n

Value:<\/strong> #ef8552<\/p>\n

Warm accent color. Use sparingly for highlights, notices, and supporting visual emphasis.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-accent-gold<\/h3>\n

Value:<\/strong> #ffa918<\/p>\n

Gold accent color. Use for warm highlights, attention areas, and secondary visual emphasis.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

 <\/p>\n<\/div><\/div>\n\n

lec-accent-yellow<\/h3>\n

Value:<\/strong> #f5ce38<\/p>\n

Bright accent yellow. Use sparingly for highlights, callouts, and attention areas.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-alert<\/h3>\n

Value:<\/strong> #ef8552<\/p>\n

Alert color. Use for important notices, warnings, or content that needs extra attention.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-warning<\/h3>\n

Value:<\/strong> #ffa918<\/p>\n

Warning color. Use for caution messages, deadline reminders, and important service notes.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-success<\/h3>\n

Value:<\/strong> #4bb649<\/p>\n

Success color. Use for positive states, confirmations, and completed actions.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

 <\/p>\n<\/div><\/div>\n\n

lec-heading<\/h3>\n

Value:<\/strong> #273633<\/p>\n

Primary heading color. Use for major headings, section titles, and strong text hierarchy.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-text<\/h3>\n

Value:<\/strong> #273633<\/p>\n

Main text color. Use for readable body copy and important page content.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-text-muted<\/h3>\n

Value:<\/strong> rgba(0, 0, 0, 0.7)<\/p>\n

Muted text color. Use for descriptions, helper text, notes, and lower-emphasis copy.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-text-on-dark<\/h3>\n

Value:<\/strong> #ffffff<\/p>\n

Text color for dark backgrounds. Use when placing copy over dark green or other dark sections.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

 <\/p>\n<\/div><\/div>\n\n

lec-background<\/h3>\n

Value:<\/strong> #ffffff<\/p>\n

Main page background color. Use for standard white sections and clean content areas.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-background-soft<\/h3>\n

Value:<\/strong> #f7faf8<\/p>\n

Soft section background. Use to separate content areas without creating heavy contrast.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-background-muted<\/h3>\n

Value:<\/strong> #eaf2ef<\/p>\n

Muted green background. Use for quiet panels, supporting sections, and soft cards.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-border<\/h3>\n

Value:<\/strong> rgba(0, 0, 0, 0.12)<\/p>\n

Default border color. Use for subtle card borders, dividers, and low-emphasis outlines.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

 <\/p>\n<\/div><\/div>\n\n

lec-border-strong<\/h3>\n

Value:<\/strong> #c7d5d1<\/p>\n

Stronger border color. Use when a card, divider, or outline needs more definition.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-white<\/h3>\n

Value:<\/strong> #ffffff<\/p>\n

Pure white utility color. Use only when a specific white value is needed.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-black<\/h3>\n

Value:<\/strong> #000000<\/p>\n

Pure black utility color. Use sparingly for special cases, not standard body text.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

 <\/p>\n<\/div><\/div>\n\n

lec-alert-dark<\/h3>\n

Value:<\/strong> #c85f32<\/p>\n

Darker alert color. Use for stronger alert emphasis, borders, or dark warning accents.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n

\n
\n
\n

Typography<\/h2>\n

The LEC typography system uses clear heading and body styles to keep pages readable, consistent, and easy to scan across desktop, tablet, and phone layouts.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Heading Font<\/h3>\n

Variable:<\/strong> lec-font-heading<\/p>\n

Font:<\/strong> Be Vietnam Pro<\/p>\n

Used for page titles, section headings, card titles, and other high-emphasis text.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

Body Font<\/h3>\n

Variable:<\/strong> lec-font-body<\/p>\n

Font:<\/strong> Urbanist<\/p>\n

Used for paragraph text, descriptions, notes, lists, and most member-facing copy.<\/p>\n<\/div><\/div>\n<\/div>\n\n

\n

UI Font<\/h3>\n

Variable:<\/strong> lec-font-ui<\/p>\n

Font:<\/strong> Urbanist<\/p>\n

Used for buttons, navigation, labels, small interface text, and reusable website controls.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n

\n
\n

Heading Scale<\/h2>\n

H1 Page Title Example<\/h1>\n

Use H1 once per page for the primary page title.<\/p>\n

H2 Section Heading Example<\/h2>\n

Use H2 for major page sections.<\/p>\n

H3 Subsection Heading Example<\/h3>\n

Use H3 for reusable block titles, card groups, and major pattern examples.<\/p>\n

H4 Small Heading Example<\/h4>\n

Use H4 for smaller content groups and nested sections.<\/p>\n

H5 Supporting Heading Example<\/h5>\n

Use H5 for usage notes, supporting labels, and documentation headings.<\/p>\n

H6 Minor Heading Example<\/h6>\n

Use H6 sparingly for the smallest structured headings when another heading level is required.<\/p>\n<\/div><\/div>\n\n

Typography Implementation Notes<\/h3>\n

Default presets<\/h5>\n

The LEC typography system is maintained through two default Divi field presets:<\/p>\n