Share this page with designers, developers, and vendors who need access to our brand assets, colors, typography, and UI components.
Use the full horizontal logo wherever possible. The icon-only mark is for small spaces like favicons, app icons, and social avatars. Always maintain clear space around the logo equal to the height of the “D” letterform.
Our palette is built around deep Pacific Northwest water tones. The dark backgrounds create depth, teal provides trust and credibility, lime drives energy and attention, and peach adds warmth.
Urbanist is our sole typeface. A geometric sans-serif with excellent weight range — from thin captions to heavy 900-weight display headlines. We use negative letter-spacing on display sizes, and a slight positive tracking on body text.
Built for Growth
Four variants, three sizes. Primary is the main CTA — use sparingly, one per visible section. Secondary is for supporting actions. Accent draws attention with the lime palette. Ghost is for low-priority or nested actions.
Badges mark categories, statuses, and tags. The section label (used in the global
.section-label class) is
the all-caps eyebrow above headings throughout the site.
Three card types. Clickable cards grow upward and reveal a teal top-line accent on hover. Featured cards have a persistent lime top-line and teal glow. Subtle cards are for nested or secondary information with a lighter background.
This card is interactive. Hover to see the lift effect and teal top-line. Use for navigable items.
Explore →Static display of information. No hover interaction. Use for stats, testimonials, or feature lists.
Highlighted with lime top-line and teal background glow. Use to promote a primary offering or recommended option.
Learn More →Glassmorphism card used to showcase client work. Desktop: image overlay with 3D hover reveal at 4:3 aspect ratio. Mobile: stacked layout with expandable "About" accordion.
Built on the SmartSite package with a focus on local SEO, mobile-first design, and clear calls to action for quote requests.
View Full SiteBuilt on the SmartSite package with a focus on local SEO, mobile-first design, and clear calls to action for quote requests.
Consistent icon containers used in cards and feature lists. Three sizes, four color variants. Always pair with a font emoji or SVG icon inside.
Underline-style CTA links used at the bottom of cards and sections. The gap between text and arrow animates on hover to suggest forward movement.
All form elements share the same dark background, border, and focus ring system.
Always wrap each field in .field-group with a
.field-label.
The river divider is used between major page sections to create visual flow. Glow blobs and the grid background add atmospheric depth to dark sections.
