Skip to content

Apply ShipStation brand guidelines to connect documentation site#178

Open
TymoteuszDuzynski wants to merge 1 commit into
mainfrom
tduzynski/gold-24514_connect-documentation-update
Open

Apply ShipStation brand guidelines to connect documentation site#178
TymoteuszDuzynski wants to merge 1 commit into
mainfrom
tduzynski/gold-24514_connect-documentation-update

Conversation

@TymoteuszDuzynski

Copy link
Copy Markdown

Summary

This PR applies ShipStation brand guidelines to the connect documentation site, replacing ShipEngine branding with ShipStation branding while maintaining full brand compliance.

Changes Made

🎨 Theme & Colors

  • Updated all colors to ShipStation brand palette:
    • Primary: Deep Indigo #11003A
    • Accent: Bright Green #00E664, Mid Green #00B750
    • Backgrounds: Light Grey #F7F8FA, Light Green #E5FCEF
  • Changed navbar to light grey background with proper contrast
  • Updated all links to use darker green (#00B750) for better readability
  • Improved contrast for code blocks and callout boxes

🔤 Typography

  • Changed font family to Figtree (ShipStation brand font)
  • Loaded Figtree via Google Fonts in siteConfig.yaml
  • Updated all typography references in theme.ts and main.css

🖼️ Logo & Branding

  • Replaced logo with official ShipStation Connect logo (transparent PNG)
  • Updated logo sizing and padding for consistency across all pages
  • Changed site title from "ShipEngine Connect" to "ShipStation Connect"
  • Updated copyright to "© ShipStation. All rights reserved."

📐 Layout & Styling

  • Adjusted hero section sizing (72px title, 36px subtitle)
  • Enlarged "Get Started" button for better visibility
  • Implemented active page highlighting with light green background (#E5FCEF)
  • Improved spacing and visual hierarchy throughout

✅ Brand Compliance

All colors and fonts have been validated against ShipStation brand guidelines at:
https://brand.auctane.com/81a6d9830/p/6586db-brand-guidelines

Files Changed

  • main.css - Added 500+ lines of brand-compliant styles
  • theme.ts - Updated color palette and typography
  • siteConfig.yaml - Updated logo, title, copyright, and font loading
  • index.mdx - Updated hero section text
  • images/shipstation-connect-logo.png - New transparent logo (5.1KB)

Testing

  • ✅ Verified all colors match brand guidelines exactly
  • ✅ Tested logo display on all pages
  • ✅ Checked link contrast and readability
  • ✅ Validated code block styling in light and dark contexts
  • ✅ Confirmed active page highlighting works correctly
  • ✅ Tested hero section sizing on localhost:3000

Screenshots

Hero section and navbar with ShipStation branding applied.

Notes

  • No functionality changes - purely visual rebrand
  • All brand colors use exact hex codes from official guidelines
  • Maintains accessibility with proper contrast ratios
  • Logo background made transparent to match navbar seamlessly

Co-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com

- Updated theme colors to ShipStation brand palette (Deep Indigo #11003A, Bright Green #00E664, Mid Green #00B750)
- Changed typography to Figtree font family (loaded via Google Fonts)
- Updated navbar to light grey background (#F7F8FA) with proper contrast
- Replaced logo with official ShipStation Connect logo (transparent PNG)
- Updated site title from "ShipEngine Connect" to "ShipStation Connect"
- Improved link contrast using darker green (#00B750) for better readability
- Styled code blocks with Deep Indigo background and Bright Green text
- Added proper contrast for links and code in callout/warning boxes
- Adjusted hero section sizing (72px title, 36px subtitle, larger button)
- Implemented active page highlighting with light green background (#E5FCEF)
- Updated copyright to "© ShipStation. All rights reserved."

All colors and fonts validated against ShipStation brand guidelines at
https://brand.auctane.com/81a6d9830/p/6586db-brand-guidelines

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant