Brand system ↓

TapSocial brand system

Built to move.

Kinetic Editorial Pop: a design movement combining operator confidence, editorial intelligence, material clarity, and motion that makes growth systems visible.

02 / Naming

One name, two contexts

The artwork is all caps. In sentences, headlines, captions, and conversation, write the company name as TapSocial with a capital T and capital S.

Logo artwork
TAPSOCIAL

All caps, exactly as supplied in the official SVG lockup.

Written name
TapSocial

Capital T, capital S, no space. Use this form in all written copy.

Do not write
TapsocialMissing the capital S
Tap SocialNever add a space
tapsocialNever all lowercase

03 / Art direction

Kinetic Editorial Pop

Our movement combines the directness of editorial neo-brutalism with a more polished, kinetic system. Color creates momentum, structure creates trust, and every interaction reveals how the system works.

The TapSocial movement
Kinetic Editorial Pop

TapSocial turns growth systems into visual culture. Bold display typography creates certainty. Editorial serif type brings judgment and humanity. Saturated fields, hard depth, and meaningful motion make performance feel tangible.

Bakbak One / AuthorityDeclares.
Playfair Display / JudgmentInterprets.
Inter / Operational clarityExplains what happens next.

Structured exuberance

Color can be loud because the underlying grid, spacing, and hierarchy remain disciplined.

Visible mechanics

Motion shows signals converging, channels connecting, value compounding, and systems learning.

Editorial contrast

Use one unified Playfair heading for editorial moments. Reserve Bakbak for short labels, cards, and compact declarations.

04 / Palette

Our colors

Use bold color fields, not timid accents. Every primary color has an intentional secondary companion for buttons, shadows, progress, and motion. Select any swatch to copy its hex value.

Primary
Secondary
Foundation

05 / Interaction

Buttons move with intent

Primary buttons use the Thirdwave Labs tilt rhythm: a borderless, square face rests at ±1°, then flips to the opposite angle and lifts on hover or keyboard focus. The hard shadow expands and changes accent without scaling the button. Compact header actions use a 2px lift; standard and large calls to action use 4px.

Gold / Slide 01−1° → +1° · Dark → Magenta
Cyan / Slide 02+1° → −1° · Plum → Gold
Green / Slide 03−1° → +1° · Dark → Cyan
Magenta / Slide 04+1° → −1° · Petrol → Gold
Indigo / Slide 05−1° → +1° · White → Cyan

Motion tokens: compact +1° → −1°, −2px lift, 4px → 6px shadow; standard ±1° flip, −4px lift, 6px → 10px shadow; large −1° → +1°, −4px lift, 8px → 12px shadow. Pressing compresses to a neutral angle with a 2px shadow.

07 / Iconography

One visual language

Use Google Material Symbols Rounded for actions, concepts, and status. Keep platform marks authentic. Pair clear 24px-grid symbols with TapSocial color and hard-shadow depth.

Target
Campaign
Growth
Intelligence
Analytics
Action

Icon rules

  • Use Material Symbols Rounded for functional and conceptual icons.
  • Use official brand artwork for Meta, Google, TikTok, and other platforms.
  • Default to outlined icons at weight 500; reserve filled icons for selected or urgent states.
  • Use 20px inside compact controls, 24px by default, and 32px for feature moments.
  • Give interactive icons an explicit accessible name. Hide decorative icons from assistive technology.
  • Use one primary color plus a distinct companion hard shadow. Never introduce off-palette icon tiles.
20 / Compact
24 / Default
32 / Feature

08 / Typography

Force meets finesse

Playfair Display carries page heroes, section headings, and major calls to action as one unified editorial voice. Bakbak One remains for short labels, cards, and compact declarations. Inter stays out of the way for body copy and interface detail.

Display / Bakbak One

Lead gen done right.

Use for punchy labels, compact card titles, and short declarations. Keep it out of split or staggered page headings.

Bakbak One on Google Fonts →
Editorial / Playfair Display

Clarity over chaos.

Use for the complete text of page heroes, section titles, major calls to action, quotes, and editorial headings. Do not split a single heading between Playfair and Bakbak.

Playfair Display on Google Fonts →
Performance with a point of view.
How they interact
  • Set each major editorial heading entirely in Playfair Display.
  • Do not stagger or split one heading between Playfair and Bakbak.
  • Reserve Bakbak One for compact labels, card titles, and short declarations.
  • Use Inter for body copy and controls. Playfair may be Roman or italic, with italic preferred for expressive campaign moments.

09 / Motion

Show how the system works

Motion is informational, not ornamental. The homepage JavaScript system uses stronger brand-color lines, visible nodes, and purposeful geometry to explain five core growth behaviors.

Converge

Signals and demand move toward a qualified outcome.

Compound

Value accumulates in visible, accountable increments.

Connect

Channels operate as one coordinated growth system.

Focus

Noise falls away as signals resolve into an audience.

Learn

Every interaction updates an accountable learning system.

Meaning before movement.

Animation earns its place by clarifying a mechanism, state change, or cause-and-effect relationship.

See the live hero

Motion grammar

  • Use 2–4px rounded lines with decisive contrast against the active field.
  • Use primary brand colors for the mechanism and a companion color for nodes, depth, or progress.
  • Animate convergence, connection, accumulation, focusing, or learning. Avoid decorative drift.
  • Keep diagrams behind copy and inside a dedicated visual zone.
  • Pause animation when requested and honor reduced-motion preferences.
  • Use one primary kinetic idea per viewport. Do not make every object move.

