Component Showcase Bureau Reforged Design System -- AppsVortex -- v3 (Animation Ready)
1 Typography Scale
HEADING LEVELS
Applied AI for industries Display -- Space Grotesk 700, 52px, -0.025em tracking
Practice Areas H1 -- Space Grotesk 700, 42px, -0.02em tracking
Domain Specializations H2 -- Space Grotesk 700, 24px, -0.01em tracking
Strategic Advisory H3 -- Space Grotesk 700, 22px, -0.01em tracking
RAG Architecture Patterns H4 -- Space Grotesk 700, 18px, -0.01em tracking
BODY TEXT VARIANTS

Fifteen years building production AI systems across legal, pharmaceutical, and financial services. Agent frameworks, RAG pipelines, fine-tuned solutions.

Body Large -- DM Sans 400, 17px, line-height 1.75, muted

AppsVortex is led by a principal with fifteen years in production AI systems -- former CTO, venture-capital experience, multiple acquisitions.

Body -- DM Sans 400, 16px, line-height 1.65, default text

Architecture review, vendor evaluation, and regulatory alignment for leadership teams navigating AI adoption.

Body Small -- DM Sans 400, 15px, line-height 1.75, muted
CAPTION, LABEL, AND CODE

Contract analysis, regulatory compliance, document review automation, privilege classification

Caption -- DM Sans 400, 13px, line-height 1.6, muted
Engagement Type Label -- JetBrains Mono 500, 10px, uppercase, 0.2em tracking, dim
$ nova --capabilities Code -- JetBrains Mono 400, 12px, line-height 1.8, muted
CLASSIFICATION CODE TREATMENT
PRC-00 Section Code -- JetBrains Mono 700, 11px, uppercase, 0.25em tracking, primary
ADV-01 Practice Code -- JetBrains Mono 700, 12px, uppercase, 0.2em tracking, primary
LEG Industry Code -- JetBrains Mono 700, 10px, uppercase, 0.25em tracking, primary
INT-04 Briefing Code -- JetBrains Mono 700, 10px, uppercase, 0.25em tracking, primary
SPECIAL TREATMENTS
How we engage Eyebrow / Section Subhead -- DM Sans 400 italic, 17px, muted
Fewer engagements. Better people. Pull Quote -- DM Sans 400 italic, 18px, line-height 1.7, heading color
PRC Practice Nav Item -- JetBrains Mono 400, 11px, uppercase, 0.06em tracking
AV // Est. 2011 -- AI Consultancy -- Clearance: Public Classification Bar -- JetBrains Mono 500, 10px, 0.25em tracking, dim
2 Color Palette
BACKGROUNDS
#08080a bg-deep
#0d0d0f bg (default)
#101013 bg-warm
#141418 surface
#0a0a0c surface-inset
PRIMARY AND ACCENT
#5f7d9a primary
#6d8da8 primary-hover
#7a9ab8 accent
#8daac6 accent-hover
#e8eaed primary-fg
primary-dim 12% opacity fill
TEXT TIERS
#e0e2e6 text-heading
#c8ccd2 text (body)
#7d8490 text-muted
#3e434c text-dim (decorative)
BORDERS
#1c1c22 border (default)
#141419 border-subtle
steel 30% border-steel
steel 55% border-steel-strong
STATE COLORS
#4a9a6a success
#6abf8a success-text
#9a8a4a warning
#bfa86a warning-text
#9a4a4a error
#bf6a6a error-text
#5f7d9a info
#7a9ab8 info-text
3 Classification Code System
SECTION CODES (11px, 0.25em)
PRC-00 Practice Areas
OSS-01 Open Source
NET-01 Network
INT-00 Briefings
CTX-01 Contact
DOM-00 Domains
IND-00 Industries
NAV CODES (11px, 0.06em, 60% opacity)
PRC Practice
OSS Open Source
NET Network
INT Briefings
CTX Contact
PRACTICE CODES (12px, 0.2em)
ADV-01 Advisory
EMB-02 Embedded
PRJ-03 Project
INDUSTRY CODES (10px, 0.25em)
LEG Legal
PHR Pharma
FIN Financial
BRIEFING CODES (10px, 0.25em)
INT-04 Latest briefing
INT-03 Previous
INT-02 Archived
INT-01 Initial
DOMAIN CODES (11px, 0.15em)
AGT Agents
RAG Retrieval
FTN Fine-Tuning
IN CONTEXT
PRC-00 Practice Areas How we engage
4 Buttons
BUREAU CTA (PRIMARY)
Initiate engagement Default
Initiate engagement Hover (expanded tracking)
Initiate engagement Focus
Initiate engagement Active / Pressed
Initiate engagement Disabled
SECONDARY (OUTLINE)
View case study Default
View case study Hover
View case study Focus
View case study Disabled
GHOST LINK
View on GitHub Default
View on GitHub Hover (expanded gap)
View on GitHub Focus
IN CONTEXT
Ready to begin?

