service · Phase 15
hero.title
A roofing contractor that proves service is more than booking: problem photos, an estimate, a site visit and a job that is tracked to completion.
Visual direction
Professional roofing contractor.
- White
- Stone
- Slate
- Navy
- Warm neutral
Should not look like a normal appointment-booking website. It should communicate contractor workflows: property, problem, photos, contact, inspection, site visit, job.
- Service
- Property
- Problem
- Photos
- Contact
- Inspection
- Job
The experience itself is not built yet. What you are looking at is the foundation proving it out: the business configuration, the feature set it turns on, the vocabulary it uses, and the theme applied to this route. A roofing homeowner is called that here, and only here. This page is served in EN, one of the 2 locales this business supports.
Enabled capabilities
33 features this business turns on. Anything absent is never rendered.
- Catalog
- Services
- Commerce
- DepositsFinancingPayments
- Scheduling
- BookingsAvailabilityCalendar
- Resources
- StaffVehicles
- Operations
- QuotesSite visitsPhoto uploadsDocumentsContractsTechniciansEmergency serviceSame-day slotsJob trackingMaintenanceReferralsSurveys
- Account
- ReviewsAuthAccountAddressesProfileNotificationsMessaging
- Content
- StoryTeamFAQNeighborhoodsGuides
Vocabulary
The shared foundation, relabelled. Each row shows the shared default and what this business calls it instead.
- Customer
- Homeowner
- Service
- Job
- Services
- Jobs
- Quote
- Estimate
- Quotes
- Estimates
- Visit
- Inspection
- Booking
- Site visit
Design tokens
light mode. This page is already rendering in the business palette.
Mode
- mode
- light
- domain
- Services
Colors
background
surface
surfaceAlt
border
textMuted
text
primary
secondary
accent
- background
- #f7f7f6
- surface
- #ffffff
- surfaceAlt
- #ececea
- border
- #D4D4D4
- textMuted
- #616b74
- text
- #1c2126
- primary
- #2b3a4d
- secondary
- #6b7783
- accent
- #1f4e79
Typography
- stack
- precision
- display
- spaceGrotesk
- heading
- ibmPlexSans
- body
- ibmPlexSans
- label
- ibmPlexSans
Spacing, radius, imagery, motion
- space.section
- 5rem
- space.gutter
- 1.25rem
- radius.card
- 0.375rem
- radius.control
- 0.25rem
- imagery.ratio
- 16/9
- imagery.treatment
- natural
- motion.duration
- 160ms
- shadow.card
- inherited