Atlas Analytics Platform

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

# Atlas Analytics Platform — Template

A flagship **11-page** Tailwind CSS product-analytics application template for **Atlas Analytics**, a fictional enterprise analytics platform. Built in a **Minimal Editorial Analytics** design language — the opposite of a glassy, neon, AI-aesthetic dashboard. Tailwind CSS (via CDN) + vanilla HTML + scoped vanilla JS. No frameworks, no build step.

The product brand is **Atlas Analytics**, and the logo mark is a hairline **[A]** (`assets/icons/logo.svg`).

> Atlas is a reference implementation for **composition** — eleven independently-usable application pages sharing one shell, demonstrating how dozens of small, reusable pieces combine into a coherent product UI without a framework, build system, backend, or JavaScript application.

## Design language

Minimal, light, editorial, data-dense — closer to a refined analytics product interface than a decorative marketing template:

- Neutral-first palette: canvas `#ffffff`, near-black text `#111111`, soft gray secondary `#6b7280`, muted `#9ca3af`, and a 16-step gray ramp
- A single controlled accent: **blue `#2563eb`** (used only for interactive emphasis, links, primary actions and chart data — never as decoration)
- Semantic status colors used sparingly: success `#16a34a`, warning `#d97706`, danger `#dc2626`, info `#0ea5e9`
- **Inter** for display + body; **JetBrains Mono** for metrics, labels and metadata
- 1px hairline borders (`#e5e7eb`), small radii (4–6px), restrained shadows (`0 1px 2px rgb(0 0 0 / 0.04)`)
- Typography-driven hierarchy, generous-but-intentional whitespace, controlled content density
- **No** neon, purple-on-black, glassmorphism, frosted cards, gradient text, glowing borders, decorative blobs or animated backgrounds

## Design tokens

The system is expressed through CSS custom properties so the entire UI — including a calm dark mode — is a variable swap. The four-layer token model (primitive → semantic → template → component) follows the DevSnips shared design-token philosophy:

```css
:root {
  --ds-gray-0: #ffffff;        /* primitive neutrals */
  --ds-blue-600: #2563eb;      /* controlled accent */
  --ds-bg-canvas: #ffffff;     /* semantic background */
  --ds-text-primary: #111111;  /* semantic text */
  --ds-border-default: #e5e7eb;
  --template-sidebar-width: 248px;
}
[data-theme="dark"] {
  --ds-bg-canvas: #0a0a0a;
  --ds-text-primary: #f5f5f5;
  --ds-border-default: #262626;
}
```

Components consume semantic tokens (`.bg-canvas`, `.bg-surface`, `.text-primary`, `.text-secondary`, `.text-muted`, `.bd`, `.bd-subtle`, `.bd-strong`, `.accent`) so dark mode inverts cleanly without touching markup.

## Structure

```
atlas-analytics/
├── preview.html                # Template showcase — overview, page index, design-system summary
├── metadata.json
├── README.md
├── assets/
│   ├── icons/logo.svg          # [A] mark (hairline frame, geometric peak, blue apex dot)
│   └── images/og-image.svg     # Editorial OG card with headline + mini dashboard
└── pages/
    ├── index.html              # Overview — KPIs, WAU chart, top sources, activity feed
    ├── analytics.html          # Analytics explorer — metric trend, events table, distribution
    ├── funnels.html            # Funnel analysis — 4-stage funnel SVG, drop-off, comparison
    ├── cohorts.html            # Cohort analysis — triangular retention heatmap
    ├── retention.html          # Retention curves — overlapping curves by cohort
    ├── revenue.html            # Revenue analytics — MRR/ARR, trend, plan breakdown, transactions
    ├── reports.html            # Reports — saved report cards + builder prompt
    ├── dashboards.html         # Dashboards — custom widget grid + empty state
    ├── segments.html           # Segments — audience segment table with trends
    ├── events.html             # Events — event frequency table + naming guidance
    └── settings.html           # Settings — tabbed workspace/general/billing
```

No `css/`, `js/` or `images/` directories beyond `assets/` — all visuals are inline SVG and Tailwind. Charts are hand-built SVG (sparklines, area, bar, funnel, heatmap, retention curves) with a consistent restrained stroke language.

## The shared Atlas shell

Every page renders the same application chrome, inlined per page (copy-paste — no server includes, no framework):