A direct conversation about what you need and whether we are the right team.

5 Form Inputs
TEXT INPUT STATES
Default (empty)
Filled
Focused
Required field
Error
SELECT INPUT
Default (unselected)
Selected
Focused
TEXTAREA
Default textarea
Focused
DISABLED STATE
Disabled
IN CONTEXT
CTX-01 Describe Your Engagement

Your information is used solely to respond to this inquiry. No third-party sharing. No marketing lists. No CRM.

6 Navigation
DESKTOP NAVIGATION BAR
PRC Practice OSS Open Source NET Network INT Briefings CTX Contact
Fixed nav bar -- frosted glass bg, classification-coded links, active state with underline
LINK STATES
PRC Practice Default
PRC Practice Hover
NET Network Active
INT Briefings Focus (keyboard)
FOOTER NAVIGATION
AppsVortex AV // Est. 2011 -- AI Consultancy
Practice Open Source Network Briefings Contact
© 2011-2026 AppsVortex
Classification: PUBLIC -- Precision engineering for regulated industries.
Footer with brand, nav links, copyright, and classification bar
7 Cards and Panels
PRACTICE CARDS
ADV-01

Strategic Advisory

Architecture review, vendor evaluation, and regulatory alignment for leadership teams navigating AI adoption.

Architecture Compliance Vendor Eval
EMB-02

Embedded Partnership

A senior specialist integrates with your team for three to twelve months. Knowledge transfer is the deliverable.

3-12 Months Knowledge Transfer On-Team
PRJ-03

Project Delivery

Defined scope, timeline, and acceptance criteria. Proof-of-concept through production deployment.

Fixed Scope Handoff Docs Production
INDUSTRY CARDS
LEG Legal

Contract analysis, regulatory compliance, document review automation, privilege classification

PHR Pharma

Clinical data processing, adverse event detection, regulatory submission, trial documentation

FIN Financial

Risk modeling, compliance monitoring, fraud detection, audit systems, regulatory reporting

Three-column industry grid with 2px gap, classification codes
BRIEFING CARDS
INT-04 March 2026

RAG Architecture Patterns for Regulatory Document Review

Most RAG tutorials assume you can index anything and retrieve freely. In pharmaceutical and legal contexts, data governance changes the architecture fundamentally.

RAG 8 min read
INT-03 February 2026

Building Trustworthy AI Agents for Financial Compliance

The gap between a working agent demo and a production compliance system is enormous. Retry logic, state persistence, tool-call auditing, cost controls.

Agents 6 min read
Two-column briefing grid with classified header strip, data-animate="blog"
DOSSIER PANEL
DOSSIER // PRINCIPAL
experience 15 years in production AI
leadership Former CTO, VC, acquisitions
model Boutique + specialist network
verticals Legal, Pharma, Financial
staffing Senior-only. Vetted.
Dossier -- key-value classified document panel
TERMINAL PANEL
nova-plugin // capabilities
$ nova --capabilities
architecture File-based state, multi-agent coordination
coverage Vision through deployment
license MIT
$ _
Terminal mockup -- dimmed traffic lights, monospace content, blinking cursor
8 Dividers and Rules
SECTION RULE (GRADIENT + MARKER)
▮
Section rule -- steel-blue gradient, centered glyph marker, data-animate="rule", class .section-rule
SUBSECTION RULE
▮
Subsection rule -- default border color, same marker glyph, data-animate="rule", class .subsection-rule
NAV RULE
Nav rule -- steel gradient that fades at edges
FOOTER RULE
▮
Footer rule -- same nav gradient with marker, on deep bg
CARD BORDER (LEFT ACCENT)
Card with left accent border

3px left border in primary steel-blue, 1px border elsewhere

Left-accent card border pattern (practice cards, pull quotes)
9 Tags and Badges
CLASSIFICATION TAGS (PRACTICE AREA)
Architecture Default
Compliance Default
Vendor Eval Default
DELIVERY TAGS
3-12 Months Duration
Knowledge Transfer Deliverable
On-Team Model
Fixed Scope Scope
Handoff Docs Deliverable
Production Target
BRIEFING CATEGORY TAGS
RAG Category
Agents Category
Fine-Tuning Category
Engineering Category
IN CONTEXT
ADV-01

