Skip to content
Start a project
(Adsflux) Brand systemElectric Editorial — living referenceBuilt from the same tokens as the site

Positioning

We make brands impossible to ignore.

Hero line

Good marketing gets attention. Great creative makes people care.

  • Paper Cream
  • Electric Cobalt
  • Soft Blue
  • Dusty Peach
  • Ink Black
  • Signal Orange

(02)Color

Six colors. One loud one.

Paper Cream leads every page. Electric Cobalt marks the big moments. Signal Orange is a controlled spark — fills and shapes, never text on light. In dark mode each tone has a Midnight Editorial counterpart; switch the theme to see it.

Showing Electric Editorial — light mode

  • 55% of the page

    Paper Cream

    Default page background. Leads every page.

    #F5F0E7
    --brand-cream
  • 16% of the page

    Electric Cobalt

    Big moments: heroes, manifesto, primary CTAs.

    #263BDB
    --brand-cobalt
  • 10% of the page

    Soft Blue

    Supporting bands and compositions.

    #DCE5FF
    --brand-blue
  • 8% of the page

    Dusty Peach

    Supporting bands, warm counterpoint.

    #E8B8A5
    --brand-peach
  • 6% of the page

    Ink Black

    Typography. One gallery band per page, max.

    #171717
    --brand-ink
  • 5% of the page

    Signal Orange

    Controlled accent: fills, bursts, stickers.

    #FF633E
    --brand-orange
  • Ink soft#4F4D4B · --brand-ink-softMuted text on cream, blue, peach
  • Cream soft#CCCCE5 · --brand-cream-softMuted text on cobalt
  • Cream dim#A7A49E · --brand-cream-dimMuted text on ink

Target balance

Share of page surface, approximate
  • 55%Paper Cream
  • 16%Electric Cobalt
  • 10%Soft Blue
  • 8%Dusty Peach
  • 6%Ink Black
  • 5%Signal Orange

Cream-led page; cobalt for big moments; blue and peach as supporting bands; orange controlled; ink sparing — one band per page at most.

Contrast, measured

WCAG 2.x · AA = 4.5 body / 3 large
SampleText on backgroundRatioAA 4.5Rule
Ink on Cream15.79PassBody text
Ink on Soft Blue14.25PassBody text
Ink on Dusty Peach10.10PassBody text
Ink soft on Cream7.41PassBody text
Cream dim on Ink7.21PassBody text
Cream on Cobalt6.77PassBody text
Cobalt on Cream6.77PassBody text
Cobalt on Soft Blue6.11PassBody text
Ink on Orange6.07PassBody text
Cream soft on Cobalt4.88PassBody text
Cobalt on Dusty Peach4.33Large onlyLarge text only
Orange on Cream2.60FailNever as text — fill only
Orange on Cobalt2.60FailShapes only
Ink on Cobalt2.33FailNever
Cream on Soft Blue1.11FailNever

Six tones

data-theme="…" · <Section tone>
  • data-theme="cream"

    Cream, in tone.

    Default. Most of every page.

  • data-theme="cobalt"

    Cobalt, in tone.

    Hero moments, manifesto, contact.

  • data-theme="blue"

    Soft Blue, in tone.

    Supporting band — work, details.

  • data-theme="peach"

    Peach, in tone.

    Supporting band — people, quotes.

  • data-theme="orange"

    Orange, in tone.

    Rare and loud — tickers, stickers.

  • data-theme="ink"

    Ink, in tone.

    One gallery wall per page, max.

(03)Type

Grotesk says it. Serif makes you feel it.

Four families with one job each. The signature move: an <em> inside any heading switches to Instrument Serif italic.

Everything a brand needs, under one roof.

Space Grotesk 500 · −0.025em+ <em> → Instrument Serif italic · 1.08em

  • Instrument Serif

    --font-display400 roman + italic

    Display lines, hero punch, the <em> accent

    Make people care.

  • Space Grotesk

    --font-heading500 · 700

    Section headings, buttons, navigation

    Strategy that earns attention.

  • DM Sans

    --font-body400 · 500 · 600

    Body copy, descriptions, forms

    Strategy, storytelling and performance — one growth partner for ambitious brands.

  • DM Mono

    --font-mono400 · 500

    Labels, indexes, metadata, captions

    (01) Campaign — 9:16 — 2026

