Primary
token: var(--sky-primary)
Brand system
Skymoon style guide for web and marketing
Use this page whenever you design, write or develop anything under the Skymoon Infotech brand. It aligns website layouts, landing pages and campaigns with one consistent system.
Web first design language
SEO and Core Web Vitals aware
Ready for AI search results
Core identity
Logo usage and variants
Always use the official Skymoon Infotech logo files. The dark logo is for white or light backgrounds, and the light logo is for dark or gradient backgrounds.
Use original files, never reexport from screenshots
Skymoon Infotech
AI first digital growth studio
Use this logo in the website header, footer, proposals and any layout with a white or very light background.
Keep at least one logo height of clear space around the mark. Do not place other logos, icons or text in that area.
Dark logo on light background
Use on white cards, content sections and documents.
Light logo on dark background
Use on dark hero sections, gradients or full width banners.
Do
- Use provided SVG or PNG files from the brand folder.
- Maintain original proportions and clear space.
- Ensure strong contrast with the background.
Avoid
- Do not stretch, rotate or distort the logo.
- Do not add shadows, outlines or new gradients.
- Do not place over busy images that reduce legibility.
Visual system
Color palette
Skymoon uses a clean light background with strong dark text and two accent blues. Use these values in design tools, Elementor global styles and custom CSS.
Limit screens to core brand colors plus neutrals
Secondary
token: var(--sky-secondary)
Primary accent
token: var(--sky-accent-primary)
Secondary accent
token: var(--sky-accent-secondary)
For readability, keep body text in #121212 on white or very light backgrounds. Use #006CFF for primary actions and links, with hover states that are slightly darker or combined with #745EFF for gradients.
- Use accent colors for CTAs, interactive states and key highlights.
- Keep long paragraphs in neutral dark text rather than blue.
- Check contrast when placing text over images or gradients.
Typography
Font, scale and hierarchy
The entire system uses REM for headings and body copy. Headings are bold and confident, body text is lighter and easier to read.
H1 weight 700, H2 600, H3 approx 550, H4 to H6 500
Skymoon Infotech
Primary font: REM, headings 700 to 600, body 400
Use one type family across the full site. H1 is reserved for the main page title. H2 introduces sections, H3 is for cards or sub sections, and body text stays at 400 weight for comfortable reading.
H1 700
Page titles and hero sections.
Page titles and hero sections.
H2 600
Major content sections.
Major content sections.
H3 ~550
Cards, sub sections and feature titles.
Cards, sub sections and feature titles.
Body 400
Paragraphs, FAQs, microcopy.
Paragraphs, FAQs, microcopy.
| Token | Usage | Size | Line height |
|---|---|---|---|
| H1 | Page and hero titles | 2.2 to 2.6 rem | 1.1 |
| H2 | Section headings | 1.4 to 1.8 rem | 1.2 |
| H3 | Cards and feature titles | 1.15 to 1.35 rem | 1.25 |
| Body | Main content paragraphs | 0.95 to 1 rem | 1.5 to 1.7 |
| Small | Meta labels, captions | 0.78 to 0.85 rem | 1.4 |
In Elementor, map these values into global typography settings so you can reuse them across all pages without manual overrides.
UI components
Buttons and cards
Components should feel clean, clickable and focused on conversions. Rounded corners sit between 8 and 15 px with soft shadows instead of heavy borders.
Use one primary CTA per screen where possible
Primary buttons use the Skymoon blue gradient and appear on the main conversion action. Secondary buttons are for neutral actions such as learn more, and ghost buttons are for low priority interactions.
High performing card layout
Cards should have a clear title, short body copy and one obvious action. Keep spacing consistent with 16 to 20 px padding and radius between 10 and 15 px.
Imagery
Images and iconography
Visuals should reflect modern digital marketing, analytics and AI powered workflows. Avoid generic stock that feels disconnected from performance and growth.
Add descriptive alt text with relevant keywords
Use
Dashboards, CRO experiments, keyword research views, collaboration scenes and wireframes that show the work behind results.
Avoid
Generic business handshakes, unrelated city skylines, abstract shapes that do not support the message.
Icons
Use one icon set with matching stroke and corner radius. Keep icon size consistent within each section.
Performance
Compress images, use responsive sizes and enable lazy loading where possible to protect Core Web Vitals.
Content
Tone of voice
Skymoon speaks clearly and confidently. Explain how we help, avoid jargon where possible and tie every feature back to a business outcome.
Short sentences, human language, no fluff
Recommended
"We help you turn traffic into measurable revenue using SEO, CRO and high performing websites."
✓ Clear outcome and service names
Avoid
"We provide world class end to end digital solutions tailored to all your needs."
✗ Vague, sounds like everyone else
Recommended
Speak in the second person, use real metrics and examples and keep paragraphs short for easy scanning.
✓ User focused and specific
Avoid
Long sentences full of internal abbreviations that new clients do not understand.
✗ Hard to read and remember