```
┌─────────────────────────────────────────────────────┐
│ [A] Atlas    Prod ▾   ⌘K Search          ☾  JD      │  ← sticky topbar
├──────────────┬──────────────────────────────────────┤
│ ANALYZE      │  Overview / Home                     │
│  Overview    │  ───────────────────────────────     │
│  Analytics   │                                      │
│  Funnels     │          PAGE CONTENT                │
│  Cohorts     │                                      │
│  Retention   │                                      │
│  Revenue     │                                      │
│ BUILD        │                                      │
│  Reports     │                                      │
│  Dashboards  │                                      │
│  Segments    │                                      │
│  Events      │                                      │
│ CONFIGURE    │                                      │
│  Settings    │                                      │
└──────────────┴──────────────────────────────────────┘
```

Navigation uses plain relative links (`<a href="analytics.html">`), so the entire product is navigable by opening any single `pages/*.html` file directly in a browser.

### Responsive behavior

- **Desktop (`lg+`)**: full 248px sidebar + 64px topbar + wide content
- **Tablet / mobile (`<lg`)**: sidebar collapses into a slide-in drawer (hamburger toggle, `aria-expanded`/`aria-controls`, Esc + backdrop close); content reflows to a single column; KPI grids reduce; charts scale to width; tables become horizontally scrollable inside `overflow-x-auto`

## Pages

| # | Page | Purpose |
|---|------|---------|
| 01 | Overview | KPI grid with sparklines, weekly active-users area chart, top traffic sources table, recent activity feed |
| 02 | Analytics | Metric trend chart with range + metric switching (scoped JS), events table, event distribution bars |
| 03 | Funnels | 4-stage conversion funnel SVG with per-stage drop-off, step table and compare-period toggle |
| 04 | Cohorts | Triangular weekly retention heatmap with percentage cells and cohort size column |
| 05 | Retention | Overlapping retention curves by cohort with legend and N-week retention table |
| 06 | Revenue | MRR/ARR KPIs, revenue trend area chart, plan breakdown bars, recent transactions table |
| 07 | Reports | Saved report cards with schedule badges, last-run metadata and a report-builder prompt |
| 08 | Dashboards | Custom dashboard grid with widget cards and an empty-state prompt |
| 09 | Segments | Audience segment table with size, composition, status and trend sparkline |
| 10 | Events | Event frequency table, naming-convention guidance and sample event payloads |
| 11 | Settings | Tabbed (Workspace / General / Billing) form with toggles, selects, a danger zone |

## Notable design decisions

- **Light, not dark.** Atlas is deliberately the one light, minimal, data-dense product UI in the Tailwind templates — a deliberate contrast to stratum (neo-brutalist dark), meridian (hairline amber) and vesper (glassmorphism cyber). Dark mode is a calm inversion of the same system.
- **Charts are hand-built SVG**, not a charting library — sparklines, area charts, bar charts, a funnel, a triangular cohort heatmap and overlapping retention curves. The palette stays neutral with the blue accent reserved for the primary series.
- **Density over decoration.** Hierarchy comes from typography, spacing, alignment and 1px borders — not from cards, shadows or color blocks. Tables use light row dividers; KPIs are unboxed where a clean grid suffices.
- **One controlled accent.** Blue `#2563eb` appears only on interactive emphasis, links, primary buttons and chart data. Status colors (green/amber/red) appear only on status — never as decoration.
- **Scoped vanilla JS** — each interaction (drawer, command palette, tabs, metric/range switching, theme toggle) is a small IIFE, reduced-motion safe.

## Accessibility

Semantic landmarks (`header`, `nav`, `main`, `footer`), skip link, a single `h1` per page, ARIA on the drawer (`aria-expanded`/`aria-controls`), command palette (`role="dialog"`/`aria-modal`), settings tabs (`role="tablist"`/`tab`/`tabpanel`) and the theme toggle; visible focus rings in the accent color; `prefers-reduced-motion` disables transitions and the command-palette fade.

## Technology & dependencies

- Tailwind CSS via CDN (`https://cdn.tailwindcss.com`) with a small inline `tailwind.config` theme extension (semantic colors + font families)
- Google Fonts: Inter, JetBrains Mono
- Vanilla JavaScript (scoped IIFEs; `IntersectionObserver` not required)
- No build step, no npm, no frameworks

