Stratum Fintech Ops 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

# Stratum — Fintech Ops Platform Template

A premium single-page website template built with **Tailwind CSS only** (via CDN), vanilla HTML, and scoped vanilla JS. No frameworks, no build step.

Brand used in the template: **Stratum** — a fictional vertical fintech operations platform unifying treasury, bill pay, and spend control for scale-stage finance teams.

## Design direction

**Neo-Brutalism + Editorial Modern** — a deliberate fusion, not a decoration mix.

- **Neo-Brutalist geometry:** 2px solid black borders, square radii, hard offset shadows (4 / 8 / 12px), press-down hover/active interactions, flat bright accents.
- **Editorial Modern rhythm:** Archivo display type (oversized, tight-tracked), JetBrains Mono for technical labels and metadata, numbered section eyebrows (`/ 01 — …`), generous whitespace, and a confident reading hierarchy.
- **Vertical fintech voice:** realistic money-motion content — cash position, approval routing, FX hedges, reconciliation rates, close-time reduction — instead of generic SaaS copy.

The combination stays coherent because both directions share the same disciplined grid, the same restrained accent palette, and the same monospace metadata voice.

## Design system

A single token set, applied consistently across every section.

| Token | Value | Use |
| --- | --- | --- |
| ink | `#0A0A0A` | foreground, borders, primary surfaces |
| paper | `#FBFAF7` | page background |
| cream | `#F4F1EA` | secondary surfaces / panels |
| lime | `#C6F24E` | primary accent / CTA highlight |
| ember | `#FF4FA3` | attention / approval emphasis |
| sky | `#00C2FF` | informational accent |
| forest | `#00A86B` | success / live status |

- **Type:** Archivo (display, 500–900) · Inter (body, 400–700) · JetBrains Mono (labels/metadata, 400–700).
- **Geometry:** 2px borders, square corners, offset shadows `4px`/`8px`/`12px`, `.press` translate interaction.
- **Spacing:** 4px-based rhythm, max container `1320px`, mobile-first padding `px-5 sm:px-8`.

## Structure

```text
stratum/
├── pages/
│   └── index.html          # Full landing page (11 composed sections)
├── assets/
│   ├── icons/
│   │   └── logo.svg        # Logo mark (favicon)
│   └── images/
│       └── og-image.svg    # Open Graph / preview graphic
├── preview.html            # Template gallery shell (overview + sections index)
├── metadata.json
└── README.md
```

There are no external image assets. The treasury panel, approval graph, sparkline, logo, and OG image are all hand-built inline SVG / HTML so they stay crisp at every viewport and are editable directly in the markup. No photography dependencies.

## Sections

| # | Section | Purpose |
| --- | --- | --- |
| 01 | Navbar + mobile menu | Sticky nav, scoped JS menu, brand mark |
| 02 | Hero | Editorial split: copy + treasury command-surface visualization with live sparkline and floating approval/FX cards |
| 03 | Logos marquee | Trust strip of fictional customer brands |
| 04 | Three pillars | Staggered offset cards: Treasury / Bill pay / Spend control |
| 05 | Bento capabilities | Policy-as-code approval-routing graph + capability tiles |
| 06 | Workflow | Five-step capture → reconcile sequence with timings |
| 07 | Metrics band | Customer outcomes on a dark divided grid |
| 08 | Proof | Featured pull-quote + secondary testimonial cards |
| 09 | Pricing | Three-tier, cash-managed pricing with featured Growth plan |
| 10 | FAQ | Scoped single-open accordion (ARIA + keyboard) |
| 11 | CTA + Footer | Dark conversion panel + five-column footer with live status |

## Notable design decisions

- **Product visualization over decoration.** The hero's right column is a believable treasury panel (status header, balance, animated sparkline, account ledger, sync footer) flanked by two floating contextual mini-cards (approval needed / FX hedge) — not a generic gradient blob.
- **Policy-as-code graph.** The bento feature card visualizes an approval routing graph (trigger → policy → route → pass) with an evaluation-time label, reinforcing the "infrastructure, not a spreadsheet" message.
- **Staggered offsets.** Pillar and workflow cards use progressive `mt` offsets to break the predictable equal-grid rhythm without breaking alignment.
- **Cash-managed pricing.** Plans are priced by managed cash, not per seat — reinforcing the product positioning in the pricing architecture itself.
- **Section numbering.** Mono `/ 01 — …` eyebrows give editorial structure and aid scanning.

## Responsive behavior

Mobile-first, designed from **320px through 1920px+**:

