Design Playbook
This playbook documents how HTW design work is actually run across the year: website design and seasonal homepage updates, brand kit governance, annual design kit production, and social sharing/OG image operations.
It is the operating reference for what gets designed, when it gets refreshed, and which assets are maintained in code versus design tools.
Here are the following major design assets. They include the website (dynamic), brand kit (constant), and the HTW Annual Design Kit (dynamic).
Website Design
Website design is ongoing work across the full year, not just a one-time annual task.
Design system and references
- HTW Design System (visual reference): /htw-design-system.html
- Source docs in repo:
DESIGN_SYSTEM.mddocs/design-tokens.jsondocs/homepage-phase-management.mddocs/reference/content-guidelines.md
Annual website design refresh (Jan-Feb)
- Run a full visual/design pass on key pages: homepage, calendar, host event, reports, handbook, and brand-kit pages.
- Confirm typography, spacing, color, and CTA patterns still match the current design system.
- Refresh key visual assets from prior year (hero imagery, thumbnails, sponsor/logo treatments, section artwork).
- Identify reusable UI improvements and implement directly in code (components/tokens), not one-off page patches.
Seasonal homepage updates (4 phases per year)
Use the phase model in docs/homepage-phase-management.md:
- Phase 1 (Jan-Mar): planning + event host recruitment
- Phase 2 (Apr-Jun): early access + momentum
- Phase 3 (Jul-Sep): countdown + event week push
- Phase 4 (Oct-Dec): post-event + gratitude + reset
For each phase transition:
- Update visible/hidden sections
- Update copy, deadlines, and CTA links
- Swap/refresh images as needed
- QA on mobile (375px) and desktop (1440px) before publish
Recurring website design tasks (outside the annual design kit)
- Homepage visual updates (hero, section imagery, CTA treatment)
- Event/speaker/sponsor image normalization and replacements
- Year-specific report page visuals and social previews
- Brand kit website updates (public + internal)
- New page or section design support for campaigns/partnerships
- Ongoing design QA for accessibility and responsive consistency
Brand Kit
Here is the HTW Brand & Design Kit.
The website Brand Kit has assets that can be used by media, event hosts, etc. It should have all the assets from the Brand Kit plus additional ones like photos, etc. The website should be the master record.
The website has a Brand Kit Internal which is not indexed and used for me to generate public facing assets. It includes our logos, color scheme, and other key assets.
HTW YYYY - Design Kit (Annual Design Kit)
The HTW Annual Design Kit is currently in Canva. We are potentially moving to Figma, where we have a baseline framework.
Here are the past design kits:
- HTW 2024 - Design Kit (some assets may be missing)
- HTW 2025 - Design Kit (some assets may be missing)
- HTW 2026 - Design Kit (in process of updating)
Every year in October, make a copy of the past years "HTW YYYY - Design Kit", and update the name of the project / design. Then, update all of the dates within the designs, e.g. change 2026 → 2027.
Here are the specific things we need to update every year. Please update the list below if there is something present that is not noted below. We also include specific, more marketing style assets, in other folders that we may want to consolidate.
- Social Sharing Preview / Thumbnail Graphic
- Year_Website e.g. HTW 2026
- Website Default for all years i.e. recurring pages not tied to years e.g. Brand Kit
- Website Year Report e.g. HTW 2026 Report
- Website other specific pages that require custom thumbnails.
- Calendar and / or Luma calendar social sharing preview image
- Ambassador / Images
- Intake
- Normalization
- Output → Goes into Canva folder in year, Google Drive, and HTW website folder
- Announcement / Social Graphic
- General Flyers / Social Graphic
- HTW Countdown / Social Graphics
- Social Hero / Header Graphics
- Luma
- Luma Sharing Preview
- Linktree
- Website
- Youtube
- Sponsor / Logo Images
- Intake
- Normalization
- Output → Goes into Canva folder in year, Google Drive, and HTW website folder
- Sponsor / Email Band
- Sponsor / Social Graphic - Group
- Sponsor / Social Graphic - Individual
- Event Host / Logos
- Intake
- Normalization
- Output → Goes into Canva folder in year, Google Drive, and HTW website folder
- Event / Social Graphic
- Event / Backdrops
- Event / Template for Event Hosts
- Speaker / Images (4x5)
- Intake
- Normalization
- Output → Goes into Canva folder in year, Google Drive, and HTW website folder
- Speaker / Social Graphic - Individual
- Testimonial / Social Graphic
- Video / Thumbnails
- Preview Reel
- Preview Video
- Recap Reel
- Recap Video
- Individual Panel Recordings
- Annual Report / Charts
- Contains things like charts and other data we've historically compiled
Specific Processes
Logo Calibration
- Collect all logos from sponsors - this should be done via onboarding.
- Place into 200x80px Canva design e.g. HTW 2025 Sponsor Logos
- Ensure 10px margin on all sizes
- First create color version
- You can do various size % modifications for those more wide or long. The ultimate test is the eyeball.
- Once color version is done, make the white transparent version
- Download all with "no background setting"
- Place into Sponsors folder, plus website folder for hosting
Image Calibration e.g. speakers
- Collect all images from speakers and other parties
- Place into 800x100px Canva design with set margins
- Center appropriately
- Make a copy and do remove BG
- Make a copy and add to a colored background e.g. dark blue
- The end result should be 3 speaker images
- Naming convention: 20YY_fname_lname
- Place into Sponsors folder, website for hosting, update JSON
Social Sharing / OG Images
Guidelines for ensuring HTW links display correctly when shared on social platforms. When sharing HTW links (e.g., homepage, event pages), platforms like Facebook, LinkedIn, and Twitter pull Open Graph (OG) images for the preview.
OG Image Specs
| Attribute | Requirement |
|---|---|
| Format | PNG or JPEG only — AVIF and WebP are not supported by most platforms |
| Dimensions | 1200 × 630 px |
| File Size | Under 300KB |
Content: HTW logo, year, event dates, and tagline ("Where Tech Meets Hawaii") should be clearly visible, with a 60px margin from edges for platform cropping.
Annual Update Checklist
This checklist reflects what we actually do across the year.
Yearly reset (Dec-Jan)
- Create the new year OG image set (homepage, report, and key evergreen pages)
- Update year-specific metadata and sharing assets
- Update annual report page visuals and associated thumbnails
- Start the annual website design refresh pass for key pages
Phase transitions (4x per year)
- Apply homepage phase visibility updates per
docs/homepage-phase-management.md - Update phase-specific messaging, dates, and CTA destinations
- Refresh seasonal imagery and section-level design details
- Run responsive QA (mobile + desktop) before launch
Monthly / ongoing operations
- Update speaker, event host, and sponsor visual assets as new data arrives
- Keep brand-kit website assets current (public + internal pages)
- Create/update campaign-specific graphics used on website pages
- Validate social preview behavior for major launches
OG and link preview QA (before major campaigns)
- Test key URLs in Facebook Sharing Debugger
- Test key URLs in LinkedIn Post Inspector
- Test key URLs in Twitter Card Validator
- Re-scrape/refresh cached previews after asset or metadata updates
Testing Shared Links
Before a campaign, paste your link into:
Click "Scrape Again" or "Inspect" to refresh cached images after updates.
Parking Lot
- Our ideal state is to have a workflow that intakes logos, cleans them up, and places them into the necessary folders on the website, Google Drive, and maybe even Canva (if we can replace the manual process in Canva)
- Create HTW bio pop generators