LEC Style Guide
This private style guide documents the colors, typography, spacing, buttons, cards, and layout patterns used for the Lincoln Electric Cooperative website rebuild.
The goal is to keep each page consistent, easy to maintain, and aligned with the LEC brand. When creating new pages, use the variables and examples shown here instead of manually choosing new colors, fonts, spacing, or card styles.
Colors
Use these color variables when building pages, buttons, cards, notices, and layout sections.
lec-primary
#38675B
Primary buttons, icons, nav hover, major CTA areas.
lec-primary-light
#EAF2EF
Soft brand background and subtle green sections.
lec-primary-dark
#24463E
Dark CTA areas, footer background, hover states.
lec-secondary
#4BB649
Supporting action color and success-oriented highlights.
lec-secondary-light
#EAF8EA
Light support background for service cards.
lec-secondary-dark
#2F7D32
Hover state for secondary buttons.
lec-heading
#273633
Page titles, section headings, card titles.
lec-text
#273633
Main body text.
lec-text-muted
#000000 at 70%
Descriptions, helper text, captions.
lec-text-on-dark
#FFFFFF
Text on dark backgrounds.
lec-link
#2EA3F2
Text links and low-priority link buttons.
lec-alert
#EF8552
Outage, safety, and urgent notices only.
lec-warning
#FFA918
Maintenance notices and important reminders.
lec-success
#4BB649
Success messages and positive status indicators.
lec-background
#FFFFFF
Default page and card background.
lec-background-soft
#F7FAF8
Alternating page sections.
lec-background-muted
#EAF2EF
Directory areas, form areas, grouped cards.
lec-border
#000000 at 12%
Default borders and dividers.
lec-border-strong
#C7D5D1
Visible borders for tables, forms, and important cards.
lec-white
#FFFFFF
White utility value.
lec-black
#000000
Black utility value.
Typography
Use these typography styles to keep headings, body copy, links, labels, and small text consistent across the website.
Font Pairing
Headings: Be Vietnam Pro
Body: Urbanist
UI: Urbanist
H1 Page Title
Reliable service. Local commitment.
Use H1 once per page for the main page title.
H2 Section Heading
Member services made simple.
Use H2 for major page sections.
H3 Subsection Heading
Pay your bill online.
Use this style for subsection titles, card headings, and grouped content.
Intro Text
Lincoln Electric Cooperative serves members across northwest Montana with reliable electric service, local support, and cooperative values.
Use intro text below page titles or at the start of important sections.
Body Text
Use body text for standard page content, instructions, descriptions, and member service information. Keep paragraphs clear, direct, and easy to scan.
Small Text
Use small text for captions, helper text, labels, and secondary information.
Example: Office hours may vary on holidays or during severe weather events.
Link Text
Use clear, action-based link text instead of vague text like "click here".
Cards
Use cards to group related content, highlight important actions, and make service information easier to scan.
Basic Info Card
Use this card for general service information, page summaries, and supporting content.
Pay your bill online
Use service action cards to guide members toward common tasks.
Contact Lincoln Electric
Office: (406) 889-3301
Address: 312 Osloski Rd, Eureka, MT 59917
Need help with your account?
Contact our office for billing, service, or account questions.
Outage or safety concern?
Use alert cards for urgent service messages, outage notices, and safety reminders.
Card usage rule: use cards to group related information. Avoid placing too many unrelated actions in one card.
Notices and Alerts
Use notices to highlight important information, outage updates, safety messages, billing reminders, and status confirmations.
Alert Notice
Use alert notices for outage, safety, or urgent service information that members need to see quickly.
Outage Notice
Report outages by calling the office or using the outage reporting tools provided by Lincoln Electric Cooperative.
Warning Notice
Use warning notices for scheduled maintenance, billing reminders, or important service updates.
Info Notice
Use info notices for helpful context, service explanations, or member guidance that is not urgent.
Success Notice
Use success notices for confirmations, completed actions, and positive status messages.
LEC Style Layout Sections
Reusable section patterns for building consistent LEC website pages. These layouts define spacing, background use, content width, and call-to-action placement across service pages, billing pages, outage pages, and general information pages.
Standard White Section
Use this layout for normal page content, general explanations, member information, and service details.
Best for:
- Billing information
- Service descriptions
- Office information
- General page content
Pattern type: Standard content section
Recommended background: Lec-Background or Lec-White
Recommended text color: Lec-Text
Recommended max width: 1120px
Recommended padding: 40px desktop, 28px tablet, 22px phone
Soft Background Section
Use this layout when a page needs a gentle visual break from standard white content. This works well for supporting information, secondary explanations, and grouped content that should feel connected but not heavy.
Best for:
- Member guidance
- Supporting page sections
- Billing or service explanations
- Light callout areas
Pattern type: Soft background content section
Recommended background: Lec-Background-Soft
Recommended text color: Lec-Text
Recommended border color: Lec-Border-Strong when placed on a soft page background
Recommended max width: 1120px
Recommended padding: 40px desktop, 28px tablet, 22px phone
Dark CTA Section
Use this layout when the page needs a strong call-to-action area. This pattern should guide members toward an important next step without making the whole page feel busy.
Best for:
- Report an outage prompts
- Contact us sections
- Payment or billing actions
- Important service requests
Pattern type: High-emphasis call-to-action section
Recommended background: Lec-Primary-Dark
Recommended text color: Lec-Text-On-Dark
Recommended button style: LEC Primary Light or LEC Text Link Button on dark background
Recommended max width: 1120px
Recommended padding: 44px desktop, 32px tablet, 24px phone
Two Column Content Section
Use this layout when content needs a main explanation on one side and supporting details, links, or actions on the other. This pattern helps organize related information without making the page feel crowded.
Main Content Area
This side is used for the primary page message. It should explain the topic clearly and give members enough context to understand what they need to do next.
Use this area for service details, billing explanations, outage information, or general member guidance.
Supporting Details
Common uses:
- Quick links
- Contact details
- Office hours
- Related actions
Recommended: Keep this side shorter than the main content area.
Pattern type: Two column content section
Recommended background: Lec-Background or Lec-White
Recommended text color: Lec-Text
Recommended layout: Flex row on desktop, stacked on tablet and phone
Recommended gap: 32px desktop, 24px tablet, 20px phone
Recommended max width: 1120px
Recommended padding: 40px desktop, 28px tablet, 22px phone
Action Grid Section
Use this layout when a page needs to present several related actions in a clear, scannable way. This pattern works well when members need to choose from multiple next steps.
Report an Outage
Use an action card when the member needs to complete an important task quickly.
Pay My Bill
Use an action card for common account, billing, and payment-related actions.
Contact the Office
Use an action card when the next step is to call, email, or visit the office.
Pattern type: Action grid section
Recommended background: Lec-Background-Soft
Recommended card background: Lec-Background or Lec-White
Recommended layout: Grid - 3 columns desktop, 2 tablet, 1 phone
Recommended gap: 20px
Recommended max width: 1120px
Recommended padding: 40px desktop, 28px tablet, 22px phone
LEC Style Contact Blocks
Reusable contact patterns for helping members quickly find phone numbers, office information, payment contacts, address details, and support options.
Office Phone Block
Use this block when the main goal is to make the cooperative office phone number easy to find and easy to act on.
Lincoln Electric Cooperative Office
(406) 889-3301
Use this number for general office questions, account help, and member service support.
Pattern type: Office phone contact block
Recommended background: Lec-Background-Soft
Recommended card background: Lec-Background or Lec-White
Recommended link color: Lec-Link
Recommended use: General office phone, member service phone, department phone numbers
Recommended padding: 40px desktop, 28px tablet, 22px phone
Payment Phone Block
Use this block when the main goal is to help members quickly find the phone number for payments or billing-related questions.
Payment and Billing Support
(855) 940-3833
Use this number for billing questions, payment help, and account support.
Pattern type: Payment phone contact block
Recommended background: Lec-Background-Soft
Recommended card background: Lec-Background or Lec-White
Recommended link color: Lec-Link
Recommended use: Payment phone, billing support, account help, payment assistance
Recommended padding: 40px desktop, 28px tablet, 22px phone