Lumberock

Style guide · Composite decking & outdoor construction

Download CSS
01

Color palette

CTA

#FF9029
#F57600

CTA

Line Colors

#0E2047
#163372

primary

#086D5F
#0B9D88

secondary

#365868
#47748A

tertiary

Base

#F9FAFA
#DDE3E3

light

#192434
#2A3C56

dark

02

Headings

Heading One
Otilito Sans · 700 · fluid · calc((base × 1.6) + 2.1vw)

Heading One

Heading Two
Otilito Sans · 700 · fluid · calc((base × 1.3) + 1.4vw)

Heading Two

Heading Three
Otilito Sans · 700 · fluid · calc((base × 1.05) + 0.9vw)

Heading Three

Heading Four
Otilito Sans · 700 · fluid · calc((base × 0.9) + 0.5vw)

Heading Four

Heading Five
Otilito Sans · 700 · fluid · calc((base × 0.8) + 0.3vw)
Heading Five
Heading Six
Otilito Sans · 700 · fluid · calc((base × 0.7) + 0.15vw)
Heading Six
03

Body copy

Extra Small
Barlow Semi Condensed · 400 · fluid · calc((base × 0.875) + 0.05vw)
The quick brown fox
Small
Barlow Semi Condensed · 400 · fluid · calc(base + 0.08vw)
The quick brown fox
Medium
Barlow Semi Condensed · 400 · fluid · calc((base × 1.125) + 0.15vw)
The quick brown fox
Large
Barlow Semi Condensed · 400 · fluid · calc((base × 1.375) + 0.25vw)
The quick brown fox
2XL
Barlow Semi Condensed · 400 · fluid · calc((base × 1.65) + 0.4vw)
The quick brown fox
04

Buttons

05

Block samples

Hero

A confident headline that sets the tone

Two sentences that introduce the business and make the reader want to learn more. Keep it direct, benefit-oriented, and human.

Image hero (full-width, 50/50 split)
Featured product

New collection

Built to outlast the elements

Composite decking that stands up to salt, sun, and seasons of foot traffic — backed by a ten-year warranty and zero upkeep.

Image columns

Precision engineering

Built for studios that need repeatable, pixel-accurate results on every run.

Production ready

Configurable workflows that scale from one-off prototypes to full production batches.

Supported by experts

Direct access to a team that knows your equipment and your workflow inside out.

Stats

12k+

Projects shipped

98%

Customer satisfaction

24/7

Expert support

15yr

Industry experience

Feature grid

Built for precision

Engineered from the ground up to deliver repeatable, pixel-accurate results.

Ready to scale

Grows with your workflow — from a single project to full production runs.

Rock-solid reliability

Proven in the field, tested against the edge cases you actually encounter.

Fully supported

A dedicated team answers fast and knows your setup inside and out.

Designed to last

Quality materials and thoughtful details mean less maintenance over time.

Backed by experience

Built by people who have solved this problem a hundred times before.

Split 50/50

Trusted by teams everywhere

A heading that anchors the section

A short supporting paragraph introduces the idea and gives the reader enough context to keep reading. Two or three sentences is plenty. Keep it focused on a single benefit, then let the list below do the heavy lifting.

  • Clear benefit or feature one
  • Clear benefit or feature two
  • Clear benefit or feature three
  • Clear benefit or feature four
Logo strip

Trusted by teams everywhere

ACME CO.
NORTHWIND
STUDIO 9
UMBRA
VERITAS
HELIX
Large testimonial

Working with this team fundamentally changed how we ship. Everything moved faster, the quality jumped overnight, and our customers noticed the difference within the first week.

Sam Okafor
VP of Operations, Lumen Labs
Testimonial cards

They moved fast, understood our brand, and delivered something we are genuinely proud of.

Jamie Rivera

Marketing Director

The attention to detail is unmatched. Every handoff felt polished and thought-through.

Morgan Chen

Founder

A true partner. They pushed back when it mattered and shipped ahead of schedule.

Alex Patel

Head of Product

Document downloads
PDF

Installation Guide

Step-by-step instructions for first-time installations, including tools and substrate prep.

Download
DOC

Warranty Terms

Full ten-year warranty coverage, claim process, and exclusions.

Download
XLS

Material Calculator

Estimate board feet, fasteners, and joist spacing for any deck footprint.

Download
PDF

Color Chart

Printable swatch reference covering all twelve standard finishes.

Download
PDF

Product Spec Sheet

Dimensions, load ratings, and compliance certifications for every profile.

Download
FILE

CAD Drawings

DWG files for railing, stair, and border detail integrations.

Download
FAQ accordion
How long does a typical project take?

Most engagements run four to six weeks from kickoff to launch. We scope timelines during our first call based on the complexity of the work.

What is included in your pricing?

Everything from strategy and design through development, launch, and a thirty-day support window. There are no hidden fees or surprise line items.

Do you work with clients outside the US?

Yes. We collaborate with teams worldwide and schedule working sessions across time zones to keep momentum.

Icon feature row
Unmatched durability

Resistant to wear, weather, and time.

Low maintenance

No staining, painting, or sealing — ever.