Strategic Advisory

Architecture review, vendor evaluation, and regulatory alignment.

Architecture Compliance Vendor Eval
10 Pull Quotes and Stats
PULL QUOTE
"

Fewer engagements. Better people. Work that withstands the scrutiny of regulated environments. No bench. No utilization targets. Just the right team for the problem.

Pull quote -- left border accent, oversized quotation mark at 20% opacity
STAT / METRIC DISPLAYS
YRS 15 Years in production
Numeric stat
VRT 3 Regulated verticals
Numeric stat
MDL SEN Senior-only network
Text stat
IN CONTEXT
YRS 15 Years in production
VRT 3 Regulated verticals
MDL SEN Senior-only network
11 Contextual Compositions
HERO SEQUENCE (GSAP INTEGRATION TARGET)
AV // Est. 2011 -- AI Consultancy -- Clearance: Public

Applied AI for industries
where precision is
non-negotiable.

Fifteen years building production AI systems across legal, pharmaceutical, and financial services. Agent frameworks, RAG pipelines, fine-tuned solutions -- the kind of work that passes regulatory audits, not pitch competitions.

YRS 15 Years in production
VRT 3 Regulated verticals
MDL SEN Senior-only network
Initiate engagement
SECTION DIVIDER (BETWEEN SECTIONS)
▮
PRACTICE AREAS SECTION
PRC-00 Practice Areas How we engage
ADV-01

Strategic Advisory

Architecture review, vendor evaluation, and regulatory alignment for leadership teams navigating AI adoption.

Architecture Compliance Vendor Eval
EMB-02

Embedded Partnership

A senior specialist integrates with your team for three to twelve months. Knowledge transfer is the deliverable.

3-12 Months Knowledge Transfer On-Team
▮
DOM-00 Domain Specializations
BRIEFINGS GRID
INT-00 Intelligence Briefings Recent analysis
INT-04 March 2026

RAG Architecture Patterns for Regulatory Document Review

Most RAG tutorials assume you can index anything and retrieve freely. In regulated contexts, data governance changes the architecture fundamentally.

RAG 8 min read
INT-03 February 2026

Building Trustworthy AI Agents for Financial Compliance

The gap between a working agent demo and a production compliance system is enormous. Retry logic, state persistence, tool-call auditing.

Agents 6 min read
INT-02 January 2026

Fine-Tuning Economics for Enterprise Legal AI

Fine-tuning is expensive. Data curation, training compute, evaluation infrastructure, ongoing maintenance. But quality improvements make the economics compelling.

Fine-Tuning 10 min read
INT-01 December 2025

Why We Open-Sourced Our SDLC Plugin for Claude Code

Architecture decisions behind Nova. Why file-based state over databases, multi-agent coordination, and what building developer tools for AI reveals.

Engineering 7 min read
CONTACT FORM COMPOSITION
CTX-01 Describe Your Engagement Direct channel -- no sales process

No discovery calls unless you want one. A direct conversation about what you need and whether we are the right team. Response within two business days.

Your information is used solely to respond to this inquiry. No third-party sharing. No marketing lists. No CRM.

12 Spacing and Density
SECTION PADDING
100px (desktop section top padding)
PRC-00 Section Content Area
72px (mobile section top padding)
CARD GAPS
Card A
2px gap
Card B
2px gap
Card C
Bureau filing gap -- 2px between stacked cards (practice, briefings, industries)
CONTAINER WIDTHS
960px -- content column (hero, practice, principal, briefings, contact)
1140px -- wide column (open source section)
640px -- narrow (contact form, hero subtitle, practice descriptions)
1080px -- nav width
HORIZONTAL PADDING
32px
Content area -- all containers use 32px horizontal padding
32px
SPACING SCALE (4px BASE UNIT)
4px Icon-text gaps, logo separator
8px Tag gaps, terminal blank
16px Section code margin, dossier padding
24px Form row gap, industry card padding
32px Content padding, nav link gap
48px OSS/principal layout gap, pull quote padding
64px Subsection rule margin-top
100px Section top padding (desktop)
13 Animation Contract
MOTION PHILOSOPHY

Elements reveal steadily and deliberately, like pages being turned in a dossier. Every animation uses power2.out easing -- no bounce, no elastic, no overshoot. Elements never reverse once revealed. The overall tempo is institutional: 0.7-1.0s durations for reveals, 0.12-0.15s stagger between sequential items, 0.3s for CSS hover transitions.

