The LFW brand
Brand guidelines.
Our brand is how people feel about working with us. These guidelines connect that experience to how we communicate, design, and deliver.
Mission-critical
web operations.
01 · Experience
How working with LFW should feel.
Every conversation, proposal, request, and delivery shapes the brand. These are the feelings our work should earn.
In capable hands.
Make it clear who is responsible and what happens next. Show the work, explain decisions plainly, and give people a record they can share with their own team.
Taken seriously.
Welcome ambitious ideas and basic questions. Explore how a request could work, explain the options and tradeoffs, and follow through on what we agree to do.
Free to get on with your day.
Make asking for help easy, including from a phone. Keep status and next steps visible. Explain scope and costs clearly so people can make decisions with confidence.
Before publishing a page, sending a message, or shipping a feature, ask: does this make someone feel informed, respected, and supported?
02 · Identity
An unmistakable name.
Web development and ongoing support
lfw.com/brand leland@lfw.com
- The name
- Always LFW. Display a standalone website address as LFW.com.
- URLs & email
- URLs and email addresses can use lowercase when the LFW name or wordmark appears nearby, as in the example here.
- The wordmark
- Use the established serif letterforms. Keep their proportions, give the mark clear space, and choose a high-contrast background.
- The company
- Use LFW.com LLC d/b/a LFW where the legal entity belongs, including the copyright line.
03 · Typography
Serif, sans, and mono.
Source Serif 4 gives headings their character. Public Sans handles everyday reading and interaction. Monospace gives references, dates, measurements, and compact labels a distinct role.
Source Serif 4
Display cut, weight 600: prominent headings and the website wordmark. The text cut supports smaller serif text and document typography.
Public Sans
The default for body copy, navigation, section eyebrows, form labels, and buttons. Use weights 400 through 700 to establish emphasis.
Base website styles, shown using the same classes as the site. Page layouts can adapt the scale to fit their context.
- Large headingSource Serif Display · 600
40–68px · line height 1.06 - There is no lift too heavy.
- Section headingSource Serif Display · 600
30–46px · line height 1.12 - How we can help.
- Card headingSource Serif Display · 600
22px · line height 1.25 - Website management
- Default eyebrowPublic Sans · 700
13px · uppercase · tracking 0.16em The person and the work
Use Public Sans for main section labels. Smaller data and component labels can use monospace.
- Body copyPublic Sans · 400
17px · line height 1.65 - Send a request from your phone, attach a screenshot, and get back to your day. Your team can follow the conversation in the client portal.
- MonospaceSystem font stack
References, dates, measurements, code - LFW-042 · 09:30
Use for request IDs, timestamps, numbered steps, metrics, code, and compact labels. It helps distinguish supporting details from the main reading text.
Source Serif 4 and Public Sans are served from LFW.com. Monospace uses the device’s available fonts: ui-monospace, SF Mono, Cascadia Mono, Menlo, Consolas, then the generic monospace fallback. Its appearance can vary by device.
Headings use sentence case; uppercase is reserved for short labels and the LFW name.
04 · Color
LFW blue. Room to breathe.
Lead with white, clear typography, and one blue accent. Use blue for primary actions and deliberate brand moments, including our blue business card.
LFW blue
#1849B8Primary actions and brand accents.
White
#FFFFFFThe primary page and app background.
Light gray
#F6F7F9Subtle grouping and alternating sections.
Near black
#17191EHeadings and primary text.
Charcoal
#141619Selected dark sections.
- Blue hover
#123A96- Links on dark
#8FB0FF- Body text
#3A3F4A- Secondary text on light
#6A7080- Dividers
#E5E6E9- Form boundaries
#858B98- Footer background
#0F1114- Status on light
#0E7D57- Status on dark
#3FBE8A
Green communicates measurements or status, paired with a text label. Fine dividers separate content; form boundaries use a stronger gray so controls are easy to identify.
05 · Components
Familiar details, everywhere.
The marketing site and client portal share the same fonts, blue, and approach to spacing. The portal puts requests and everyday tasks first.
One clear primary action
Use a filled blue button for the main next step and a quieter text link alongside it. Keep corner radii small and allow room for a 44px minimum touch target.
Links that explain where they go
A right arrow leads onward; a down arrow points farther down the page. External links use the Lucide external-link icon and an accessible notice. Underline the label, with space before the icon.
Space belongs inside the card
Give every card consistent interior padding, including the first and last. Use alignment and whitespace to organize the page.
Design for a phone first
Stack content naturally, keep text readable, and show mobile screenshots on mobile. A request should be easy to send on the go.
Make interaction visible
Keep keyboard focus easy to see, communicate states with text as well as color, and respect reduced-motion preferences.
06 · Voice & imagery
Sound like the people doing the work.
- Positioning
- Mission-critical web operations.
- The relationship
- Your web agency of record.
- The attitude
- There is no lift too heavy.
Be direct about what we do, what it costs, and what happens next. “Web development and ongoing support” is a useful, literal description of the work.
Take ambitious requests seriously. Be candid about the tools we use, including AI, and honest about scope and tradeoffs. A little humor belongs where it feels personal.