Type scale

Fluid clamp() · 360 → 1440px
  1. Display--text-displaySerif 400 · 52→176px · 0.9

    Ignore this.

  2. 4xl--text-4xlSerif 400 · 44→100px

    Made to be felt.

  3. 3xl · h2--text-3xlGrotesk 500 · 32→60px

    Campaigns that earn the scroll.

  4. 2xl · h3--text-2xlGrotesk 500 · 24→36px

    Performance marketing

  5. xl · h4--text-xlGrotesk 500 · 20→26px

    Creative that converts

  6. lg · lead--text-lgDM Sans 400 · 18→22px

    We combine strategy, storytelling and performance to help ambitious brands grow.

  7. base · body--text-baseDM Sans 400 · 17px · 1.6

    Short paragraphs. Say one thing well, then stop — the work should do the talking.

  8. sm · meta--text-smDM Sans 400 · 14px

    Captions, meta and supporting detail.

  9. xs · label--text-xsDM Mono 400 · 12px · caps · 0.06em

    (04) Selected work

(04)Controls

Sharp frames, pill controls.

Buttons and tags are the only rounded shapes in the system. Every control re-themes with its tone — no per-tone variants.

data-theme="cream" — the default
primary
secondary
ghost
data-theme="cobalt"

Primary flips to cream; hover goes orange.

data-theme="ink"

Primary is orange — ink’s accent.

data-theme="orange"

Primary is ink; hover goes cobalt.

Badge

outline · solid · highlight · dot
OutlineSolidHighlightWith dotLive

Eyebrow

index → (01)

(01)Services

(04)Selected work

Without an index

Dropdown

WAI-ARIA disclosure

Escape closes and returns focus. Links highlight orange on hover.

Stamp

Decorative · aria-hidden

Burst

shape-1 · shape-2 · current · 8 / 12 rays · spin
shape-1
shape-2
current · 12
spin

(05)Forms

Forms that read like a page.

Editorial underline inputs: large DM Sans, mono labels, no boxes. Labels, hints and errors are wired by <Field>.

Not connected

The live ContactForm from @/features/contact. It validates locally, but submits nowhere until VITE_CONTACT_ENDPOINT is set — until then a submit shows the “not configured” message.

States

hint · error

Optional — helps us prepare.

On cobalt — the home contact section

Lines turn cream, placeholders cream-soft, and errors switch to the on-dark danger tint (5.59:1).

Live form

On cream

Helps us recommend the right team.

(06)Imagery

Placeholders with a point of view.

Until real campaign photography exists, every media slot shows an art-directed PlaceholderArt composition in brand tones — never stock imagery.

  • (01) art="sun" · artTone="peach"

  • (02) art="arch" · artTone="cobalt" · isVideo

  • (03) art="stripes" · artTone="blue"

  • (04) art="halftone" · artTone="cream"

  • (05) art="burst" · artTone="orange"

  • (06) art="stack" · artTone="ink"

MediaFrame ratios

Sharp corners · object-fit: cover
  • 1/1
  • 4/5
  • 3/4
  • 2/3
  • 9/16
  • 3/2
  • 4/3
  • 16/10
  • 16/9
  • 21/9

Real media replaces the art by passing src (image) or videoSrc + poster. Videos autoplay muted only while visible (never under reduced motion), with play/pause and sound controls.

(07)Modules

Modules, not cards.

Feature components composed from the primitives above. Each owns its layout, tone rhythm and motion.

Sample content

Service modules

@/features/services · MODULE_RHYTHM

  1. Digital marketing strategy

    Growth plans built on audience truth, not channel habits.

    • Market & audience research
    • Channel planning
    • Go-to-market
    • Measurement frameworks

  2. Performance marketing

    Paid media engineered for profitable, compounding growth.

    • Meta & Google Ads
    • Programmatic
    • Conversion optimisation
    • Attribution

  5. Branding & brand strategy

    Identities with a point of view — and the system to scale it.

    • Positioning
    • Naming
    • Visual identity
    • Brand guidelines

Campaign collage

@/features/showcase

