Mass Timber Co. · Brand and website system
Bring us in early.
Mass Timber Co. designs, sources, and builds custom mountain homes with cross-laminated timber (CLT). The promise is one informed path from idea to enclosure: a structural system with the strength, precision, and warmth to remain part of the finished home.
This page is the working system for the website: position, voice, mark, color, type, image rules, and components. Colors, fonts, spacing, and the section stylesheet all live in Ollie global styles (Appearance > Editor > Styles). Every section on the site is also a synced pattern under the Mass Timber Co. category. Update global styles and this page updates with the site.
Position
Not a panel supplier. The firm in the room.
Mass Timber Co. sells judgment before it sells panels. The site makes the thinking visible: why the material, when to involve the firm, how the work sequences from feasibility to a weather-tight shell. Every page ends at one door, Start a Project.
Primary descriptors
- Mass-timber design-build firm
- Cross-laminated timber homes for the Mountain West
- Design, sourcing, coordination, installation
- Residential mass timber, Jackson Hole to Park City
Do not lead with
- “CLT supplier” or “panel company”
- “Luxury” or “premium” as the credential
- Green building as the whole story
- Generic “mountain modern” lifestyle imagery
- Timber-frame or log-home language
Voice
A builder who has done this before. An architect who cares how it looks.
Short sentences, specific nouns, no hype. Explain enough to make the next decision clear; leave the sales pitch out.
PRECISE
Use real nouns: panel, span, connection, shop drawing, crane day. Avoid vague “solutions” language.
CALM
Short sentences, no exclamation points. Confidence comes from sequence, not volume.
HONEST
Tell the trade-off: mass timber is powerful, not automatic. Say when it is not a fit.
WARM
Speak to the home, the light, the exposed wood. Structure is what people live inside.
COLLABORATIVE
Architects and builders are peers, not leads. “With your team,” never “for you.”
REGIONAL
Jackson Hole, Teton Valley, Sun Valley, Park City. Snow load, access, and altitude are ordinary facts here.
Words to own
Use freely
cross-laminated timber · mass timber · panel · span · exposed · enclosure · weather-tight · sequence · coordination · fit · early · precision · warmth · structure · mountain home
Use carefully
Only with a specific claim behind it
sustainable · carbon · innovative · engineered · efficient · faster · modern · timeless · craftsmanship
Avoid
Never on the site or in print
luxury · premium · solutions · cutting-edge · world-class · turnkey · dream home · rustic · cabin chic · elevated living · game-changing
Messaging
One line, one promise, one door.
Headline
Home hero
Mountain homes, engineered differently.
The line
Closes every page and every proposal
Bring us in early.
Alternates
Section openers and social
Built for the landscape. Made to last. · Structure you can feel. · Timber deserves better coordination. · One informed path from idea to enclosure.
Introduction
First paragraph on Home and About
We design, source, and build custom homes with cross-laminated timber, bringing architectural warmth, structural performance, and a more predictable path from concept to enclosure.
One-sentence bio
Directories, press, proposals
Mass Timber Co. is a Teton Valley design-build firm that delivers cross-laminated timber homes across the Mountain West, from feasibility and coordination through sourcing, installation, and enclosure.
Calls to action
Every button is a verb
Start a Project · Explore Our Work · Learn Why Mass Timber · See the Process · Tell Us About Your Project · Email Project Details
Brand filter
Ask before publishing
Does this help an owner, architect, or builder make a better decision earlier? If it only says the firm is impressive, cut it.
The mark
One shape: a timber house with CLT at its center.
The icon is a house form drawn from stacked timber with the CLT initials inside, Forest Green and Brand Orange on light surfaces, white on Ink and over photography. It reads at 16 pixels in a browser tab and at four feet on a banner. The TIMBER wordmark sits to its right in the horizontal lockup; the icon stands alone where space is tight or the background is busy. Always SVG on the web.
Full color on Paper. Header default state. Download SVG
White on Ink. Transparent header over hero images, footer, contact panel. Download SVG
Icon, full color. Favicon, social avatar, jobsite sign. Download SVG
Clear space
One roof height on all sides. Never smaller than 120px wide as a lockup or 24px as an icon.
Do not
Stretch, rotate, outline, add a drop shadow, or box the lockup. Do not recolor it to match a section: green and orange are the logo, Ochre is the site. Do not set the name in another typeface beside the mark. If the layout is tight, use the icon alone.
Color
Ochre acts. Ink carries. Cream breathes.
Sixteen named colors in Appearance > Editor > Styles > Colors. The first eleven fill Ollie’s standard slots, so every Ollie pattern picks up the brand automatically; the rest are brand extras. Pick them from the Theme swatches in any block; in CSS use the variable shown on each swatch.
Ochre
primary · #BB7A31
–wp–preset–color–primary
Brand. UI accent: kickers, step numbers, primary buttons, CTA bands.
Sand
primary-accent · #F1E5CC
–wp–preset–color–primary-accent
Brand Accent. Soft highlights, fit cards.
Forest Green
primary-alt · #1D4403
–wp–preset–color–primary-alt
Brand Alt. Logo color; secondary button style.
Cream
primary-alt-accent · #F4EFE5
–wp–preset–color–primary-alt-accent
Brand Alt Accent. Cream sections, light text on Ink.
Ink
main · #172B36
–wp–preset–color–main
Contrast. Headings, dark sections, dark buttons, split panels.
Cream on Ink
main-accent · #F4EFE5
–wp–preset–color–main-accent
Contrast Accent. Text on Ink.
White
base · #FFFFFF
–wp–preset–color–base
Base. Page background, default sections.
Body Text
secondary · #404C40
–wp–preset–color–secondary
Base Accent. Muted copy.
Paper
tertiary · #FBFAF6
–wp–preset–color–tertiary
Tint. Proof strip, path cards, alternate surface.
Light Gray
border-light · #E8E8E8
–wp–preset–color–border-light
Border Base. Form fields, dividers on white.
Ink Line
border-dark · #7A8489
–wp–preset–color–border-dark
Border Contrast. Heavier borders, disabled text.
Brand Orange
brand-orange · #FBB03B
–wp–preset–color–brand-orange
Logo only. Header CTA button.
Orange Hover
orange-hover · #FF8800
–wp–preset–color–orange-hover
Hover for the header CTA.
Ochre Text
ochre-text · #8B572A
–wp–preset–color–ochre-text
Ochre for small text (6:1 on white).
Site Background
site-background · #FFF6E5
–wp–preset–color–site-background
Reserved. Behind full-width sections on the old theme.
Off White
off-white · #F8F8F8
–wp–preset–color–off-white
Reserved. Alternate light surface.
Roles
One accent per section, never two
Ochre means act here: buttons, kicker ticks, step numbers, and the call-to-action band. Ink carries weight: hero overlays, the Why Mass Timber section, the split panel, the contact panel, and dark buttons. Cream and Paper are air: the proof strip, the process paths, the team note. White carries the rest. Brand Orange and Forest Green stay in the logo.
Contrast
Measured on the live pages
Ink on white 14.6:1 · Cream on Ink 12.8:1 · Ink on Ochre 5.1:1 · Ochre Text (#8B572A) on white 6.0:1 and on Cream 5.1:1. Small Ochre text alone is 3.5:1, so true Ochre is reserved for fills and rules, never for 12 to 16 pixel type.
Pairings
Text on background
Cream text on Ink
Ink text on Ochre
Ink text on Cream
Type
Bold geometric headline, plain body, room to breathe.
Outfit at 750 carries display and headings with tight leading and letter-spacing pulled in 4 to 5 percent. Helvetica carries body, leads, lists, and buttons at 16 to 19 pixels with lines held to about 66 characters. Every size is a clamp() in rem, so nothing jumps at a breakpoint and everything scales with browser zoom. Classes go in the block’s Additional CSS class field.
Typefaces
Headings: Outfit (self-hosted, Font Library). Body: Helvetica. Set in Appearance > Editor > Styles > Typography.
Outfit for every heading
Helvetica for body copy, leads, lists, and buttons.
Display
.mtc-display · H1 · clamp(46px, 7vw, 96px) · line-height .94 · tracking -.05em
Mountain homes, engineered differently.
Section heading
.mtc-h2 · H2 · clamp(38px, 5vw, 70px) · line-height 1 · tracking -.04em
Structure you can feel.
Card heading
.mtc-h3 · H3 · 23px · line-height 1.15
Architectural warmth
Large card heading
.mtc-h3 .mtc-h3–lg · clamp(28px, 3vw, 42px)
South Fork River Cabins
Pull quote
.mtc-pull · clamp(30px, 4vw, 50px) · Outfit 500
Mass timber is not a product you simply substitute into a conventional set of plans.
Lead
.mtc-lead · clamp(18px, 2vw, 23px) · line-height 1.55 · max-width 760px
Cross-laminated timber turns structure into architecture. Large, precisely fabricated panels create broad spans, warm interiors, and a faster path to a weather-tight shell.
Copy
.mtc-copy · 19px · line-height 1.7 · max-width 760px
Our role is flexible, but the sequence matters. The earlier we understand the design, site, team, and goals, the more value we can create.
Body
Global styles body · 16px · line-height 1.65
Default paragraph text inside cards, steps, and lists.
Kicker
.mtc-kicker · 12px · 750 · tracking .15em · uppercase
Why Mass Timber
Fluid scale
rem bounds, vw middle term
display · clamp(2.875rem, 7vw, 6rem)
h2 · clamp(2.375rem, 5vw, 4.375rem)
h3 large · clamp(1.75rem, 3vw, 2.625rem)
pull · clamp(1.875rem, 4vw, 3.125rem)
lead · clamp(1.125rem, 2vw, 1.4375rem)
copy · 1.1875rem · body 1rem · small 0.875rem · kicker 0.75rem
Meta
.mtc-meta · 12px · 750 · tracking .12em · uppercase · #8B572A
Number
.mtc-num · 12px · 800 · tracking .14em · Ochre
01 · DISCOVER
Small
.mtc-small · 14px
Serving Jackson Hole, Teton Valley, Sun Valley, Park City, and select projects across the Mountain West.
Imagery
Structure you can feel.
Photography shows the material doing its job: exposed panels, the grain up close, crane day, a finished room lit by the wood. Observed, not staged. No filters, no HDR skies, no drone shots for their own sake.
Lead with what the owner lives inside. Warm light on exposed wood, furniture in frame, people optional.
Panels arriving, connections, crane picks, the crew. This is the proof that the sequence is real.
The Mountain West as context, not backdrop. The building is always the subject; the range is never the whole frame.
Heroes
Cover block, full width
One photograph per hero, Ink gradient from the left so white type holds, content on the 1160px column. Home uses a wide exterior; inner pages use an interior or a detail.
Crops
4:3 for cards, 16:9 for bands
Crop for the structure, not the sky. Never crop a finished interior so the timber leaves the frame.
Credits
Metadata order
Project · location · type · role (design, sourcing, coordination, installation). Same order on Builds, on the deck, and in print.
Not this
Cut on sight
Stock lumber yards, generic timber-frame lodges, log homes, moody black-and-white “craftsman” portraits, drone flyovers with no building in them.
Components
Buttons.
Seven block styles on the core Button block (Styles panel in the sidebar). Square corners, 15px by 22px padding, 750 weight. Solid Ochre is the default call to action; Ink on Ochre bands; Outline White on photos and dark sections.
On light
is-style-mtc-ochre · -ink · -cream · -green · -outline-ochre · -outline-ink
Legacy classes
mtc-btn, mtc-btn–dark, mtc-btn–light, mtc-btn–ghost on the Buttons block (used on the six redesign pages)
Components
Buttons on dark.
On Ink
is-style-mtc-ochre · -cream · -outline-white · -outline-ochre
Spacing
Layout and spacing.
Site width
Ollie content size 1290px · section inner Group 1160px · 24px side gutters, 5vw plus gutter under 1290px, 15px under 782px
Full-width sections: outer Group, align Full, class mtc-section. Inner Group, Constrained, content size 1160px.
Section padding
.mtc-section · clamp(76px, 9vw, 132px) top and bottom
Hero padding
.mtc-section–hero · clamp(110px, 14vw, 190px) top, 90px bottom · Cover heroes 560 to 760px min-height
Transparent header sits over the hero, so hero padding includes the header height.
Grid gaps
2-up 34 to 42px · 3-up 28px · 4-up 28px · 5-up 24px · phase rows 34px
Set as Block Spacing on the Columns block. Grids collapse to 2-up between 782 and 1024px and 1-up below 782px.
Rhythm inside sections
Kicker 20px below · heading 26 to 28px below · lead 34px below · grid 56px above · button group 48px above when last
These margins are in the stylesheet; leave block margins at default.
Spacing
Section surfaces.
White
mtc-section (default)
Paper
mtc-section–paper
Cream
mtc-section–cream
Ink
mtc-section–dark
Ochre
mtc-section–ochre
Components
Patterns on light.
Section opener
kicker + mtc-h2 + mtc-lead
Selected Work
Built for the landscape.
Our projects pair precision-engineered timber with the character of the Mountain West.
Step
Column .mtc-step: mtc-num + H3 + paragraph, top rule
01
Assess
Clarify the site, team, goals, schedule, and whether mass timber is the right fit.
02
Design
Coordinate architecture, structure, connections, services, and exposed finishes early.
Project card
Column .mtc-project: Image 4:3 + mtc-meta + H3 + paragraph
South Fork River Cabins
Warm, durable cabin structures shaped by exposed timber.
Fit cards
Column .mtc-fit-card and .mtc-fit-card–other: H3 + List
Often a strong fit when…
- Exposed wood is central to the architecture.
- Early design coordination is possible.
May need a closer look when…
- Late field changes are likely.
- Crane access is severely limited.
Path card
Column .mtc-path on a Cream section: H3 + paragraph + List
For homeowners
You may have a property, an architect, a sketch, or simply a strong idea about exposed timber.
- System and site fit
- Budget and schedule drivers
Phase row
Columns .mtc-phase: 110px number column + 36% heading + text
01 · DISCOVER
Assess the fit
Review the site, program, design intent, schedule, and delivery constraints.
FAQ item
Details block .mtc-faq__item
Does mass timber cost more?
It depends on what is being compared. A useful comparison looks at the complete system, not panel price alone.
Note box
Group .mtc-note: H3 + paragraph
Before publication
Add approved biographies, roles, headshots, and credentials.
Components
Patterns on Ink.
Card
Column .mtc-card: H3 + paragraph, light top rule
Architectural warmth
Exposed timber brings finish, structure, and atmosphere together in one material.
Structural strength
Engineered panels provide a robust system for demanding mountain sites.
Diagram
Group .mtc-diagram with .mtc-layer rows
The Basic Idea
Wood Layer
Cross Layer
Wood Layer
Boards are bonded in alternating directions.
Contact panel
Group .mtc-panel with .mtc-panel__details
Contact
Tell us about your project.
Send the details you have.
Fletcher White
305-509-0332
Components
Call-to-action band.
Section .mtc-section–ochre: kicker, mtc-h2, mtc-lead, one Ink button.
Proof strip
Section .mtc-section–proof on Paper
Three uppercase columns · 30px padding
Guardrails
What keeps this from becoming another mountain-modern builder.
Finish is quiet: one light source from the top left, layered hue-matched shadows, embossed rules, bevelled buttons, and paper grain on warm surfaces. Motion is short and optional and stops for visitors who prefer reduced motion. Focus is an Ochre ring on every interactive element.
Do
- Explain the sequence before the sales pitch.
- Say when mass timber is not the right fit.
- Show exposed timber in finished rooms, not just on the crane.
- Name real places, spans, and constraints.
- End every page at Start a Project.
- Copy a section from this guide instead of styling a new one.
- Keep Ochre for action only.
Do not
- Call it luxury, premium, or a dream home.
- Use log-home or timber-frame imagery or language.
- Put mountains in every asset.
- Add a second accent color to a section.
- Round a corner, add a gradient button, or drop a shadow on the logo.
- Ship a page with more than one H1 or with alt text missing.
- Let the site feel like a supplier catalog.
Files: Ollie global styles (Appearance > Editor > Styles: 16 colors, Outfit and Helvetica, fluid type and spacing, section CSS) · patterns in Appearance > Editor > Patterns > Mass Timber Co. · button styles in Code Snippets 17 · logo SVGs media 385, 387, 487 · logo kit at logopackage.app · Outfit self-hosted in the Font Library.