Unified float

Distance
Use a restrained 4px vertical lift. Float should add life without changing the composition.
Timing
Use an 8 seconds ease-in-out loop with negative delays so neighboring objects never move in unison.
Hover
Pause on hover and keyboard focus, then use a compact 3px intentional lift rather than continuing the ambient loop.
Scale
Keep ambient scale fixed. Interactive emphasis may reach 1.02 at most.
Accessibility
Stop the loop under reduced motion and preserve the original resting tilt.
Hover or focus an object to pause and lift

Floaties library

Objects with a job

Floaties are the shapes, graphs, and animations that live around content. They add energy, signal meaning, and help frame a message without becoming the message.

Use the library, not random shapes

Choose a Floaty because its meaning supports the nearby content. Keep it outside the reading path, distribute objects around the composition, and use the Unified Float behavior when it moves.

Curation rules

  • One dominant Floaty idea per content zone.
  • Pair brand colors with a distinct companion color.
  • Never overlap copy, controls, faces, or key imagery.
  • Hide secondary Floaties on small screens.
  • Retire an object here when it no longer has a role on the site.
Coresignal

Signal

Concentric targeting rings with a resolved center point.

Use for
Audience, targeting, focus, qualification, and a signal becoming clear.

Coregrowth-bars

Growth Bars

Three accountable increments rising toward an outcome.

Use for
Growth stages, compounding value, performance, momentum, and progress.

Accentdiamond

Layered Diamond

A crisp decision tile with visible hard-shadow depth.

Use for
Milestones, options, decisions, stage changes, and compact corner accents.

Accentorb

Orb

A simple point of energy that balances a larger composition.

Use for
Small counterweights, waypoints, sparks of activity, and visual punctuation.

Coreorbit-ring

Orbit Ring

A stable system with one active point moving around it.

Use for
Systems, cycles, orchestration, learning loops, and activity around a center.

Accentspark

Spark

A bright four-point flash for a moment worth noticing.

Use for
Ideas, highlights, launches, key claims, and small moments of delight.

Corenetwork

Network

Distinct nodes connected into one coordinated system.

Use for
Teams, channels, partnerships, connected platforms, and coordinated execution.

Specialiststack

Stack

Three offset layers showing depth, sequence, or handoff.

Use for
Systems architecture, deliverables, process layers, and multi-step execution.

Use sparinglytriangle

Triangle

A directional wedge that introduces energy and forward movement.

Use for
Direction, progression, transitions, and compositions that need a sharp counterpoint.

How we generate them

One system, two scales

Our animated sections and Growth Experience box toppers come from the same visual grammar. Start with a real growth mechanism, reduce it to a few geometric layers, then animate only the part that explains the idea.

Section scale

Kinetic scene

Use a composed visual zone for heroes and major transitions. Combine three to five layers at different depths, but give the scene one dominant behavior.

16:9 / fluid
Card scale

Box topper

Use a shallow 780 × 164 SVG banner to allude to the card’s theme before the copy begins. The still frame must communicate the idea; motion adds life rather than meaning.

780 × 164
1

Name the mechanism

Choose one verb: converge, connect, compound, focus, learn, flow, or orbit.

2

Draw the still

Build a complete static composition first. If it needs motion to make sense, simplify it.

3

Assign layers

Use a dark foundation, two or three accents, and one companion edge or hard shadow.

4

Animate one cause

Pulse a decision point, flow a path, lift a wave, or orbit a signal. Keep everything else calm.

5

Test the frame

Verify mobile cropping, contrast, paused and reduced-motion states, and zero layout overflow.

<section class="kinetic-section">
  <div class="kinetic-art" aria-hidden="true">
    <span class="kinetic-shape kinetic-network">…</span>
    <span class="kinetic-shape kinetic-spark"></span>
  </div>
  <div class="section-content">…</div>
</section>

/* Story lives in variables, not new components. */
.kinetic-shape {
  --motion-duration: 8s;
  --motion-delay: -2s;
  pointer-events: none;
}

Production specification

Structure
Position the art layer absolutely inside an isolated, clipped section. Keep content in a higher stacking layer.
Geometry
Use circles, nodes, rounded 2–4px paths, waves, bars, grids, sparks, and hard-edged panels.
Palette
Start on Dark or Navy. Use two or three primary accents and one secondary companion for depth.
Timing
Favor 6–12 second ambient loops with negative delays. Offset neighboring objects so they never move in unison.
Behavior
Animate transform, opacity, or stroke dash only. Avoid layout properties and large scale changes.
Accessibility
Decorative scenes use aria-hidden="true". Stop every loop under reduced motion and preserve the same readable still frame.
Box toppers
Export at 780 × 164, render at 82px desktop and 72px mobile, use empty alt text, and keep labels out of the artwork.

10 / Watermark

The signal in the background

The SVG mark can become an oversized watermark that gives layouts depth without competing with the message.

SVG watermark

Stay visible without shouting.

Crop the mark confidently at an edge. Keep it subtle and preserve the original proportions.

Download SVG ↓
Watermark rules
  • Use 6-12% opacity on light fields.
  • Use 10-20% opacity in white on dark fields.
  • Scale proportionally and allow edge cropping.
  • Keep the watermark decorative with empty alt text.