Salish Hawk Studios
Crafting High-Conversion UI/UX for Wellness & AI Platforms
Salish Fleet — Heavy Equipment Maintenance & Offline PWA
Project Overview: A mobile-first, offline-capable Progressive Web App (PWA) designed for heavy equipment yards, excavation crews, and local contractors to log pre-start safety checklists, track engine hours, and manage maintenance work orders.
The Problem: Traditional CMMS platforms are bloated, expensive, and charge per-seat fees that penalize trade businesses for adding operators. Furthermore, crews working on remote job sites frequently lose cellular connection, causing standard web apps to fail.
The Solution: Engineered a robust offline-first architecture using Next.js, Tailwind CSS, Supabase (PostgreSQL), and Dexie (IndexedDB). If an operator's internet connection drops in the field, inspection logs and maintenance requests are safely captured locally and automatically synced when reconnected.
Key Features:
Dark industrial UI designed for mobile and tablet use on job sites.
Offline-first pre-start safety inspections with instantaneous fallback caching.
Live fleet readiness metrics, status filters, and instant PDF compliance report exports.
Flat-rate utility model tailored for independent local contractors.
Tech Stack: Next.js, React, Tailwind CSS, Supabase, Dexie.js (IndexedDB), Vercel.
0
3
Case Study: Decibel 12 (db12fans.com (http://db12fans.com))
Building the Ultimate Digital Home for Seattle Seahawks Fan Culture
Executive Summary
Decibel 12 is an independent, high-performance web platform designed specifically for Seattle Seahawks supporters ("12s"). Built to bridge the gap between stadium energy, community identity, and modern interactive web features, the platform combines real-time game-day tracking, interactive AI score predictions, custom Coast Salish-inspired superfan character branding, and community-driven content vaults.
The Challenge
Seattle Seahawks fans are globally recognized for setting world-record decibel levels, yet fan engagement tools are often fragmented across generic social media platforms, temporary group chats, and outdated forums.
The primary objectives for Decibel 12 were:
Establish an Authentic Digital Identity: Root the design language in authentic Pacific Northwest and Coast Salish artistic geometry rather than generic sports templates.
Streamline Game-Day Utility: Create a centralized hub for local watch spots, tailgate directories, and live countdowns ahead of the season opener.
Engage Community-Driven Content: Build secure, moderated photo vaults and interactive recognition systems (Fan & Pet of the Week, Hall of Fame) without relying on cluttered ad networks.
Deliver Fast, Frictionless Auth: Implement seamless passwordless authentication (Magic Links) that feel modern and trustworthy.
Key Features & Platform Architecture
1. Game Day Hub & Countdown Engine
Real-time countdown clock synced to kickoff schedules.
Interactive directory featuring local PNW sportsbooks, SODO tailgate basecamps, and partner venues (Touchdown's Sports Bar, Hatback Bar & Grille).
2. 12s Game Day Photo Vault & Moderation
Community image repository for tailgates, custom outfits, and fan pets.
Tech: Client-side NSFWJS filtering (TensorFlow.js) for automated pre-upload image moderation, backed by Supabase Storage and dynamic likes counter triggers.
3. Fan Authorities & Hall of Fame
Dedicated tribute section honoring iconic superfans and community legends (Patti "Mama Blue" Hammond, Lorin "Big Lo" Sandretzky, Save Our Seahawks, Blue Thunder Drumline).
Integrated community support features to drive awareness and fundraising for local fan figures facing medical recovery.
4. Interactive Engagement: "12s vs. The Machine AI"
Weekly score prediction module allowing fans to lock in game outcomes and compare football IQ against predictive analytics models on the "Wall of Sound" leaderboard.
5. Superfan Character Branding Services
Dedicated portal ("Build Your Superfan Identity") connecting fans with custom character design, gear sculpting, and formline artwork concepting for stadium outfits.
Tech Stack & Execution
Domain Technology / Tool Frontend Framework Next.js / React / TypeScript / Tailwind CSS Backend & Storage Supabase (PostgreSQL, Realtime Auth, Storage Buckets) Email Delivery Resend (Authenticated Custom SMTP Domain) Image Moderation NSFWJS / TensorFlow.js Content Production CapCut Desktop / Envato Elements / Rive Deployment Vercel
Results & Impact
Launch Readiness: Fully deployed ahead of the season opener against New England, complete with an automated multi-channel social media launch kit.
Brand Integrity: Custom Coast Salish formline artwork and action-green visual identity created a distinct platform identity recognized across local fan networks.
Zero-Friction Onboarding: Fully branded email delivery via custom Resend SMTP routing, eliminating spam flags and delivering single-click magic link logins.
2
0
43
Kickoff Express: Game-Day QR Ordering PWA
0
0
Build a serene, low-stimulation web application layout for a somatic education and chronic pain relief practice named "Sound Somatics".
Design System & Visual Direction:
Atmosphere: Calm, low-fatigue, organic visual environment designed for users suffering from nervous system overload and chronic pain.
Color Palette: Warm parchment background (#F7F5EE), soft cream card containers (#FAF8F5), deep slate serif typography (#22252A), and muted terracotta accent buttons (#D4A373).
Typography: High-contrast yet soft serif headline font (e.g., Playfair Display or Cormorant) paired with a clean, highly legible sans-serif body font.
Spatial Layout: Generous whitespace, soft rounded corners (16px to 24px border radius), and zero harsh contrast boundaries.
Component Architecture:
Minimal Navigation Header:
Left: Wordmark "Sound Somatics" with a subtle warm dot indicator.
Right: Minimal text link "Book a session".
Editorial Hero Section:
Pill Badge: "HANNA SOMATIC EDUCATION" in muted beige text inside a soft container.
Main Headline: "Restore Movement. Release Chronic Pain." (Large serif display font).
Subheadline: "Gentle Hanna Somatic Education designed to re-educate your nervous system and release deep holding patterns."
Primary CTA: Terracotta pill button reading "Explore Somatic Sessions".
Hero Asset: Rounded image container featuring warm, earthy studio photography (ceramic cup, natural stone, textured linen).
Interactive Session Accordion ("A quiet path back to ease"):
Section Title: "A quiet path back to ease" with subtext "Every session meets you where you are. Explore the ways we can work together."
Expandable Cards: • "Hanna Somatic Movement" (Subhead: Sensorimotor re-education for stiff joints and posture) • "Chronic Tension & Pain Release" (Subhead: Targeting back pain, neck stiffness, and stress patterns) • "Clinical Somatic Sessions" (Subhead: 1-on-1 personalized somatic movement education)
Behavior: Smooth tap/click interaction showing a plus icon (+) when collapsed and a subtle close icon (×) when expanded, revealing detailed session description copy inside a soft cream panel.
Gentle Intake Form ("Begin Gently"):
Section Header: "Begin gently" with subtext "Share a little about yourself and we'll find a calm time to begin. No pressure, no rush."
Card Layout: Clean, centered white/cream card with soft borders.
Input Fields: Soft rounded input fields with generous padding: • Name (Placeholder: "Your name") • Email (Placeholder: "you@example.com (mailto:you@example.com)") • What would you like to release? (Optional multi-line textarea with placeholder: "A few words about what's holding you...")
Submit Button: Full-width terracotta button reading "Book my session".
Minimal Footer:
Centered brand title "Sound Somatics" with sub-tagline "Hanna Somatic Education & Chronic Tension Relief".
1
75