Launch
For brands that need a consistent, professional presence on social.
Ad budgetNone needed
- Content calendar and daily posting
- Comment and DM replies
01
Brand foundations
GrowSales sells growth that shows up in the sales report. Every word and visual on the site points at that, and away from vanity metrics.
Promise
Turn scrollers into customers.
The hero line. Use it once per page, with the zag under “customers”.
Positioning
A digital marketing agency for growing brands. Social media, content, video and Meta Ads, run as one system and measured in sales.
Who it's for
Owners and marketing heads of growing consumer brands
D2C, fashion, beauty, restaurants, real estate, clinics, education and local retail, mostly in India. They have tried boosting posts or a freelancer and want one accountable team.
Proof we lead with
Rupees, orders, leads and cost per sale
Reach, likes and followers come second. Every stat on the page is something a founder would see in their bank or order dashboard.
Voice
Three traits. Each one has a line we'd write and a line we wouldn't.
Plain-spoken
Say what we do in the words a shop owner uses.
WriteWe shoot a month of reels in one day.
AvoidWe craft scroll-stopping narratives that elevate your brand.
Numbers first
Lead with the figure, then explain it.
Write₹184 per order, down 11% this week.
AvoidEngagement is trending up nicely!
Accountable
Say who owns what, what it costs and what happens next.
WriteYour ad budget is paid to Meta from your own account.
AvoidAd spend is managed end-to-end by our experts.
Call-to-action labels
One primary action across the site: the free audit. Never “Submit”, “Learn more” or “Contact us”.
| Where | Label | Style | Goes to |
|---|---|---|---|
| Hero, navbar, services, sticky mobile bar, footer | Book a free audit | Primary | #audit |
| Navbar under 480px | Free audit | Primary, small | #audit |
| Hero, second action | See results | Secondary | #results |
| Plan cards | Get a quote for Launch / Grow / Scale | Secondary, primary on Grow | #audit, plan pre-filled |
| Form steps 1 and 2, then submit | Continue, then Book my free audit | Primary | Next step, then success |
| Navbar, FAQ card, mobile menu | Chat on WhatsApp | Secondary or text | wa.me link (to add) |
02
Logo
The existing GrowSales mark is kept exactly as it is: a chat bubble on a navy tile with a rising arrow, in the indigo-to-emerald gradient. The wordmark is set in Inter.
GrowSalesOn fog and white
GrowSalesOn navy
Clear space and minimum size
½GrowSales
Keep half the mark's height clear on every side. The full logo is never narrower than 120px; below that, use the mark alone (16px minimum).
Wordmark
| “Grow” | Inter 800, tracking −2%, Navy on light, #F0F2FF on navy |
| “Sales” | Inter 700, Indigo 600 on light, Periwinkle #A5B4FC on navy |
| Gap | Mark to wordmark: a quarter of the mark's width |
| Nav size | Mark 40px desktop, 34px mobile |
Don't
GrowSales
Recolour the wordmark.
GrowSales
Place it on the gradient or on photos.
GrowSales
Stretch or squash the mark.
GrowSales
Add glows, shadows or outlines.
03
Colour
Built from the existing logo: GrowSales indigo for action, emerald for growth, the logo's navy for weight, and cool fog neutrals tinted toward indigo. Click any swatch to copy its hex.
Approximate share of a page
Indigo stays rare so it always means “act”. Emerald only marks growth.
Approximate share: fog and white 58 percent, navy 24, mist 11, indigo 4, emerald 3.
All colour tokens
Names match the CSS variables and the Webflow variables.
Brand
Indigo 600--indigo
#3D52E6Buttons, links, focus ring, emphasised words
Indigo 700--indigo-hover
#2F43D4Button hover and pressed
Indigo 500--indigo-500
#5B6EF5GrowSales primary. Graphics, charts, eyebrow squares; not for small text
Indigo 300--indigo-300
#8B9AF8Emphasis text on navy
Periwinkle--peri
#A5B4FC“Sales” in the wordmark on navy
Indigo 50--indigo-50
#EEF0FFSelected tiles, GrowSales table column, plan chip
Emerald 500--emerald
#10B981Growth on navy, “yes” marks, badges with navy text
Emerald 700--emerald-700
#047857Growth text and bullets on light
Emerald 50--emerald-50
#E7F8F1Positive chips and quick-win panels
Neutrals and status
Navy--ink
#0B1220Headings, dark bands, featured plan
Navy 800--navy-2
#111A2ECards on navy
Navy 700--navy-3
#1A2540Chips and avatars on navy
Slate 600--ink-2
#464D63Body text on light
Slate 500--ink-3
#5D6480Captions, labels, mono text
Fog--fog
#F3F4F8Page canvas
White--paper
#FFFFFFCards, white bands, the form
Mist--mist
#E7E9F5Plans band, mock-up panels
Mist 200--mist-2
#DCE0F2Dividers and inactive bars on mist
Amber 700--amber
#B45309“Learning” and “Sometimes” states
Amber 50--amber-50
#FEF3C7Amber chip background
Red 700--error
#B42318Form errors
Brand gradient
Indigo 500 to Emerald 500, left to right. Only for the logo, the zag line and chart lines. Never a background fill.
Content colours
Only inside creative mock-ups (posts, reels, ads, calendars). Never for UI, text or backgrounds.
Contrast
Every text pair used on the page, measured against WCAG 2.2. AA needs 4.5:1 for body text and 3:1 for large text.
| Sample | Pair | Used for | Ratio | WCAG |
|---|---|---|---|---|
| Navy on Fog | Headings | 17.04 : 1 | AA | |
| Slate 600 on Fog | Body text | 7.64 : 1 | AA | |
| Slate 500 on Fog | Captions and labels | 5.31 : 1 | AA | |
| Slate 500 on Mist | Labels in mock-up panels | 4.83 : 1 | AA | |
| White on Indigo 600 | Button labels | 5.92 : 1 | AA | |
| White on Indigo 700 | Button labels on hover | 7.31 : 1 | AA | |
| Indigo 600 on Fog | Links, step times | 5.39 : 1 | AA | |
| Indigo 600 on Indigo 50 | Selected tiles, plan chip | 5.23 : 1 | AA | |
| Emerald 700 on White | Growth text, status | 5.48 : 1 | AA | |
| Emerald 700 on Emerald 50 | Positive chips | 4.99 : 1 | AA | |
| Amber 700 on Amber 50 | “Learning” pill | 4.51 : 1 | AA | |
| Red 700 on White | Form errors | 6.57 : 1 | AA | |
| Placeholder on White | Input placeholders | 4.55 : 1 | AA | |
| Fog text on Navy | Text on dark bands | 16.81 : 1 | AA | |
| Muted on Navy | Secondary text on dark | 8.67 : 1 | AA | |
| Muted on Navy 800 | Labels in case cards | 8.03 : 1 | AA | |
| Emerald 500 on Navy | Big stats on dark | 7.38 : 1 | AA | |
| Indigo 300 on Navy | Emphasis on dark | 7.20 : 1 | AA | |
| Navy on Emerald 500 | Badges, “Winner” tag | 7.38 : 1 | AA | |
| White on Indigo 500 | Not used for text | 4.21 : 1 | Large text only |
04
Typography
Three Google Fonts. A characterful grotesque for headlines, Inter for reading (it matches the existing wordmark) and a mono for labels and data, the language of the dashboards GrowSales reports from.
Aa
Bricolage Grotesque
Display. Headings, stats, plan names and FAQ questions. Weights 600 to 700, optical size on.
₹ 4.2× 0123456789 & ?!Aa
Inter
Body and UI. Paragraphs, buttons, form fields, table text and the wordmark. Weights 400 to 800.
₹ 4.2× 0123456789 & ?!Aa
Fragment Mono
Utility. Eyebrows, labels, table heads, dates and chart axes. Uppercase with +6 to +8% tracking.
₹ 4.2× 0123456789 & ?!Scale
Sizes in px at the three design widths. Line height and tracking as set in the CSS.
| Style | Font · weight | 1512 | 768 | 393 | Line height · tracking |
|---|---|---|---|---|---|
| H1 display | Bricolage 700 | 80 | 60 | 42 | 0.98–1.02 · −3.5%, −3% on mobile |
| H2 section | Bricolage 650 | 56 | 44 | 34 | 1.04–1.08 · −3% |
| H2 closing (audit) | Bricolage 650 | 64 | 48 | 40 | 1.04 · −3% |
| H3 card | Bricolage 600 | 28 | 24 | 22 | 1.15 · −1.8% |
| H4 / FAQ question | Bricolage 600 | 21 | 20–21 | 18–19 | 1.25–1.35 · −1.5% |
| Stat numeral | Bricolage 650–700 | 56–64 | 48–64 | 36–52 | 0.95–1 · −3.5 to −4.5% |
| Lead | Inter 400 | 20 | 18 | 17 | 1.55 |
| Body | Inter 400 | 17 | 16 | 16 | 1.6 |
| Small / UI | Inter 400–600 | 14–15.5 | 14–15.5 | 13.5–14 | 1.4–1.5 |
| Button | Inter 600 | 16 (15 small) | 16 | 16 | 1 · −0.5% |
| Eyebrow / label | Fragment Mono 400, caps | 12.5 | 12.5 | 11.5 | 1.4 · +8% |
Specimens
Desktop sizes.
Turn scrollers into customers.
Results you can measure in rupees.
Meta Ads campaigns
4.6×
GrowSales is a digital marketing agency for growing brands. We plan, shoot and run your social media and Meta Ads as one system.
We review your pages, ads and two competitors, then agree one target with you: sales, leads or footfall. You approve a 30-day content calendar, an ad plan and a budget.
How we work
Rules
- Sentence case everywhere, including buttons and headings. Full stop at the end of H1 and H2 statements; question marks for questions.
- One emphasised phrase per page section at most, set in indigo with the zag underline. Only the hero H1 and the closing audit H2 use it.
- Tabular figures wherever numbers line up: stats, tables, chart labels, prices.
- Mono is for labels, never for sentences. Keep running text near 65 characters per line.
- Indian number format on Indian pages: ₹1,20,000 or ₹1.2L, ₹12 Cr. Write “lakh” and “crore” in sentences.
05
Layout and spacing
Designed at 1512, 768 and 393, built on Webflow's breakpoints. One container, generous section rhythm, and grids that drop columns instead of shrinking content.
Desktop · 1512
- Webflow breakpoint
- Base · 992+
- Columns
- 12
- Container
- 1280
- Outer margin
- 116 (min 48)
- Gutter
- 20
- Section padding
- 128
- Navbar
- 76
Tablet · 768
- Webflow breakpoint
- ≤ 991
- Columns
- 8
- Container
- 688
- Outer margin
- 40
- Gutter
- 20
- Section padding
- 96
- Navbar
- 68
Mobile · 393
- Webflow breakpoint
- ≤ 479
- Columns
- 4
- Container
- 353
- Outer margin
- 20
- Gutter
- 16–20
- Section padding
- 64
- Navbar
- 64
Spacing scale (px)
Spacing scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 88 and 128 pixels.
How sections behave
- Hero: two columns on desktop, copy first then the campaign visual on tablet and mobile.
- Services: bento of 7 + 5 and 4 + 4 + 4 columns, 2-up on tablet, 1-up on mobile.
- Cases and plans: 3-up on desktop, wide two-column cards on tablet, stacked on mobile.
- Process: pinned visual beside the steps on desktop; each step carries its own visual below 992.
- Comparison table: becomes labelled rows with a sticky header on mobile.
06
Shape and depth
Soft, app-like corners, because the work lives inside phones and dashboards. Hairlines separate; shadows are saved for things that float.
8 · xsChips in mock-ups
12 · smInputs, small buttons
14 · buttonButtons, tiles
22 · cardCards, tables
26 · card largeService and plan cards
36 · panelHero visual panel
40 · bandClosing audit panel
999 · pillTags, chips, badges
Elevation
Two shadows only.
Flat + hairline1px ink at 10%. Default for cards.
Lift0 1px 2px / 6% + 0 12px 32px −16px / 18%. Hover state, floating chips.
Mock0 32px 64px −28px / 40%. Phones and dashboards in visuals.
07
The zag
The brand device. It's the rising line inside the GrowSales mark, lifted out and reused. It stands for growth with a dip in it, which is how real campaigns look.
From the mark: M24 32 L29.5 26.5 L33 30 L40 23
Rules
- One underline per screen, only under the hero H1 and the closing H2.
- The underline draws once, on load, over 1.15s. It never loops.
- As a bullet it replaces the tick: Emerald 700 on light, Emerald 500 on navy.
- As a watermark on navy bands, indigo at 10–12% opacity, cropped by the edge.
- Always rising left to right. Never flipped, rotated or used for decline.
customers.
Underline
Gradient stroke under the emphasised word.
- Monthly shoot days
- UGC and creator videos
Bullet
Every feature list and checklist.
Yes
“Yes” mark
Comparison table and legend.
Button hover
The arrow flies out and the zag rises in.
Watermark
Behind results, the audit band and covers.
Chart line
Revenue and ROAS lines use the same gradient.
08
Components
The parts the landing page is built from, with their states. Class names match the code, so they can be rebuilt one-to-one in Webflow.
Buttons
button with combo classes. Height 56 (52 on mobile), small 44. Hover 200ms.
Tags, chips and labels
Hero tagSocial · Content · Video · Meta Ads
EyebrowHow we work
Sample tagSample
ChipShoot days
Delta9 pts
Status pillsLearningApprovedScheduled
BadgeMost popular
Form controls
Labels above, 52px inputs, errors say how to fix it. Phone always has the +91 prefix and a line on why we ask.
Default
Focus
Enter a 10-digit mobile number, like 98765 43210.
Option tile · default
Option tile · selected
Check chips
FAQ item
First item open. The whole row is the button. Try it.
A 30-minute video call. We share what we found, three quick wins and a 90-day plan.
No. It's paid to Meta from your own ad account.
Cards
Plan and case cards as used on the page.
Grow
Most popularFor brands ready to sell with video and Meta Ads.
Ad budgetUp to ₹2 lakh a month
- Everything in Launch
- Meta Ads campaigns for sales or leads
D2C skincareSample
4.6×
return on ad spend within 90 days of launch
- Revenue
- ₹18.4L
- Ad spend
- ₹4L
- Orders
- 2,950
What we didReelsUGC ads
Case card rules
One big number in Emerald 500, one sentence saying what it means, three supporting metrics and the services used. Tag it Sample until the client approves real figures.
09
Motion
The page sits still; the campaign moves. Motion lives inside the hero visual and in small confirmations, and everything stops for people who prefer reduced motion.
| Moment | Spec | Reduced motion |
|---|---|---|
| Hover | 200–300ms, cubic-bezier(.215,.61,.355,1). Cards lift 3px, borders darken. | Colour change only |
| Button arrow | Arrow exits up-right, zag enters from bottom-left, 500ms cubic-bezier(.16,1,.3,1). Also on keyboard focus. | Kept (no travel) |
| Zag underline | Draws once on load, 1.15s, 350ms delay, expo ease. | Shown drawn |
| Hero feed | New order or DM slides in every 3.4s; the list keeps three. Pauses when the tab is hidden. | Static list |
| ROAS chart | Line draws once over 1.6s after 500ms. | Shown drawn |
| Counters | Count up once over 1.4s when 60% visible. Final values are in the HTML. | Final values only |
| Marquee | 48s per loop, linear, pauses on hover, edges fade. | Static |
| Process stepper | Pinned visual swaps when a step crosses the middle of the screen: 450ms fade + 14px rise. The rail fills with progress. | Instant swap |
| FAQ | Height via grid rows, 450ms. | Instant |
| Sticky mobile bar | Slides up after the hero CTAs leave the screen, hides over the audit form, 450ms expo. | Kept |
Try it
Hover or tab to the button. Replay the underline.
customers.
Hover me
10
Imagery and icons
Show the work, not stock photos. Each service is illustrated with the thing GrowSales actually delivers: a calendar, a post grid, a shoot call sheet, an A/B test, a cost-per-sale chart.
Now
UI mock-ups in HTML
Sharp at any size, light to load, and easy to edit in Webflow. Content colours appear only inside them.
When real work is ready
Real reels and posts
Swap the hero reel for a real client ad: 9:16, 1080 × 1920, 8–15s loop, muted, with a poster frame and under 1.5MB.
Proof
Real faces and logos
Client logos greyscale on light and white on navy, about 32px tall. Testimonials need a photo, name, brand and one number.
Icons
24px grid, 1.8px stroke, round caps and joins, current colour. In tiles of 36–44px with a tinted fill.
11
Accessibility and CRO
What the page already does, so new sections keep doing it.
Accessibility
- Contrast: all text pairs pass AA (table in section 03). Indigo 500 is never used for small text.
- Focus: 2px indigo ring with 3px offset on every control, including option tiles.
- Targets: buttons 52–56px tall, inputs 52px, chips 38px with spacing.
- Forms: visible labels, “Optional” tags, errors announced and focused, the fix spelled out.
- Structure: one H1, real table markup with row headers, text equivalents for icon-only marks.
- Motion: reduced-motion stops every loop and shows final states.
Conversion
- One goal: the free audit, with the same label in 9 places, including the navbar on every breakpoint.
- CTA in the first screen at 1512 × 900 and 393 × 852, with three risk reversals under it.
- Proof straight after the hero, then a before/after reframe in sales terms.
- Objections answered: comparison table, what sets the price, who owns the ad account, contract length.
- Short form: one tap for step 1, five fields in all, phone with a reason, plan carried in from the card.
- Mobile: a sticky bar with the audit and WhatsApp, hidden while the form is on screen.
Tests to run after launch
One at a time, two weeks or 300 form starts each.
| Test | Variant | Measure |
|---|---|---|
| Hero headline | “More sales from Instagram and Facebook.” | Form starts per visit |
| Primary CTA | “Get my free audit” | Hero CTA clicks |
| Form step 1 | Ask for the Instagram handle first | Step 1 to submit rate |
| Price signal | Show “plans from ₹X a month” on Plans | Qualified audits booked |
12
Webflow build notes
The coded page uses Client-First style names so it ports section by section. Tokens become Webflow variables.
Variables
| Colour | color/fog color/ink color/indigo … one per token in section 03 |
| Font | font/display font/body font/mono |
| Size | size/container 1280, size/gutter 48 / 40 / 20 |
| Radius | radius/button 14, radius/card 22, radius/panel 36 |
| Space | space/section 128 / 96 / 80 / 64 |
Classes
- Sections:
section_hero,section_services,section_results… - Children:
hero_grid,service_visual,plan_price - Combos:
button is-secondary,plan is-featured - States set by script:
is-active,is-open,is-visible
Interactions
- Webflow Interactions: FAQ, mobile menu, navbar hairline on scroll, card hovers.
- Custom code (one small script): hero feed, counters, process stepper, sticky mobile bar, multi-step form.
- CSS sticky for the process visual and FAQ heading. No scroll libraries needed.
Form
- Fields:
goalbudgetservicesnamebrandphoneemail, hiddenplan - Send to Webflow Forms, then the CRM and a WhatsApp alert to the sales team.
- Track a Meta Pixel
Leadevent on success, mirrored through the Conversions API.
13
Page frames
The full landing page rendered at the three design widths. Scroll inside each frame. The live page also adapts between them.
Rendered from the live code with reduced motion, so counters and animations show their final state. The concept bar and sticky mobile bar are hidden in the frames.
14
Before launch
Everything marked Sample or Placeholder on the page, plus the wiring the preview leaves out.
- Confirm the positioning. growsales.io currently presents GrowSales as an AI sales assistant for WhatsApp and Instagram. This page sells the agency services in the brief.Decision
- Real numbers for the proof band (revenue driven, brands, average ROAS, monthly views).Sample
- Three approved case studies with client names, figures and the services used.Sample
- One client testimonial with photo, name, brand and a number.Placeholder
- Client logos to add beside or instead of the industry marquee.Missing
- WhatsApp number for the chat buttons (wa.me link with a pre-filled message).Missing
- Form backend, Meta Pixel and Conversions API, and a thank-you state that books the call.Missing
- Privacy and Terms pages, a 1200 × 630 share image, then remove the noindex tag and the concept bar.Missing