Skip to main content

Visual direction

Modern business clarity with warm precision.

The mockup favors centered hierarchy, broad white fields, quiet gray bands, thin orange line details and dark charcoal action sections. Components should feel light, practical and finished.

White space

Primary sections breathe with generous padding and narrow copy widths.

Orange accent

Orange is reserved for CTAs, geometry, active states and small confidence signals.

Charcoal contrast

Dark sections create rhythm for process and contact moments.

Color system

Warm accent, clean surfaces and charcoal depth.

Use orange sparingly, gray bands for section rhythm and charcoal for high-contrast conversion areas.

Primary#efad3d
Primary dark#cf8d21
Secondary#3f4247
Accent#f6c76e
Heading#101215
Text#3d424b
Muted#777f8b
Surface#f7f7f6
Surface alt#eceeef
Border#e7e1d8
White#ffffff
Black#000000

Font system

Poppins for rounded, geometric mockup fidelity.

Primary heading font: Poppins. Primary body font: Poppins. Fallback stack: Segoe UI, Roboto, Arial, sans-serif. Loaded weights: 400, 500, 600, 700, 800. Static loading uses Google Fonts CDN before Bootstrap and base CSS. This Andromeda-specific choice overrides the generic Inter starter rule because the approved mockup uses softer, more geometric shapes.

400 body

Revenue systems should be simple enough for the team to repeat every week.

600 labels

Useful structure, measured progress.

800 headings

Consulting with a clear operating rhythm.

Typography system

Production classes for consistent hierarchy.

Display / .eds_displayTitle

Join us and double your revenue within one year

Global heading scale / h1-h6 and .h1-.h6

H1 - Aurora-inspired hero rhythm

H2 - Section headline rhythm

H3 - Feature group heading

H4 - Card or panel heading

H5 - Compact content heading

H6 - Label-style heading

Title large / .eds_title--lg

Choose your plan

Title / .eds_title

Why choose us?

Medium title / .eds_title--md

Practical support for growing teams

Small title / .eds_title--sm

Focused strategy

Intro / .eds_intro

Intro text sits below section titles and gives readers enough context before cards, forms or split content.

Body, small, eyebrow and quote

Our offer

Body copy uses calm spacing and concise language.

Small text supports labels, notes and helper copy.

A quote should feel centered, confident and easy to scan.

Spacing rhythm

Airy sections, compact components.

The page rhythm uses generous section padding, focused max widths and consistent card spacing.

Small gap
Medium gap
Large section rhythm

Section headers

Centered by default for major mockup sections.

Pricing

Choose your plan

Use narrow line lengths, clear contrast and simple supporting text.

Buttons and links

Orange CTAs with quiet secondary actions.

Button variants
Primary Secondary Outline Light Dark
Sizes and icon use
Small Default Large

Text link and arrow link

Cards, feature cards and icons

Subtle borders, simple shadows and outlined symbols.

Default card

Use white surfaces, restrained borders and concise copy.

Feature card

Tall, centered and finished with a thin orange rule.

Meeting card example

Media card

Images zoom inside the frame without shifting layout.

Plain icon
Soft icon
Outline icon
Circle icon

Badges and labels

Small emphasis without heavy decoration.

Consulting Growth Operations Planning

Media treatment

Editorial business imagery with controlled crops.

Corporate consulting meeting media specimen
Team media specimen
Architecture media specimen

Checklist rows

Plain checks for service proof points.

  • Audit current growth operations.
  • Prioritize improvements with leadership.
  • Track progress using a simple rhythm.
  • Share the commercial goal.
  • Choose the first sprint.
  • Measure and adjust weekly.

Pricing cards

Flat, centered and easy to compare.

Basic

$19/ monthly

Starter consulting rhythm.

  • Planning session
  • Priority map
  • Review note
View more details

Standard

$29/ monthly

Regular advisory support.

  • Biweekly call
  • Scorecard
  • Campaign review
View more details

Business

$49/ monthly

Hands-on growth partnership.

  • Weekly sprint
  • Reporting pack
  • Workshop
View more details

Form fields

Underlined controls with clear helper and error states.

Visible label and associated helper text.
Example error message.

Surfaces and dark treatment

White, soft, gradient and charcoal options.

White surface

Default content surface.

Soft surface

Quiet section rhythm.

Gradient surface

Subtle warmth only.

Dark surface

Contact and process contrast.

Decorative geometry

Thin orange shapes, dots and line patterns.

Motion and reveal

Subtle OnView classes, visible without JavaScript.

Use `fadeInOnView`, `fadeInUpOnView`, `fadeInLeftOnView` and `fadeInRightOnView` for static preview motion. Reduced and off modes are opt-in through data attributes.

Fade in

Quiet supporting content.

Fade in up

Default card and section reveal.

Reduced opt-in

Respects reduced-motion preference.

Accessibility and focus states

Keyboard-visible and component-level AA-ready.

Pages include skip links, a single main landmark, visible focus states, labeled form fields, icon-only names and opt-in reduced/off motion behavior.

Focus examples
Focusable button Focusable link
Alerts and table
Do not claim full WCAG conformance for future user-generated content.
RequirementStatus
Skip linkIncluded
Form labelsIncluded
EasyDNNmegaMenu

Our social channels

Stay close to practical consulting notes, team updates and new growth resources.