Branding
The Branding section in StoryKeep allows you to configure your site’s visual identity, upload brand assets, and customize the overall appearance and settings.
Accessing Branding Configuration
Section titled “Accessing Branding Configuration”Navigate to the Branding section in the StoryKeep dashboard to configure your site’s visual identity and basic settings.
Brand Assets
Section titled “Brand Assets”Logo Configuration
Section titled “Logo Configuration”Logo upload and management:
- Upload your primary logo file
- Supported formats: SVG (recommended), PNG, JPG
- Used in site header and navigation
Wordmark configuration:
- Upload wordmark/text logo variant
- Wordmark display modes:
default: Shows both logo and wordmarklogo: Shows only logowordmark: Shows only wordmark
Favicon
Section titled “Favicon”- Upload favicon for browser tabs
- 32x32 pixel icon recommended
- Displays in browser tabs and bookmarks
Social Images
Section titled “Social Images”- Upload default social sharing image
- Used for open graph and social media previews
- Recommended size: 1200x630 pixels
Site Configuration
Section titled “Site Configuration”Basic Settings
Section titled “Basic Settings”Site information:
- Site name: Primary website title
- Site description: Brief description for SEO and social sharing
- Home page slug: URL slug for homepage (e.g., “hello” creates
/hello) - Site URL: Full domain URL (e.g.,
https://yourdomain.com)
SEO Settings
Section titled “SEO Settings”Meta configuration:
- Default meta descriptions for pages
- Open graph settings for social sharing
- Basic SEO optimization settings
Brand Colors
Section titled “Brand Colors”Configure color schemes for your site’s visual appearance:
- Primary colors: Main brand colors used throughout the site
- Secondary colors: Accent and supporting colors
- Theme variations: Light and dark mode color options
Social Links
Section titled “Social Links”Configure social media and contact links:
- Platform-specific profile URLs
- Contact information display
- Social media integration settings
Site Initialization
Section titled “Site Initialization”Initial Setup Process
Section titled “Initial Setup Process”During first-time setup, the Branding section handles:
- Site initialization:
SITE_INITflag configuration - Basic brand asset upload: Logo, favicon, social images
- Core site settings: Name, description, homepage configuration
- Theme selection: Initial color and visual preferences
Branding Workflow
Section titled “Branding Workflow”Recommended setup order:
- Upload logo and brand assets
- Configure site name and description
- Set homepage slug and site URL
- Choose color scheme and themes
- Add social media links
- Test appearance across different pages
Asset Management
Section titled “Asset Management”Media Storage
Section titled “Media Storage”Brand assets are stored in the media directory:
- Development:
~/t8k/t8k-go-server/config/default/media/ - Production:
/home/t8k/t8k-go-server/config/default/media/
File Organization
Section titled “File Organization”Brand assets follow specific naming conventions:
logo.svgorlogo.png: Primary logo filewordmark.svgorwordmark.png: Text/wordmark versionfavicon.icoorfavicon.png: Browser iconog-image.jpgorog-image.png: Social sharing image
Configuration Storage
Section titled “Configuration Storage”Brand Configuration File
Section titled “Brand Configuration File”Settings are stored in brand.json:
- Development:
~/t8k/t8k-go-server/config/default/brand.json - Production:
/home/t8k/t8k-go-server/config/default/brand.json
Environment Integration
Section titled “Environment Integration”Brand settings integrate with:
- Site-wide configuration in
env.json - Frontend display through template system
- SEO meta data generation
- Social media sharing optimization
Multi-Tenant Branding
Section titled “Multi-Tenant Branding”Tenant-Specific Branding
Section titled “Tenant-Specific Branding”For multi-tenant installations:
- Each tenant has separate branding configuration
- Isolated brand asset storage per tenant
- Independent color schemes and logos
- Subdomain-specific branding
Global vs Tenant Settings
Section titled “Global vs Tenant Settings”- Global: Default branding for main domain
- Tenant: Custom branding for subdomains
- Inheritance: Tenants can inherit or override global settings
Responsive Design
Section titled “Responsive Design”Asset Optimization
Section titled “Asset Optimization”Brand assets automatically adapt for:
- Desktop displays: Full-resolution assets
- Mobile devices: Optimized sizing and loading
- High-DPI screens: Retina-ready asset delivery
- Different orientations: Portrait and landscape optimization
Logo Display
Section titled “Logo Display”Logo and wordmark display adapts based on:
- Screen size and available space
- Navigation context (header, footer, mobile menu)
- Theme settings (light/dark mode)
- User preferences and accessibility needs
Integration with Content
Section titled “Integration with Content”Header and Navigation
Section titled “Header and Navigation”Brand assets appear in:
- Site header: Logo and wordmark display
- Navigation menus: Brand identity integration
- Mobile interface: Responsive brand presentation
Page Templates
Section titled “Page Templates”Branding affects:
- Page layouts: Color scheme application
- Typography: Brand-consistent text styling
- Interactive elements: Button and link styling
- Content presentation: Overall visual cohesion
Proper branding configuration creates a cohesive visual identity across your TractStack site. Brand settings integrate seamlessly with content and provide consistent user experience.