Skip to main content

​
Logo and Branding Assets

Upload your logo and favicon as separate files directly in Specode, simply drag and drop or click to upload:
  • Logo: Upload your main logo file (PNG, JPG, or SVG)
  • Favicon: Upload your browser tab icon separately
Upload files first, then reference them in your prompts. For example, after uploading, say: “Apply the logo I just uploaded to the header and login page”

​
Understanding Shadcn Theming

Specode uses Shadcn UI, which provides a powerful CSS variable-based theming system. The easiest way to transform your app’s look is by customizing these key elements:

​
Essential Customizations

Primary Color

Changes buttons, links, selected states, and active elements throughout the app

Font Colors

Adjusts all text from headings to body content for better readability

Button Styling

Modifies all interactive buttons including size, radius, and hover effects

Backgrounds

Updates page backgrounds, card backgrounds, and surface colors
How it works: Shadcn uses CSS variables like --primary, --background, and --foreground. When you change these, the entire app updates automatically. Learn more at Shadcn Theming Docs.

​
Practical Styling Examples

Here are specific prompts for customizing different parts of your application: 
Style all forms with rounded corners (radius-md), 
add focus rings in our brand color #0066CC, 
and increase input height to 48px for better touch targets

​
Best Practices

Do

  • Upload logo and favicon early
  • Apply branding incrementally
  • Test on different screen sizes
  • Ensure text readability
  • Consider accessibility

Don't

  • Use too many colors
  • Make text too small
  • Ignore mobile users
  • Forget dark mode option
  • Sacrifice usability for style
Ready to customize? Start with “Upload logo and set primary color to [your brand color]” or explore Adding Features vs. Modifying for functional changes.
⌘I