Mission
Keep WordPress hosting boring for clients by handling performance, security, and support behind the scenes, so they can focus on content and revenue.
- WordPress only focus
- Performance and uptime first
- Human support for technical problems
Yogi's VPS brand system
Yogi's VPS Brand Guidelines
This page is for designers, developers, and partners who need to create assets that feel like Yogi's VPS. Use these guidelines any time you design a page, component, ad, or screenshot for the brand.
1. Brand foundations
Every visual decision should support the experience you see on the Yogi's VPS homepage: calm, technical, and performance focused without feeling corporate or cold.
Mission · Tagline · Personality
Tagline and positioning
Use these lines when you need a quick brand statement in new layouts or marketing.
- Main line: Fast, secure WordPress hosting built for busy site owners.
- Support line: Managed WordPress hosting and support on Yogi's VPS.
- Short label: Managed WordPress hosting.
Brand personality
How Yogi's VPS should feel in copy and visuals:
- Calm, confident, never hypey.
- Technical but clear and friendly.
- Helpful partner, not a faceless platform.
If a layout feels loud, cluttered, or salesy, pull it back toward quiet confidence.
2. Logo and mark
The logo is a circular Y mark on a gradient, paired with an uppercase wordmark. Keep it sharp, compact, and on dark backgrounds whenever possible.
Primary logo · Clear space · Do and do not
Primary lockup
Y
Yogi's VPS
Managed WordPress Hosting
Use on dark backgrounds by default
Keep the Y centered and sharp
- Minimum clear space: keep at least one circle of padding around the logo.
- Do not change the gradient direction or replace the Y with other letters.
- Use the full lockup (mark and text) in headers, footers, and hero sections.
For tiny spaces like favicons or system badges, the circular Y mark can be used alone.
Do
Use the mark on dark, blue, or deep purple backgrounds that match the site shell.
Keep the wordmark uppercase with moderate letter spacing.
Do not
Stretch the logo, add glows that clash with the gradient, place it on pure white, or
change the Y to an icon or emoji.
- When placing the logo in screenshots, align it left and keep it near navigation or top edges.
- On solid color backgrounds, avoid busy patterns behind the mark.
- Do not add extra outlines or drop shadows beyond what already appears in the gradient circle.
3. Color system
Yogi's VPS lives in a dark interface with teal and blue accents and a warm gradient for highlights. Use these swatches to match the homepage and footer.
Palette · Usage · Accessibility
Background base
#020308
Main page background and footer shell.
Panel surface
#020617
Cards, hero panels, and content blocks.
Border tone
#1E293B
Card borders and subtle dividers.
Success
#22C55E
Status dots, health, and uptime labels.
Primary accent
#38BDF8 → #0EA5E9
Primary buttons, key highlights, CTAs.
Warm accent
#22C1C3 → #FDBB2D
Hero chips and special notifications.
Text main
#E5E7EB
Body text on dark backgrounds.
Muted text
#9CA3AF
Secondary labels, helper copy.
Accessibility: on dark surfaces, keep primary text close to #E5E7EB and use #9CA3AF for muted labels so contrast stays strong. Avoid using accent gradients for long paragraphs.
4. Typography
Yogi's VPS uses a system UI stack for a clean, native feel. Weight, spacing, and hierarchy matter more than fancy type.
Headings · Body copy · Labels
Hierarchy and usage
Fast, secure WordPress hosting built for busy site owners.
We keep your WordPress sites backed up, updated, and tuned for performance so you never have to think about servers.
Headlines should be bold, tight, and direct. Avoid title case in longer sentences. Body copy should feel like clear instructions from a friendly engineer, not a marketer.
Font stack and tokens
Font stack system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
Headings 700 to 800 weight, slightly tighter letter spacing, with sizes matching the homepage: large hero titles and 20 to 24px section headings.
Body and labels 14 to 15px for body copy, 11 to 12px for meta labels and badges. Use uppercase labels with wide tracking for status and small UI text.
Do not mix unrelated display fonts into dashboards or pricing tables. Keep typography consistent with the main site so everything feels like one platform.
5. Buttons and UI components
Buttons, badges, and cards should look like extensions of the homepage hero and plans section. Rounded, compact, and purposeful.
Buttons · Badges · Cards
Primary and secondary buttons
Use these styles for any new CTA that represents a key action.
- Primary buttons use the blue gradient and dark text, like the homepage hero.
- Secondary buttons are ghost style with light borders and hover state.
- Use wide pill shapes only. Avoid sharp corners for actions.
Only one primary button per section. If you need more actions, use ghost buttons or text links.
Cards and metrics
Cards should look like mini control panels, similar to the "Control snapshot" hero card and pricing plans.
- Use dark panels with subtle borders and soft internal padding.
- Include labels at 11 to 12px above larger values or feature titles.
- Use small icons or short labels instead of heavy illustrations.
If you are unsure, copy the structure and spacing from the maintenance plans grid on the homepage and adjust text only.
6. Layout and imagery
The Yogi's VPS interface feels like a focused control panel. Layouts should be simple grids with strong content blocks, not marketing splash pages.
Grid · Spacing · Screenshots
Layout principles
- Max width: Use a central wrapper around 1180 to 1200px like the homepage.
- Sections: Divide pages into clear sections with titles and short descriptions.
- Spacing: Use 20 to 30px padding inside cards and 40 to 70px vertical spacing between sections.
- Columns: Prefer 2 or 3 column grids on desktop that collapse to one column on mobile.
- Borders: Use subtle borders and gradients for depth instead of heavy shadows everywhere.
When in doubt, mirror the structure of the hero, plans, and "How it works" sections from the homepage.
Imagery and screenshots
- Favor product screenshots, dashboards, and code views over stock photos.
- Keep browser chrome simple and dark where possible to match the site shell.
- Use subtle gradients behind screenshots instead of busy backgrounds.
For help text or walkthroughs, pair short copy with a single focused screenshot rather than collages of multiple windows.
7. Voice and tone
Copy should sound like a performance focused WordPress developer talking to a busy site owner. Straightforward, friendly, and specific.
Copy · Microcopy · Support content
How to write
- Use direct, conversational language.
- Explain technical terms with a quick plain language version.
- Focus on outcomes: fewer emergencies, faster pages, less stress.
Good examples
- "We migrate you to Yogi's VPS with rollback ready."
- "You get a partner, not just a login."
- "We keep your WordPress sites backed up, updated, and tuned for performance."
Avoid this tone
- Overly salesy or hype filled claims.
- Jokes that undercut reliability or stability.
- Vague promises without concrete details or steps.
When updating or creating a new page, compare the copy to the homepage hero and maintenance plans section. If it feels like a different brand, simplify it until it matches the same voice.