Library: GSAP 3.14.2 with ScrollTrigger plugin. CSS transitions for micro-interactions only.

DATA-ANIMATE ATTRIBUTE TYPES
Attribute Initial CSS State GSAP Tween Target Duration Trigger
data-animate="fade" opacity: 0; transform: translateY(16px) opacity: 1, y: 0 0.8s ScrollTrigger top 88%
data-animate="practice" opacity: 0; transform: translateY(24px) opacity: 1, y: 0 0.9s + 0.15s stagger ScrollTrigger top 88%
data-animate="slide-left" opacity: 0; transform: translateX(-24px) opacity: 1, x: 0 0.8s + 0.3s delay after card ScrollTrigger top 88%
data-animate="blog" opacity: 0; transform: translateY(20px) opacity: 1, y: 0 0.9s + 0.12s stagger ScrollTrigger top 90%
data-animate="rule" transform: scaleX(0); transform-origin: left center scaleX: 1 1.0s ScrollTrigger top 88%
HERO ENTRANCE SEQUENCE (PAGE LOAD TIMELINE)

Sequential reveal that runs once on page load. Total duration: ~2.2s. Overlapping offsets create a cascading waterfall.

.hero-classification
0.7s
opacity: 0, y: 8 -> 1, 0
.hero-title
1.0s
opacity: 0, y: 20 -> 1, 0
.hero-sub
0.8s
opacity: 0, y: 14 -> 1, 0
.hero-metrics
0.8s
opacity: 0, y: 14 -> 1, 0
.hero-cta
0.8s
opacity: 0, y: 12 -> 1, 0
.hero-scroll
1.0s
opacity: 0 -> 0.4

Timeline delay: 0.3s. Easing: power2.out for all steps.

SCROLLTRIGGER CONFIGURATION
Setting Value Rationale
start "top 88%" (content), "top 90%" (blog) Elements reveal when nearly in viewport
end Not set for toggle-based Toggle animations play once and hold
toggleActions "play none none none" Play on enter, never reverse. Once declassified, always visible.
scrub 0.5 (hero grid only) Parallax needs scroll-linking; content reveals are crisp one-time events
STAGGER GROUPS (data-stagger-group)

Containers with data-stagger-group have their direct animated children revealed in sequence rather than simultaneously.

Container Children Stagger
Practice cards container [data-animate="practice"] 0.15s between cards
Briefing cards container [data-animate="blog"] 0.12s between entries
CSS MICRO-INTERACTIONS (NOT GSAP)
Element Interaction CSS Transition
CTA button hover Background + tracking expansion (0.08em -> 0.12em) transition: background 0.3s ease, letter-spacing 0.3s ease
Ghost link hover Color change + gap expansion (6px -> 10px) transition: color 0.3s, gap 0.3s
Nav link hover Color change + code opacity transition: color 0.3s / transition: opacity 0.3s
Briefing card hover Border color change transition: border-color 0.3s
Form input focus Border-bottom color change transition: border-color 0.4s ease
Footer link hover Color change transition: color 0.2s
Terminal cursor Blinking animation: blink 1.2s step-end infinite
HERO BACKGROUND GRID PARALLAX

The only scrub-linked animation. The .hero-bg-grid element translates y: -60px as the user scrolls past the hero section. Scrub factor: 0.5 (500ms smoothing). Creates subtle depth without any content elements moving.

ELEMENTS THAT DO NOT ANIMATE
  • Navigation bar -- always visible, always solid (institutional permanence)
  • Footer -- static, never animates in
  • Form field values -- no typewriter effects, no animated placeholders
  • Tags and badges -- static once their parent card is revealed
  • Dossier values -- appear with the dossier panel, no individual value animation
  • Background grid lines -- only the container parallaxes, not the lines
PREFERS-REDUCED-MOTION HANDLING

When prefers-reduced-motion: reduce is active:

  • All GSAP ScrollTrigger animations are disabled -- elements render in their final visible state immediately
  • Hero entrance timeline is skipped -- all hero elements visible on load
  • CSS transitions for hover/focus are preserved (these are interaction feedback, not decorative motion)
  • Terminal cursor blink is disabled
  • Hero background grid parallax is disabled

Implementation: Check window.matchMedia('(prefers-reduced-motion: reduce)').matches before initializing GSAP. If true, set all animated elements to their final state and skip timeline/ScrollTrigger creation.

Bureau Reforged Design System -- AppsVortex -- Prototype Showcase v3 (Animation Ready)