- Below `lg`, the hero stacks vertically and the floating mini-cards hide (they're a desktop enhancement).
- The bento grid collapses from 4 columns → 2 → 1 with the large feature spanning full width.
- The workflow grid goes 5 → 2 → 1, keeping step order and timings legible.
- Metrics and pricing reflow to 2-column then 1-column with maintained dividers.
- The navbar collapses to a scoped mobile menu with safe open/close behavior.
- No accidental horizontal scrolling — `overflow-x-hidden` on the body and careful use of `max-w` containers.

## Accessibility

- Semantic landmarks (`header`, `main`, `section`, `footer`, `nav`, `article`, `figure`).
- Skip-to-content link.
- Correct heading hierarchy (single `h1`, descriptive `h2` per section).
- Accordion uses `aria-expanded`, `aria-controls`, `role="region"`, keyboard-operable buttons, single-open behavior.
- Mobile menu button toggles `aria-expanded` and swaps icons.
- Visible focus states via Tailwind defaults; interactive cards are focusable links.
- SVG sparkline and OG image carry `role="img"` and `aria-label`.
- `prefers-reduced-motion` disables marquee, sparkline draw, and all transitions.

## Interactions (scoped vanilla JS)

Only two small scoped scripts — no libraries:

1. **Mobile menu** — toggle open/close, swap icon, update `aria-expanded`, auto-close on link click.
2. **FAQ accordion** — single-open, CSS-grid `0fr → 1fr` panel animation, chevron rotation, ARIA state syncing.

CSS-only interactions: `.press` hover/active translate + shadow swell, `.link-underline` grow, `.live-dot` pulse, marquee, sparkline draw.

## Usage

Open `pages/index.html` directly in a browser, or serve the directory with any static server:

```bash
cd Tailwind/Templates/stratum
python3 -m http.server 8080
# visit http://localhost:8080/pages/index.html
```

`preview.html` is the template gallery shell — open it for an overview and a clickable index of every section. Tailwind is loaded from the CDN, so there is no build step and no `node_modules`.

## Customization

- **Rebrand:** swap the `Stratum` wordmark, the SVG logo (`assets/icons/logo.svg`), and the accent tokens in the `tailwind.config` `colors` block at the top of `pages/index.html`.
- **Re-theme:** the entire palette is defined once in the Tailwind config + `:root`; changing `lime`/`ember`/`sky` re-colors every component consistently.
- **Add a page:** duplicate `pages/index.html`, keep the shared `<head>` + navbar + footer, and swap the `<main>` content.

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

# AGENTS.md — Stratum Fintech Ops Platform

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

## What this template is

A premium single-page website template built with **Tailwind CSS only**(via CDN, vanilla HTML,and scoped vanilla JS. No frameworks, no build step. Brand: **Stratum** — a fictional vertical fintech operations platform unifying treasury, bill pay,and spend control for scale-stage finance teams.



## Design direction

**Neo-Brutalism + Editorial Modern** — a deliberate fusion: Neo-Brutalist geometry(2px solid black borders, square radii, hard offset shadows(4/8/12px), press-down hover/active interactions, flat bright accents) + Editorial Modern rhythm(Archivo display type, JetBrains Mono labels/metadata, numbered section eyebrows `/ 01 — …`, generous whitespace,and a confident reading hierarchy. Tokens: ink `#0A0A0A`, paper `#FBFAF7`, cream `#F4F1EA`, lime `#C6F24E`(primary accent), ember `#FF4FA3`, sky `#00C2FF`, forest `#00A86B`(success/live status.



## File layout

```
stratum/
├── pages/
│   └── index.html          # Full landing page (11 composed sections)
├── assets/
│   ├── icons/logo.svg
│   └── images/og-image.svg
├── preview.html            # Template gallery shell
├── metadata.json
└── README.md
```

No external image assets — the treasury panel, approval graph, sparkline, logo,and OG image are all hand-built inline SVG/HTML,and editable directly in the markup.



## Sections

Navbar + mobile menu, Hero(editorial split with treasury command-surface visualization + floating approval/FX mini-cards), Logos marquee, Three pillars(staggered offset cards: Treasury/Bill pay/Spend control, Bento capabilities(grid with policy-as-code approval-routing graph), Workflow(five-step capture→reconcile with timings), Metrics band(dark divided grid), Proof(testimonials, Pricing(three-tier cash-managed with featured Growth plan), FAQ(scoped single-open accordion,and CTA + Footer(dark conversion panel + five-column footer with live status.

## Interactivity (scoped vanilla JS)

Only two small scoped scripts — no libraries: (1) mobile menu toggle(aria-expanded, icon swap, auto-close on link click), (2) FAQ accordion(single-open, CSS-grid `0fr→1fr` animation, chevron rotation, ARIA state sync. CSS-only: `.press` hover, `.link-underline` grow, `.live-dot` pulse, marquee, sparkline draw.



## How to adapt it

1. **Rebrand**: swap the Stratum wordmark, the SVG logo (`assets/icons/logo.svg`),and the accent tokens in the `tailwind.config` `colors` block at the top of `pages/index.html`.


2. **Re-theme**: the entire palette is defined once in the Tailwind config + `:root`;changing `lime`/`ember`/`sky` re-colors every component consistently.



3. **Add a page**: duplicate `pages/index.html`, keep the shared `<head>` + navbar + footer,and swap the `<main>` content.



## Do not

- Do not introduce a framework, a build step, or photography dependencies—the visuals are inline SVG by design..
- Do not soften the Neo-Brutalist geometry(offset shadows, 2px borders, press interactions) — it is the design language..



## Quality bar

Semantic landmarks, skip link, single `h1`, descriptive `h2` hierarchy, accordion ARIA(`aria-expanded`/`aria-controls`/`role="region"`, keyboard-operable, single-open, mobile menu `aria-expanded`, visible focus states, SVG sparkline and OG image `role="img"` + `aria-label`, `prefers-reduced-motion` disables marquee/sparkline/transitions. Validate with `python3 scripts/tooling/validators/validate.py` after changes.