Theme Customization
How to create a unique and professional brand identity for your portfolio.
Your portfolio is more than just a collection of work; it's a reflection of your personal brand. MyFolioHub's Theme Engine allows you to customize every visual aspect of your site, ensuring that your online presence is as unique as your professional expertise.
Global vs. Local Styling
The key to an efficient workflow is understanding Global Styles. Instead of changing the font on every single heading, you set a global "Heading Font" in the Theme panel. This change instantly propagates across your entire site, ensuring perfect consistency and saving you hours of tedious work.
Mastering the Color Palette
Colors evoke emotion and set the tone for your brand. Our color system is divided into three main categories:
- Primary Color: Your main brand color, used for buttons, links, and key accents.
- Surface Colors: The background colors for your sections (e.g., White, Slate-50, or a dark Navy).
- Text Colors: Carefully calibrated shades of gray and black to ensure maximum readability and accessibility.
Typography & Hierarchy
Good typography is the foundation of professional design. MyFolioHub integrates with the entire Google Fonts library, giving you access to hundreds of high-quality typefaces. We recommend choosing two fonts:
- A Display Font: For your headings. This can be bold and full of personality.
- A Body Font: For your paragraphs. This should be clean, simple, and highly legible.
The "Soft Precision" Design System
Our default theme follows the "Soft Precision" aesthetic—characterized by generous whitespace, subtle shadows, and large border-radii (rounded-[2.5rem]). This creates a modern, approachable, yet highly professional feel that is currently trending in the SaaS and tech industries.
Accessibility Matters
When customizing your colors, our builder will automatically check the contrast ratio between your text and background. If the contrast is too low (making it hard for people with visual impairments to read), we'll show a warning and suggest a more accessible alternative.
Customizing UI Components
Beyond colors and fonts, you can customize the "shape" of your site. Want sharp, modern corners? Set your border-radius to 0. Want a more playful, organic feel? Increase the border-radius to its maximum. You can also toggle features like "Glassmorphism" (blurred backgrounds) and "Neumorphism" (soft 3D effects) with a single click.
Was this article helpful?
Help us improve our documentation for everyone.
Share this guide
Help your colleagues learn too.
Still need help?
Our support team is here for you.