Marine grade

Withstands the harshest marine conditions.

Color that lasts

Fade-resistant pigments baked through.

Process steps
Plan & design

We scope the project, confirm fit, and map the build.

Gather materials

Everything arrives on-site, spec-matched and ready.

Build with care

Craftsmanship you can see in every joint and edge.

Final walk-through

We hand off only when the work meets our standard.

Image with content overlay (image left)
Feature visual

Ready for a new deck?

A landscape hero image anchors the page, while a content card floats over the edge to draw the eye into your call-to-action.

Image with content overlay (content left)
Feature visual

Same block, other side

A single .content-left class swaps the image and content columns without any other markup changes.

Center content (with overhang image)

Built for the way you live

The kind of quality you feel the first time you touch it and the hundredth time you walk across it. Ten-year warranty, zero upkeep, and color that doesn’t quit.

Thin CTA bar

Here is the main headline to draw attention

Some extra text to drive home the point

Large CTA

Ready to bring this to life?

Talk to us about your next project and find out how fast we can move from kickoff to launch. We’ll walk you through scope, timeline, and pricing in a single call.

Image wall
Team

Leadership

Sarah Mitchell
Founder & CEO

Sarah founded the company on a simple idea: do excellent work for people you respect. Two decades later, she still spends most of her time with clients and the team. Her north star is making sure every project we ship is something we are proud to put our name on.

David Reyes
Chief Operating Officer

David keeps the trains running and the budgets honest. He has spent his career turning complex operations into calm, predictable workflows. When something goes wrong, he is the first one in the room and the last one to leave.

Marcus Johnson
Chief Technology Officer

Marcus leads the technology side of the business with a builder’s mindset and a long memory for what works. He believes the best systems are the ones nobody has to think about. He spends his off hours tinkering with hardware and mentoring early-career engineers.

Mei Tanaka
VP of Strategy

Mei translates ambition into a plan and a plan into shipped work. She has guided dozens of brand and product launches across multiple industries. Her favorite question is the one that reframes a problem entirely.

Build Team

Diego Vargas
Senior Project Manager

Diego runs the hardest projects on the board and somehow makes it look easy. Clients love him for the weekly clarity he brings; the team loves him for never letting anyone get blocked. He is happiest when the schedule, scope, and team are all moving in the same direction.

Hannah Brooks
Account Coordinator

Hannah is the first friendly face most clients meet and the steady hand keeping each engagement on track. She has a knack for translating ambiguous requests into clear next steps. Nothing slips through the cracks on her watch.

Tom Whitaker
Lead Developer

Tom writes the kind of code other developers want to read. He cares as much about the team that maintains it as the user who experiences it. Give him a hard problem and a quiet afternoon and he will return with three good options.

Imani Carter
Creative Director

Imani sets the visual and narrative direction of every project we ship. Her work is grounded in research and sharpened by taste. She believes great design earns trust before it asks for attention.

Owen Murphy
Production Specialist

Owen is the craftsman who turns finished designs into finished work. He sweats the details that most people will never consciously notice but always feel. If something looks off by a pixel, he will spot it before the client does.

Priya Shah
Operations Lead

Priya keeps the team’s tools, templates, and processes in sharp shape. She is the person who notices the small inefficiency in week one and has it fixed by week two. Her work compounds quietly across every project we run.

Kenji Park
Quality Manager

Kenji is our last line of defense before anything ships. He approaches every deliverable like a fresh user and a careful editor. The bar he holds is the bar the rest of us reach for.

Sofia Delgado
Client Services Manager

Sofia keeps long-term client relationships warm, honest, and productive. She has a gift for turning post-launch conversations into next-chapter strategy. When a client renews, it is usually because Sofia made it easy to say yes.

06

Icons (48)

checkcheck
xmarkxmark
plusplus
minusminus
arrow-rightarrow-right
arrow-leftarrow-left
arrow-uparrow-up
arrow-downarrow-down
chevron-rightchevron-right
chevron-downchevron-down
barsbars
magnifying-glassmagnifying-glass
envelopeenvelope
phonephone
location-dotlocation-dot
calendarcalendar
clockclock
useruser
angleangle
angle-90angle-90
arrow-up-from-ground-waterarrow-up-from-ground-water
axeaxe
blockblock
block-brickblock-brick
bore-holebore-hole
brushbrush
bucketbucket
bulldozerbulldozer
compass-draftingcompass-drafting
dumpsterdumpster
dumpster-firedumpster-fire
excavatorexcavator
forkliftforklift
frameframe
grategrate
grate-dropletgrate-droplet
hammerhammer
hammer-brushhammer-brush
hammer-crashhammer-crash
helmet-safetyhelmet-safety
hosehose
hose-reelhose-reel
moundmound
paint-rollerpaint-roller
pen-rulerpen-ruler
pencilpencil
person-diggingperson-digging
reelreel
07

Form elements

08

Spacing scale

--space-1010px
--space-2020px
--space-3030px
--space-4040px
--space-5050px
--space-6060px
--space-7070px
--space-8080px
--space-9090px
--space-100100px
09

Shadows

--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl