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

Jump to typography

Optimized for desktop and mobile One H1 per page, clean heading structure

Skymoon design tokens

Key values at a glance

Use these tokens in Elementor, custom CSS and design files to keep the look and feel consistent.

Primary #121212 var(--sky-primary)

Secondary #FFFFFF var(--sky-secondary)

Accent #006CFF var(--sky-accent-primary)

Accent 2 #745EFF var(--sky-accent-secondary)

Radius 8 to 15 px var(--radius-sm/lg)

Font REM 400 to 700 headings 700, body 400

Apply to all new layouts

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

Primary horizontal logo
Minimum width: 160 px

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.

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

Primary

#121212 Text & highlights

token: var(--sky-primary)

Secondary

#FFFFFF Page background

token: var(--sky-secondary)

Primary accent

#006CFF Buttons & links

token: var(--sky-accent-primary)

Secondary accent

#745EFF Gradients & emphasis

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.

H2 600
Major content sections.

H3 ~550
Cards, sub sections and feature titles.

Body 400
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.

Use for service highlights, case studies and feature blocks.

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