code-anything.com
Log inStart free

Dashboard

Reach

Reach is a light, energetic analytics dashboard built for social media and marketing teams who report across many channels. A vibrant violet-to-rose gradient anchors the brand and primary data, while soft lavender-white surfaces and generous spacing keep follower growth, engagement rate, reach and post performance easy to scan in a single glance. It pairs an engagement-over-time line chart with a ranked top-posts feed and an audience breakdown so a team can move from headline numbers to "what worked" without leaving the page.

Bright, lively and confident — a marketing command center with a gradient pulse.

social-analytics.code-anything.app

Overview

LIVEAll channels · synced 8 min ago
AllInstagramTikTokYouTubeXLinkedIn
MK
FOLLOWERSGOAL 250K
248.6K
▲ +4.8%vs prev
ENGAGEMENT RATE
6.21%
▲ +0.7ptvs prev
REACH
1.92M
▲ +12.3%vs prev
POSTS PUBLISHED
37
▼ -3vs prev
ENGAGEMENT OVER TIME
119.4K interactions
This periodLast period
AUDIENCE BY AGE
Share of followers (%)
13–17
12
18–24
38
25–34
31
35–44
14
45–54
7
55+
4
Top postsby engagement
View all →
01
IG
Behind the scenes of our spring drop
Reel · 6d ago
184K
REACH
9.4%
ENG.
02
TT
3 editing tricks we use on every video
Video · 4d ago
142K
REACH
11.2%
ENG.
03
YT
Studio tour + the gear we actually use
Short · 8d ago
97K
REACH
7.1%
ENG.
04
X
Hot take: scheduling beats spontaneity
Post · 2d ago
61K
REACH
5.8%
ENG.
05
LI
How we doubled engagement in one quarter
Article · 11d ago
38K
REACH
4.3%
ENG.

Design rules

The system, applied to any site

Every rule below travels with the template — describe your tweaks and the agent keeps the system intact.

What it decides for you

  • Build on a soft lavender-white canvas (#FBFAFF) with pure white cards and 14px radius so the surface feels light and airy; never let cards sit edge-to-edge without breathing room.
  • Reserve the violet→rose gradient (from #7C3AED to #F43F5E) for the logo, the primary chart line and one hero metric only — everything else stays neutral so the gradient reads as the brand signal.
  • Use violet (#7C3AED) for primary data and selected states and rose (#F43F5E) for negative deltas; positive deltas use a calm green so the eye instantly sorts good from bad.
  • Keep platform/channel filters as text chips, not icons-only — selected chip filled with the accent, the rest outlined with a hairline border (#ECE7F6).
  • Set big metric values bold and tight (-0.02em tracking) and pair each with a small uppercase tracked micro-label above and a delta below; align all numerals with tabular figures.
  • Render charts as inline SVG with rounded line caps and a subtle gradient area fill; favour soft rounded bars over hard rectangles to match the friendly tone.

Ships with

Sidebar navTop bar with channel filter chipsKPI stat rowEngagement-over-time line chartTop posts feedAudience breakdown bar chart

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Inter

Body

Inter

Radius

14px

Explore palettes

Keep looking

More from the library

AuroraMarketing
Warm ArtisanMarketing
Sharp FadeBooking
CockpitDashboard

Make it yours in minutes.

Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.