## Usage

Open `preview.html` for the template showcase, or open any page in `pages/` directly in a browser. All links use relative paths so the template works from the file system — download it, open `pages/index.html`, and navigate the entire product without a server.

> Atlas Analytics is a fictional brand created for this DevSnips template. All metrics, accounts, events and copy are invented.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

# AGENTS.md — Atlas Analytics Platform

Guidance for an AI agent adapting this template. Read this before editing.

## What this template is

A flagship **11-page** Tailwind CSS product-analytics application template for **Atlas Analytics**, a fictional enterprise analytics platform. Built in a **Minimal Editorial Analytics** design language — the opposite of a glassy, neon, AI-aesthetic dashboard. Tailwind CSS (via CDN) + vanilla HTML + scoped vanilla JS. No frameworks, no build step.

The template is a reference implementation for **composition**: eleven independently-usable application pages sharing one shell, demonstrating how dozens of small pieces combine into a coherent product UI without a framework, build system, backend, or JavaScript application.

## Design system

Minimal, light, editorial, data-dense: neutral-first palette (canvas `#ffffff`, near-black text `#111111`, soft gray secondary `#6b7280`), a single controlled accent **blue `#2563eb`** (used only for interactive emphasis, links, primary actions and chart data), semantic status colors used sparingly, **Inter** display/body + **JetBrains Mono** metrics/labels, 1px hairline borders, small radii (4-6px), restrained shadows. The system is expressed through CSS custom properties (primitive → semantic → template → component token model), so the entire UI — including a calm dark mode — is a variable swap. Components consume semantic helper classes (`.bg-canvas`, `.bg-surface`, `.text-primary`, `.text-secondary`, `.text-muted`, `.bd`, `.bd-subtle`, `.bd-strong`, `.accent`) so dark mode inverts cleanly without touching markup.



## File layout

```
atlas-analytics/
├── pages/            # 11 independently-usable application pages
├── assets/
│   ├── icons/logo.svg      # [A] mark
│   └── images/og-image.svg
├── preview.html            # Template showcase (overview + page index)
├── metadata.json
└── README.md
```

No `css/`, `js/` or `images/` directories beyond `assets/` — all visuals are inline SVG and Tailwind. Charts are hand-built SVG (sparklines, area, bar, funnel, heatmap, retention curves). Every page renders the same application chrome, inlined per page (copy-paste — no server includes. Navigation uses plain relative links (`<a href="analytics.html">`), so any single `pages/*.html` opens and navigates the whole product directly from the filesystem.

## Interactivity (vanilla JS, scoped IIFEs)

- **Theme toggle** — no-flash pre-paint detection + persisted toggle.
- **Sidebar drawer** (`<lg`) — hamburger toggle, `aria-expanded`/`aria-controls`, Esc + backdrop close.

- **Command palette** — `role="dialog"`/`aria-modal`, filter, Esc close, ⌘K open.


- **Settings tabs** — `role="tablist"`/`tab`/`tabpanel`; metric/range switching on the analytics page.



## How to adapt it

1. **Change the data**: replace the invented metrics, accounts, events and copy in the page markup. All data is fictional placeholders.
2. **Re-theme**: edit the custom property values in the `:root` (and `[data-theme="dark"]`) block that each page inlines — the blue accent and semantic tokens drive the whole UI.
3. **Add a page**: duplicate a `pages/*.html`, apply the shared Atlas shell (sticky topbar + sidebar), add a sidebar entry in that markup, and register it in `preview.html`'s page index.



## Do not

- Do not introduce a framework, a charting library, or a backend. All visuals are inline SVG and interactions are small IIFEs.
- Do not add neon, purple-on-black, glassmorphism, frosted cards, gradient text, glowing borders, decorative blobs or animated backgrounds — the restrained editorial data-dense language is deliberate.

- Do not break the `--ds-*` semantic token layer or hardcode hex values in components insteadof tokens.



## Quality bar

Semantic landmarks (`header`, `nav`, `main`, `footer`), skip link, a single `h1` per page, ARIA on the drawer, command palette and settings tabs, visible focus rings in the accent color, `prefers-reduced-motion` disables transitions. Validate with `python3 scripts/tooling/validators/validate.py` after changes.