Text
Eight patterns for headlines, metrics, and labels. Each has a stated purpose — the animation earns its presence by making the content land harder.
Display text filled with a slow-shifting gradient that cycles through the Latency brand palette — Grape, Amethyst, Violet, Flax and back. Dark surface required: Deep Royal or Obsidian. One per page, for hero or closing anchor moments only.
Decoding
private markets.
Grape · Amethyst · Violet · Flax · 6s loop · Dark surface only
Counts from zero to the final value on first viewport entry. Use for Latency’s core data claims: company coverage and verified financials. The number lands before any surrounding copy — by design.
Display text filled with the Grape→Amethyst→Violet gradient. Use for primary hero headlines, section anchors, or pull-quote statements. One per page maximum.
Decoding
private markets.
Grape #4E00EB → Amethyst #824DFF → Violet #9661FF
Characters randomise then resolve to the final word on hover. The ‘decoding’ metaphor made literal — private market data that has structure underneath apparent noise.
A subtle shimmer passes across a badge or label. Use for release announcements, edition markers, or premium feature indicators. Draws attention without demanding it. When two or more badges appear together, offset each by a quarter of the animation cycle (–0.875s increments on a 3.5s loop) so the shimmers do not pulse in unison.
Centre-aligned
Now live · 13 European markets Q1 2026 · Albufera system v1Left-aligned
Series A · Active fundraise 80+ direct integrationsCycles through related terms in a headline. For Latency: the vocabulary of the Alpha Seeker rotates — each word is a signal that this platform speaks their language.
Intelligence for deal origination. IC preparation. coverage gaps. thesis validation. add-on sourcing.
Cycles every 2.5 seconds
Characters appear one by one, pause at the end of the phrase, then delete and cycle to the next. Two registers: Instrument Serif italic for hero copy, Iosevka Charon for data labels and technical contexts.
60ms type · 35ms delete · 2.2s pause
A marker stroke sweeps left to right behind a word or phrase on first scroll entry. Grape variant for light surfaces. Amber variant for Deep Royal surfaces — the only two permitted highlight colours per the colour system.
Surface the deals your competitors
never find.
The insight lands
before the call is made —
every time.
Backgrounds
Four surface patterns implemented as composable CSS layers. Each is decorative only — aria-hidden="true" always. Content sits above; patterns give depth.
Radial dot grid at 24px pitch. On warm surfaces: Lead at 35% opacity. On dark surfaces: Amethyst at 30%. Suggests data infrastructure — structured and exhaustive.
Content layer
Sits above the dots.
Fine rectilinear grid at 32px base unit. Always hairline weight. For section backgrounds behind data-heavy content. Suggests the underlying architecture of a normalised database.
Content layer
Sits above the grid.
Concentric rings expand from a central point. For CTA sections or hero panels where the brand needs to signal active intelligence. The α mark anchors the origin.
Ripple origin · α mark
Parchment–Bone–Flax surface that shifts position over 8 seconds. For section transitions, PDF exports, and anywhere a static flat surface would read as too stark.
Warm surface
Editorial premium.
Parchment → Bone → Flax · 8s loop
Cards
Five card patterns covering the full range of marketing contexts: feature presentation, data display, social proof, and editorial layout.
A radial glow follows the cursor position inside the card. Subtle at rest, reveals on hover — intelligence that responds to attention, not to noise.
Maps your investment thesis against 52M companies and surfaces matches continuously — without manual queries or coverage gaps.
Explore the platform →An investor or client quote with left accent border and attribution. The Instrument Serif italic signals that the voice here is human, not the platform's. One per section.
"Latency surfaces deals our competitors don't see. That's not a marginal improvement — it's a structural advantage in deal origination."
Asymmetric grid with one featured cell spanning full height. The featured cell carries the primary claim at display scale. Numbers are Instrument Serif — the data is the hero.
52M+
European companies normalised across every major registry.
12M
With verified financials from national filings.
1,200
Proprietary micro-market segments.
A conic-gradient beam rotates continuously around the card border. For premium feature callouts, pricing tiers, or partner spotlights. One per view.
National filing data sourced directly — not scraped or aggregated from third parties.
A single KPI with trend indicator and progress bar. For dashboards, pitch materials, and data summary sections. The Instrument Serif numeral is the hero.
Effects
Four effects that operate at the layout level, not the component level. Marquee and Animated Beam reference what the product actually does. Orbit visualises the intelligence platform as a centre of gravity.
Horizontal infinite scroll. For Latency: the 80+ data source integrations scrolling continuously. Communicates breadth of coverage without requiring a static grid that users won't read. Pauses on hover.
Logo-strip variant of the marquee for displaying fund names, portfolio companies, or client brands. Each item shows an initial block and company name — recognisable social proof pattern. Pauses on hover.
SVG dots travel along a path between nodes — the data provenance flow made visual. Three stages: national registries → Latency normalisation layer → investment intelligence. Concept from Magic UI Animated Beam.
Elements orbit a central node at configurable speeds and radii. For visualising the α mark as the centre of a data intelligence system — integrations, countries, and sectors in orbit.
Three columns of testimonial cards scroll vertically in alternating directions — column 1 and 3 down, column 2 up. Each column loops seamlessly. The mask gradient fades the top and bottom edges. Pause-on-hover applies per column.
Full-bleed hero with a video background (or animated CSS placeholder), Deep Royal overlay gradient, Instrument Serif headline in Flax, and a Grape CTA. The overlay density is 0.85 on the left (text-safe) and 0.2 on the right (video shows through).
Latency · Private markets intelligence
Map your investment mandate against every registered company in Europe. Matches surface continuously — no queries, no missed coverage.
Video background · replace <video> tag with autoplay muted loop playsinline
Data & content
Three editorial patterns: the stat grid for data-dense sections, the timeline for narrative sequence, and the accordion for reference content. Each uses only the marketing typographic register.
3×2 grid of key metrics. Each cell has an overline label, an Instrument Serif number, and a descriptor. Counters animate on first scroll entry. Use for section openers that need to establish scale before narrative.
Vertical milestone sequence. The Grape spine signals that the line of progress is brand-owned. Past nodes filled; future nodes outlined. For company history, product roadmap, or deal flow stages.
Blue-Boost S.L. established. Raúl Díaz and Joaquin Duran begin building the data infrastructure layer for European private markets.
Companies House UK, Registro Mercantil, and Handelsregister connected. Normalisation pipeline operational.
Proprietary taxonomy reaches 800 segments. First thesis-matching prototype tested with two PE funds.
Full brand system codified. 52M companies. 13 countries. 1,200 micro-markets. Series A active.
General availability across all 13 markets.
Expand/collapse for reference content, FAQs, or dense specification detail. The '+' rotates to '×' on open. Keyboard accessible — native <details>/<summary> elements throughout.
Proprietary dealflow refers to investment opportunities sourced independently — not through intermediaries, sell-side processes, or shared databases. Latency generates it by surfacing companies that meet a fund's thesis before those companies enter a formal sale process.
The agentic layer maps each fund's investment thesis — sector focus, geography, revenue range, ownership profile, growth signals — against the normalised 52M company dataset. Matches surface continuously as new data is ingested, not as a one-time query result.
Verified financials are sourced directly from national filing registries — Companies House, Registro Mercantil, Handelsregister, and equivalents in 13 countries. Not estimated or aggregated. Revenue, EBITDA, and balance sheet data carry the source registry reference for auditability.
Albufera is the complete Latency brand system — strategy, verbal identity, writing style, colour, typography, logo, and graphic devices. The product UI design system (Socarrat) is separate. The two must not be conflated.
Download
Complete HTML/CSS component library in the Albufera register. All 26 components as standalone HTML snippets, the component stylesheet, and usage documentation.
components.css — all component styles, 26 componentslatency-ui-components.html — annotated snippet packcomponent-tokens.json — W3C Design Tokens formatAgent layer
All component tokens are available as CSS custom properties, W3C Design Tokens JSON, and YAML specification. Use these in design tools, build pipelines, or agents building on the Latency brand system.
.comp-card { border: 1px solid var(--sand); border-radius: 12px; }
.stat-ticker__num { font-family: var(--font-display); }
.btn-primary { background: var(--grape); border-radius: 7px; }
.btn-shimmer::before {
animation: shimmer-sweep 2.8s ease-in-out infinite;
}
.beam-wrap::before {
animation: beam-spin 3s linear infinite;
}
.marquee-track {
animation: marquee-run 28s linear infinite;
}
.timeline::before {
background: linear-gradient(to bottom,
var(--grape), rgba(78,0,235,0.15));
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }{
"component": {
"card-radius": { "$value": "12px", "$type": "dimension" },
"card-border": { "$value": "{color.sand}", "$type": "color" },
"btn-radius": { "$value": "7px", "$type": "dimension" },
"btn-primary": { "$value": "{color.grape}", "$type": "color" },
"btn-hover": { "$value": "{color.indigo}","$type": "color" },
"ticker-font": { "$value": "{font.display}","$type": "fontFamily" },
"beam-dur": { "$value": "3s", "$type": "duration" },
"shimmer-dur": { "$value": "2.8s", "$type": "duration" },
"marquee-dur": { "$value": "28s", "$type": "duration" },
"orbit-inner": { "$value": "6s", "$type": "duration" },
"orbit-outer": { "$value": "10s", "$type": "duration" }
}
}components:
register: albufera-marketing
version: "1.0"
categories: [ text, backgrounds, cards, buttons, effects, data ]
constraints:
grape_budget: "10% of composition — CTAs only"
amber_on_light: "decorative only, never as text"
instrument_serif_min: "48px in editorial"
white_background: prohibited # use --parchment
reduced_motion: "all animations respect prefers-reduced-motion"
shimmer_button:
one_per_view: true
background: "var(--grape)"
hover: "var(--indigo)"
border_beam:
one_per_view: true
animation: "beam-spin 3s linear infinite"
marquee:
pause_on_hover: true
loop_method: "duplicate items · translateX(-50%)"animation_scale:
75ms: "micro feedback — icon state change"
150ms: "button hover — background, border"
250ms: "card interaction — spotlight, lift"
400ms: "word rotate — translateY transition"
700ms: "page entrance — scroll reveal"
easing:
sharp: "cubic-bezier(0.16, 1, 0.3, 1)" # --ease default
linear: "linear" # marquee, beam-spin
ease_out: "cubic-bezier(0.0, 0.0, 0.2, 1)" # exits
reduced_motion:
rule: "opacity: 1; transform: none; transition: none"
applies_to: ".reveal · all keyframe animations"Latency · latencydata.com
Decoding private markets.