Stills (5)

  • Eau So Haute "Go Cocoa" fragrance mist bottle among broken chocolate, coffee beans and dripping caramel on a red set.
    (01) Product adsA gourmand mist, art-directed in chocolateFragrance brand — Product ad · 4:5
  • Two red altr caffeine-mint tins, one open, with white mints scattered on a dark surface.
    (02) Brand campaignsCaffeine mints, shot like a hero productFunctional confectionery — Key visual · 16:9
  • A woman massages oil into her scalp beside a bottle of Herbiqroots 18 Herbs Hair Oil, in warm natural light.
    (03) Social creativesAn Ayurvedic ritual, told in one frameAyurvedic haircare — Social ad · 4:5
  • Eau So Haute "Sundress" fragrance mist on a concrete floor in front of sculptural grey hexagon blocks.
    (04) Performance adsA price-led ad that still looks premiumFragrance brand — Performance ad · 4:5
  • A model wrapped in deep red fabric, eyes hidden, holds a tub of BioPods liquid detergent pods against her shoulder.
    (05) Brand campaignsLaundry, styled like a fashion campaignHome care brand — Campaign photography · 4:5

Case study feature

@/features/work
01
Brand launch2026

D2C skincare brand

A first drop people queued for.

The challenge
A new brand in a crowded category, with no audience and a fixed launch date.
What we made
  • Brand identity
  • Launch film
  • Creator programme
  • Paid social

Testimonial section

Sample content

Adsflux didn’t just run our ads. They rebuilt how our brand shows up — and the numbers followed.

FounderD2C skincare brand
  • (02)

    One team for strategy, creative and media. Fewer meetings, sharper work, faster growth.

    Head of MarketingFintech app
  • (03)

    The first agency that pushed back on our brief — and they were right.

    CMOLifestyle retailer

Pricing table

@/features/pricing

Sample contentTier names, prices and inclusions are layout placeholders.

  • Launch

    For brands getting their first growth engine right.

    ₹1.5L/ month

    • Strategy sprint
    • One paid channel
    • Monthly creative pack
    • Monthly reporting
    Start with Launch

  • Growth

    Most chosen

    Full-funnel strategy, creative and performance under one roof.

    ₹3.5L/ month

    • Everything in Launch
    • Multi-channel performance
    • UGC & creator programme
    • Weekly optimisation
    Start with Growth

  • Partner

    An embedded team for ambitious brands scaling across markets.

    Custom

    • Everything in Growth
    • Brand & campaign production
    • International markets
    • Dedicated pod
    Talk to us

(08)Motion

Motion that arrives, then gets out of the way.

Expo-out easing, short distances, one-time entrances. Scroll effects run on lazily loaded GSAP; everything respects reduced motion.

TextRevealWords rise out of a mask

StaggerSiblings 80ms apart
  • Strategy
  • Storytelling
  • Performance
  • Growth
ImageRevealClip wipe + settling zoom
ParallaxScroll to see layers drift · ±90px
90px
0px
-90px
ScrollHighlightText — scrubbed to scroll

Scroll slowly. Each word earns its place, the way every brand moment should.

  • Strategy
  • Storytelling
  • Performance
  • India
  • Worldwide
Arrow spinButton withArrow · 600ms expo
Burst turnWordmark inside a link · 45°
Collage liftOffset print shadow + media zoom
Hover the piece

Motion tokens

Mirrored in src/lib/motion.ts
--duration-fast
150ms
Hover color, underline
--duration-base
280ms
Buttons, dropdown panel
--duration-slow
600ms
Arrow spin, burst turn, lift
--duration-reveal
1000ms
Entrances, image wipes
--ease-out-expo
cubic-bezier(0.16, 1, 0.3, 1)
Everything that arrives
--ease-standard
cubic-bezier(0.2, 0, 0, 1)
State changes

Reduced motion

prefers-reduced-motion: reduce
  • MotionConfig reducedMotion="user": entrances keep their fade, drop the movement.
  • Parallax and ScrollHighlightText render static — GSAP never loads.
  • Marquee stops and wraps; the duplicate track is removed.
  • Burst and Stamp stop spinning; videos show the poster with controls.
  • Smooth anchor scrolling switches to instant.

Closing section · CtaSection

Let’s make it impossible to ignore.

The closing block on every page: one big serif line, one primary action.

Start a projectBack to home