{/* nav — three cells separated by rules, not by padding */}
{/* announcement — the band is full-bleed so its two rules cross the whole
viewport past the 1440 grid, while the hatch fill and the corner
notches stay on the grid. The notches land exactly where the vertical
rails meet the full-bleed rules, marking the junction instead of
running the rails through the band. */}
akta.pro
{/* hero */}
{/* panels — the panel sits in flow and sets the stage height; the two
cards flank it, overlapping its edges */}
{/* logo wall — the row is full-bleed so its rules cross the viewport,
while the cells sit on the 1440 grid. Every cell carries a flush
notch, so each divider is bracketed top and bottom where it meets the
row's rules. The wall is opaque and raised so it cleanly clips the
plate bleeding down from the stage above. */}
Private company data and signals API
{/* Separated by rules, not by a pipe glyph. A "|" is a character:
it carries its own font metrics, so it sits on a different
line-height from the mono labels either side and throws the
row's vertical centring.
A wrapped row at every width: 59 characters of mono need about
470px, so below sm the phrases reflow onto two lines. The
rules only appear from sm, where they all fit on one line — a
left rule on an item that has wrapped to the start of a new
line reads as a stray tick with nothing to its left. */}
{TAGLINE.map((item, i) => (
0 && RULE_L_SM,
)}
>
{item}
))}
{/* Background plate — a mat the cluster sits on, bled past the stage
so it frames the panel rather than hiding behind it. No scrim:
the panel and both cards are opaque, so the texture only ever
shows in the margin.
It bleeds to the full width of the 1440 grid: stage, grid and
viewport share a centre line, so `left-1/2 -translate-x-1/2`
plus `w-screen` lands it on the rails at every width. It clips
inside its own wrapper rather than on the stage, because the
cards and the panel's brackets sit outside the stage box.
The bottom bleed stays at 40px while the top grows to 64px. It
is deliberately asymmetric: above the stage is more of the same
section, but below it is the logo wall, and the plate must stop
inside the hero's bottom padding. Bleed past that and the
photograph lands on the wall's top rule — an 8%-black hairline,
invisible against a dark image — so the wall reads as having no
separator at all. */}
Sentiment
analysis
analysis
Positive trend detected
Signal extraction
Last 24h
Of 1,000 articles ingested in the last 24 hours, 197 were retained as signals — 80 percent were filtered out as noise.
Articles ingested
1,000
Signals retained
197
Canonical record
-
{RECORD.map(([field, value]) => (
- {field}
- {value}
+ 65 more data points
Trusted by{" "}
5,000+ top
companies
{LOGOS.map((mark, i) => (
Trusted by 5,000+ top companies, including{" "} {LOGOS.map((m) => m.label).join(", ")}.
{/* rules run edge to edge */}
{/* content stays on grid */}
```
To bleed a *child* out to the rails from inside a padded column, centre it on the viewport: `absolute left-1/2 w-screen -translate-x-1/2`; `.akta-plate` already caps itself at 90rem. Stage, grid and viewport share a centre line, so this lands on the rails at every width. `w-screen` includes the scrollbar gutter — clip it with `overflow-hidden` on an ancestor.
---
## Surfaces
| Level | Name | Light | Dark | Purpose |
|-------|------|-------|------|---------|
| 0 | Canvas | `#ffffff` | `#000000` | Page ground, broadest layer |
| 1 | Panel / Chip | `#f9fafb` | `#030712` | Panel bodies, chips lifted off a hatch band |
| 2 | Card / Title bar | `#f3f4f6` | `#101828` | Flanking cards, panel title bars, secondary buttons |
| 3 | Solid | `#1447e6` | `#155dfc` | Primary buttons, brand squares — the only saturated surface |
The stack runs **light-to-dark in light mode and dark-to-light in dark mode**, but the *relationship* is constant: each level is one step away from its parent, and separation never needs a border. A card on a panel on the canvas is three tones, no lines.
---
## Elevation
- **Panel / flanking card:** `SHADOW_PANEL` — 1px ring + 8px lift + 24px ambient. The only real elevation in the system.
- **Chip / resting surface:** `SHADOW_BORDER` — 1px ring + 1px lift + 2px ambient. Reads as "sitting on" rather than "floating above".
- **Button (filled):** none. Relies on tonal contrast and the notch, not shadow.
- **Icon tile:** `RING_TILE` — a 1px ring in the brand hue at 45% (60% in dark), no offset.
- **Separators:** `RULE_*`. Not elevation — these are hairlines that cost no layout space.
In dark mode the three-layer stacks collapse to a single white ring, because layered depth is invisible on a dark ground.
---
## Signature Devices
The six CSS classes. Everything else is a utility.
### Corner notch — `.akta-notch`
L-shaped crop marks at an element's corners. One pseudo-element draws a **full border**, then a **four-layer mask** keeps only the corners. No wrapper markup, no four extra spans, and the brackets always track the element's real size.
| Property | Default | Purpose |
|---|---|---|
| `--akta-notch-arm` | `12px` | length of each leg of the L |
| `--akta-notch-weight` | `1.5px` | stroke width (`1px` on `.akta-notch-reveal` below sm) |
| `--akta-notch-color` | `BG_BRAND` | stroke colour |
| `--akta-notch-inset` | `6px` | distance outside the box; negative tucks inward |
| `--akta-notch-rest` | `6px` | resting offset for `.akta-notch-reveal` (`4px` below sm) |
Tune with Tailwind arbitrary properties: `[--akta-notch-arm:22px] lg:[--akta-notch-arm:10px]`.
| Variant | Corners |
|---|---|
| `.akta-notch` | all four |
| `.akta-notch-top` | top pair |
| `.akta-notch-bottom` | bottom pair |
| `.akta-notch-diagonal` | top-left + bottom-right — reads as a registration mark rather than a frame |
| `.akta-notch-reveal` | animates flush on hover / focus-visible |
All variants are modifiers — pair them with `.akta-notch`.
**`overflow-hidden` on a notched element shears the brackets off.** They live outside the box. Put clipping on an inner wrapper.
**Flush notches mark junctions.** `[--akta-notch-inset:0px] [--akta-notch-arm:0px] lg:[--akta-notch-arm:10px]` puts brackets exactly on the corners — used where vertical rails meet full-bleed rules, and on every logo wall cell. Arms collapse to zero below `lg` because the rails are `lg:`-only.
### Hatch — `.akta-hatch`
A repeating 45° rule marking a band as structural rather than content-bearing — the drafting paper between sections. Paints `background-image` only, so the element keeps its own background colour.
| Property | Default |
|---|---|
| `--akta-hatch-color` | `currentColor` @ 12% |
| `--akta-hatch-weight` | `1px` |
| `--akta-hatch-gap` | `7px` |
| `--akta-hatch-angle` | `45deg` |
Variants: `.akta-hatch-reverse` (mirrored — pairs across a seam), `.akta-hatch-dense` (4px gap).
Content laid on a hatch needs an **opaque box** behind it or it becomes unreadable.
### Rolling label — `.akta-roll`
A label that re-states itself on hover: the visible face rolls up and out while an identical copy arrives from below. `.akta-roll-host` on the interactive element, `.akta-roll` on the label wrapper.
```html
Try for free
```
The clip lives on the label wrapper, never the button — the button is a notch and `overflow: hidden` would shear its brackets.
`.akta-roll-diagonal` sends the face out through the top-right corner and brings its replacement from the bottom-left, for arrows that should leave along the direction they point. In that variant **both** faces are absolutely positioned, so a 100% translate is a full box width rather than a glyph width.
The duplicate is always `aria-hidden` so the accessible name stays single.
### Background plate — `.akta-plate`
A photographic mat for a cluster of panels, painted as a **CSS background layer** rather than an `![]()
`, with the hatch as a second layer beneath. A missing or 404'd image simply doesn't paint and the hatch shows through, so the plate can never render broken.
```jsx
```
Leave `--akta-plate-image` unset for a pure hatch plate. The class caps itself at 1440px, so it can carry `w-screen` for a full-bleed mat.
### Signal ticks — `.akta-tick`
A field of ticks that resolves from noise into signal, demonstrating a filter rather than describing one.
| State | Selector | Effect |
|---|---|---|
| Rest | `.akta-tick-noise` | 16% opacity — the filtered end state |
| Armed | `[data-akta-signal="armed"]` | full opacity — the raw field |
| Run | `[data-akta-signal="run"]` | animates back down, staggered by `--akta-i` |
Resting state is the *filtered* field, so a no-JS or reduced-motion visitor meets the truthful end state rather than a field that never resolves.
### Entrance — `[data-akta-enter]` / `[data-akta-reveal]`
See Motion below.
---
## Components
### Primary Button
**Role:** High-emphasis action (Try for free, Get started)
`cn(BG_BRAND, ON_BRAND)`, no border, **radius 0**, padding 12px 24px (`px-6 py-3.5`), `TYPE_CTA` at its sm step (14px/500 uppercase, 0.06em). Height ≈ 48px. Devices: `akta-roll-host akta-notch akta-notch-reveal`. Hover moves to `HOVER_BRAND`, the brackets pull flush from 6px to 0, and the label rolls. Focus ring at `outline-offset-[10px]` to clear the brackets. No shadow — the notch and the tonal contrast do the work.
### Secondary Button
**Role:** Low-emphasis paired action (Talk to an engineer)
Identical geometry on `BG_CARD` with `NOTCH_GRAY` and `ACTIVE_SURFACE`. **Grey brackets are the only thing separating it from primary** — same shape, same type, same size. Keep it that way.
### Announcement Band
**Role:** Full-width notice above the hero
Full-bleed wrapper with `RULE_Y` so the rules cross the viewport; hatch fill on the grid; flush notches at the four junctions where the rails meet the rules. Inside, a solid `BG_PANEL` chip with `SHADOW_BORDER`, carrying nav-role text plus a `size-7` `BG_BRAND` square with a diagonal-rolling arrow.
### Panel
**Role:** The centrepiece that demonstrates the product
`BG_PANEL SHADOW_PANEL`, `akta-notch akta-notch-diagonal` with `[--akta-notch-arm:22px] [--akta-notch-inset:10px]`, `w-full lg:max-w-2xl`. Title bar in `BG_CARD` with a `RULE_B` baseline, label left and context right, both label-12-mono uppercase. Body carries the graphic. Footer is a two-cell grid split by `RULE_R`, figures in heading-24 with `tabular-nums`.
### Flanking Card
**Role:** Secondary evidence beside the panel
`w-56`–`w-64`, `BG_CARD p-4 SHADOW_PANEL`. **Stacks in flow below `lg`** (`order-2` / `order-3`) and becomes `lg:absolute` overlapping the panel — never hidden, because on mobile it carries content the panel doesn't. Always: `size-7` icon tile (`BG_BRAND_TILE RING_TILE`) beside an uppercase mono title, then content.
### Logo Wall
**Role:** Social proof strip closing the hero
Full-bleed, opaque, `z-10`, `RULE_T`. Grid of `2 / sm:3 / lg:6` cells, each `RULE_CELL` with a flush gray notch, `px-4 py-6 sm:px-6 sm:py-8`. Closed by a hatch seam band. Cells that animate are `aria-hidden` with one `sr-only` sentence naming every customer.
### Data List
**Role:** Canonical record, key-value readout
`
- ` in label-12-mono, `flex justify-between` rows with `space-y-1.5`. Keys in `INK_MUTED`, values in `INK` with `tabular-nums`. Footer line separated by `RULE_T` + `pt-3`.
### Tagline Row
**Role:** Three-or-four short claims under a headline
Each phrase in nav-role mono uppercase `INK_MUTED`, `py-1 sm:px-3 lg:px-4`, with every item after the first carrying `RULE_L_SM`. **Separate with a rule, never with a `|` character** — a pipe is a glyph, so it brings its own font metrics and sits on a different line-height from the labels either side, which throws the row's vertical centring. The rule is a hairline the exact height of the cell and costs no layout space.
Stacks with `flex-col` below `sm`, where the phrases cannot share a row and a leading rule would dangle at the start of a wrapped line.
### Nav Bar
**Role:** Top navigation
Three cells in one row separated by rules, not padding: wordmark cell (`RULE_R_LG`), centred mono nav (`hidden lg:flex`, `gap-9`), CTA cell (`RULE_L_LG`). The nav reads as a grid because the dividers do the work.
### Stat / Figure
**Role:** A number that is the point of its sentence
Label in label-12-mono uppercase `INK_MUTED`; value in heading-24 `tabular-nums`. Gray for context figures, `BG_BRAND` for the figure the section is actually about. No card chrome — typographic scale alone establishes the metric.
---
## Motion
| Motion | Property | Duration | Trigger |
|---|---|---|---|
| Entrance | `opacity` + `translateY(12px)` | 0.6s, delays 0.05→0.41s | Page load, `data-akta-enter="1".."6"` |
| Reveal | same keyframe | scroll-linked | In view, `data-akta-reveal` |
| Notch reveal | `inset` on `::before` | 0.3s | hover / focus-visible |
| Label roll | `transform` | 0.3s | hover / focus-visible |
| Signal denoise | `opacity`, staggered `calc(var(--akta-i) * 3ms)` | 0.45s | scroll into view, once |
| Logo flip | spring `y` | 0.5s | interval, gated on in-view |
### `data-akta-enter` vs `data-akta-reveal`
**`data-akta-enter="1".."6"`** fires on page load. Use it **only above the fold** — it finishes before anyone scrolls. Steps must be unique and in reading order; duplicated steps make the sequence read as interleaved pairs.
**`data-akta-reveal`** is scroll-linked via `animation-timeline: view()`. Use it for **everything below the fold**, which is every section after the hero. No JavaScript, no observer — a section using it can stay a server component:
```jsx
…
```
It sits inside `@supports (animation-timeline: view())`. Where that isn't supported the rule doesn't match and the element renders plain and fully visible — the correct resting state, not a degraded one. Don't add a JS fallback; there is nothing to fall back to.
### Rules
- **Every animation sits inside `@media (prefers-reduced-motion: no-preference)`**, and the resting state outside it must be the meaningful one.
- **Transitions belong on the pseudo-element where possible.** A `transition` on the host competes with `transition-colors` — only one can own the `transition` property.
- **Don't animate the notch with `transform`.** Pushing four corners outward needs a `scale`, and scale is proportional: on a 200×48 button that is ~8px sideways against ~2px vertically. It reads lopsided. Animate `inset` for uniform travel.
- **Derive generated geometry deterministically.** The tick field hashes its index rather than calling `Math.random()`, so server and client markup match.
---
## Accessibility
- Focus rings are **not** replaced by notches. Use `RING_BRAND` on brand controls and `RING_GRAY` on neutral ones — both already carry `outline-2` and the offset; a 1px bracket is too weak to be the only indicator.
- **Outline offset must clear the brackets:** `outline-offset` ≥ `--akta-notch-rest` + `--akta-notch-weight`. On standard buttons that is 6 + 1.5, so `outline-offset-[10px]`. With no notch, `outline-offset-4`.
- Decorative duplicates (`akta-roll-face-next`), schematic graphics (the tick field) and animating wordmarks are `aria-hidden`, with an `sr-only` sentence carrying any claim the graphic makes.
- If an element shows an arrow or a hover affordance, make it a real `` or `