CORE
CCTK
Open, modular middleware for mission-critical process control. The core platform.
Style Guide · v0.0.1
Example Site Style Guide
Auto-generated visualization of the site's current design tokens, primitives, and section variants. Share with stakeholders for design review.
01
Typography
HTML heading tags
display The quick brown fox
h1 The quick brown fox
h2 The quick brown fox
h3 The quick brown fox
h4 The quick brown fox
h5 The quick brown fox
h6 The quick brown fox
Body sizes
leadThe quick brown fox jumps over the lazy dog.
bodyThe quick brown fox jumps over the lazy dog.
smallThe quick brown fox jumps over the lazy dog.
captionThe quick brown fox
02
Colors
03
UI Elements
Buttons
Cards
Default
Subtle background, soft border.
Elevated
Page surface, drop shadow.
Outlined
Transparent bg, strong border.
Feature
Accented top border.
Badges
Avatars + Stats
Animated stat counters
Mission clock
Scroll affordance
Renders fixed at the bottom-center of the viewport. Auto-hides after scrolling past 200px.
Form fields
We'll never share it.
Please enter a valid number.
Inline elements
Quotes
The kit's job is to make the 80% so good that the bespoke 20% can carry the site's identity.
Shipped in eight weeks. Six months later it still runs without a babysitter.
Frames + Dividers
Outlined frame
Subtle frame
Elevated + shadow
Button groups + Icon buttons
Accordion
How long is a typical engagement?
From 4 weeks for a focused build sprint up to multi-quarter platform work. We scope before we start.
Do you handle ongoing operations?
Yes — we run what we build, with on-call coverage and runbooks handed off cleanly.
Can we work with you fractionally?
Absolutely. A common shape is 2 days/week of CTO-level help plus a focused engineering pod.
04
Forms
All inputs
We'll never share it.
Please enter a valid number.
Checkboxes, radios, switch
05
Feedback & status
Alerts
Heads up
This is an informational alert.
All set
Form submitted successfully.
Careful
Build will skip 3 deprecated tests.
Failed
Something went wrong. Try again.
Progress + spinners + skeletons
Build progress 64%
Toast (click to demo)
06
Disclosure & overlay
Tabs
Production-grade AI platform engineering, with custom agents, RAG pipelines, and proper evals.
We treat AI work like any other production system: design docs, weekly demos, observability, runbooks.
Most engagements ship in 6–12 weeks and continue under an Operate retainer.
Tabs (pills variant)
Daily standup at 10am.
Weekly demo Friday 3pm.
Monthly review first Tuesday.
Tabs (pills + icons + per-tab tone)
New: each TabItem can carry an icon and a tone — accent / success / warning / danger / info / neutral.
All systems nominal.
Two warnings need review.
One service degraded.
Scheduled maintenance Tuesday.
Tabs (connectedPanel variant)
Active pill flows into a tone-colored content panel as one visual element — pattern designers often hand-rolled with sprite sheets before.
Production-grade AI platform engineering.
Design docs, weekly demos, observability, runbooks.
Most engagements ship in 6–12 weeks.
Carousel (3 variants)
scroll-snap (CSS-only) · buttons · dots. All ARIA-compliant. Autoplay pauses on hover + reduced-motion.
scroll-snap (default — no JS):
buttons + showCount:
ImageLinkCard (photo-as-card)
Edge-to-edge photo + label overlay. 3 variants: overlay-bottom (default), overlay-center, overlay-on-hover.
Timeline (vertical, alternating)
Anchor markers (year / phase) + title + description. Optional alternating-sides layout above 768px.
-
2013
Founded in Tampa
Two designers, one Mac, an unreasonable amount of optimism.
-
2017
First Fortune 500 client
-
2021
Team grew to 25 people
-
2026
Launched the agency platform
Modal + Drawer + Sheet (click to demo)
Menus
08
Icons
09
Spacing & Radius
Space scale
space.1 space.2 space.3 space.4 space.6 space.8 space.12 space.16 space.20 space.32 Radius
10
Motion
instant fast medium slow 11
Sections
Every kit section, rendered with sample data. Each section accepts a typed data prop validated by a Zod schema — see @techrev-inc/site-kit/schemas. Variants are noted on each block.
Hero variants: centered · split · minimal · video-bg · image-fullbleed
Style Guide demo
Build better software, faster.
Hero in its 'centered' variant. Same content drives every theme.
Split variant
Headline left, visual right.
Use when the hero needs an illustration or product shot alongside the message.
Photography-as-layout
Images are the design.
image-fullbleed — full-viewport photo, scrim overlay, headline bottom-left. Pairs Section bleed + dark cascade automatically.
PageHero variants: minimal · badged · image-bg
Services
Three motions. One team.
PageHero is the shorter, focused header for interior pages.
About
Small team. Hard problems. No theatre.
Variant with a leading badge — good for category-tagged pages.
TrustStrip variants: row · badges · marquee
- Veteran-Founded
- Est. 2013
- Florida, USA
- Security-First
- AI-Augmented
- SOC 2
- HIPAA
- ISO 27001
FeatureGrid variants: icon-cards · numbered · bullets · alternating
How it works
Three short steps
- 01
Pick a theme
Choose a starting archetype — editorial, soft-tech, brutalist, etc.
- 02
Tweak tokens
Use the Theme Builder for a live-preview palette + typography pass.
- 03
Compose pages
Drop sections into pages with typed content payloads. Ship.
ServiceShowcase variants: featured-supporting · equal-grid
What we do
Build. Operate. Advise.
Featured + supporting tiers — used on the homepage to lead with two flagship services.
AI Platform Engineering
Build & OperateProduction-grade AI platforms — custom agents, RAG, evals, observability.
- Custom agents
- Eval suites
- Observability
Fractional CTO
AdvisoryTwo days a week, lots of judgment. Strategy + architecture + hiring.
- Strategy
- Architecture
- Hiring
Software Engineering
Web, mobile, backend.
Cloud & Infra
Cloudflare, AWS, GCP.
Security
Audits + hardening.
Managed IT
Day-to-day operations.
Process variants: numbered-vertical · numbered-horizontal
How we work
A predictable shape.
numbered-vertical variant — narrow, story-like.
- 01
Discover
Week 0Audit + write a one-page scope.
- 02
Design
Week 1–2Architecture + clickable prototype.
- 03
Build
Week 2–NWeekly demos, weekly invoices.
- 04
Operate
OngoingRunbooks, on-call, monthly review.
Process
Four phases at a glance.
- 01
Discover
Audit + scope
- 02
Design
Architecture
- 03
Build
Weekly demos
- 04
Operate
Run + review
WorkShowcase variants: cards · alternating
Recent work
What we've shipped lately.
Nationwide Logistics
AI-driven dispatch platform
Custom agent pipeline that cut routing decisions from 14 minutes to 90 seconds.
9.3×
Faster
$2.4M
Savings
Atlas Insurance
Claims intake automation
RAG agents replacing three FTE intake roles with confidence-gated human handoff.
82%
Auto-handled
Pacific Health Systems
Patient-portal modernization
Twelve-year-old PHP app rebuilt as typed Astro + Workers, zero downtime cutover.
0
Downtime min
FAQAccordion single variant — wraps Accordion primitive
Common questions
Things people ask.
How long is a typical engagement?
Anywhere from 4 weeks for a focused sprint to multi-quarter platform work.
Can we own the code?
Yes — always. You own everything on day one.
Do you handle ongoing operations?
Yes. We run what we build, with on-call coverage and clean handoff path.
ContactSection variants: form · booking · split · info
Send us a note
Form variant — POSTs to your /api/contact route.
Other ways to reach us
- Emailhello@example.com
- Phone+1 (555) 010-0100
- WhereFlorida, USA
- Book a meeting30-min intro call
CTAStrip variants: banner · split · full-bleed
Ready to start?
Split variant — text on the left, CTAs on the right.
BrandedFramework variants: grid · stagger · callout
The single most recurring signature move across RPS's strongest Tier-3 sites — a trademarked methodology name + glyph + 3-6 named pillars with custom iconography. Used by BRPH (ThirdSpace™), CCT Corp (CCTK™), Lifestyle Homes (SunSmart/HealthSmart), Brevard Cares (C.A.R.E.S. Model), ASTI (Hassle Free IT 4S), Marketbridge (Wall Street Fast Pass).
Methodology
Designing spaces that connect work, learning, and life.
ThirdSpace ™
Our integrated design framework for hybrid environments.
-
Place
Architecture grounded in context.
-
People
Spaces shaped around how teams gather.
-
Purpose
Each decision serves the mission.
-
Performance
Measured, accountable outcomes.
How we serve families in crisis.
Five steps that turn intake into outcomes — used across every case file we open.
The C.A.R.E.S. Model
- C
Connect
First-line advocates respond within 24 hours.
- A
Assess
Multidisciplinary review identifies root needs.
- R
Resource
We connect families to the right support, not generic referrals.
- E
Empower
Skill-building keeps families self-sufficient long-term.
- S
Stabilize
Twelve-month follow-through prevents relapse into crisis.
TabbedFeatures transitions: crossfade · slide · none
Linear/Vercel-style tabbed feature explorer (pattern P-17). Three to five tabs swap an image + content panel below. Arrow keys move between tabs, Enter activates. Mobile (<768px) converts the tab list into a stacked native <details> accordion.
Capabilities
One platform. Three motions.
Click a tab, or arrow-key through them.
Engineering
Production-grade AI platforms from day one.
Custom agents, eval suites, retrieval pipelines, and observability — built on stacks you can hire for. We ship working software in weeks, not slide decks.
Run & maintain
Stay live with quiet, on-call infrastructure.
Runbooks, on-call rotations, monthly health reviews. Your platform stops being a project and starts being an asset.
Fractional CTO
Two days a week. Lots of judgment.
Strategy, architecture, hiring, and a quiet voice in board prep. Pair us with your existing team — we make them faster.
Build
Engineering
Production-grade AI platforms from day one.
Custom agents, eval suites, retrieval pipelines, and observability — built on stacks you can hire for. We ship working software in weeks, not slide decks.
Operate
Run & maintain
Stay live with quiet, on-call infrastructure.
Runbooks, on-call rotations, monthly health reviews. Your platform stops being a project and starts being an asset.
Advise
Fractional CTO
Two days a week. Lots of judgment.
Strategy, architecture, hiring, and a quiet voice in board prep. Pair us with your existing team — we make them faster.
ProductFamilyStrip layouts: md/scroll · sm/grid · themes: dark · light
Pattern P-08. Horizontal row of pill-shaped product links. Use as a taxonomy strip below the hero, or near a "platform" section. Mobile collapses to scroll-snap (default) or a 2-column grid.
LogoWall layouts: grid · marquee · grayscale
Pattern P-19. Customer or partner mark row for at-a-glance social proof. Grayscale by default (color returns on hover). Marquee variant loops on mobile-width to keep the row dense.
Grid layout · grayscale on rest
AnnouncementRibbon kinds: news · launch · hiring · event · dismissible
Pattern P-07. Thin band above the NavBar advertising the freshest news / mission / role. Dismissible via the × — the dismissal persists in localStorage when storageKey is supplied. aria-live="polite" so screen readers announce on first paint. The demos below are rendered inline (not above the nav) so you can see all four kinds at once.
ScrollPinSequence pin: first · all · snap · reduced-motion fallback
Pinned-scroll narrative (pattern P-01 — SpaceX, Anduril, Apple, Rocket Lab). The section pins while scenes crossfade with scroll. GSAP + ScrollTrigger lazy-mount via IntersectionObserver only when the section is within 1.5 viewports. Reduced-motion users get the static stack fallback automatically. Try scrolling slowly through the demo below.
Act 01
A pin is not a parallax.
When the section pins, the page stops while the story moves. Scroll keeps progressing — the camera doesn't.
Act 02
Scenes crossfade in document order.
Each scene is a [data-scene-id] wrapper. Opacity + translateY blends between them as you scroll.
Act 03
Reduced-motion users see a stack.
The driver bails before registering ScrollTrigger; CSS makes sure the static layout still reads correctly.
SpecSheet variants: stacked · two-column · status dots
Typographic spec-block layout for content-heavy sections without photography. Each item renders as a brand-vivid rail + mono-caps coordinate + display headline + body. Looks like an engineering spec doc.
What we do
Six operational domains.
Engineering-spec layout — no card, no photo. Reads like a doctrine document.
-
Pad-side process control
Real-time control of launch pads, propellant handling, and pre-launch sequencing. Proven across 18 Antares missions.
-
Sensor fusion at the range
Real-time telemetry, radar, and tracking-camera fusion for air, land, and maritime test ranges.
-
Multi-sensor situational awareness
Multi-sensor surveillance with tracking-algorithm fusion for borders, perimeters, maritime traffic, and airspace.
-
Cryogenic + high-pressure operations
Cryogenic, high-pressure-gas, and shock-test process control. Open-middleware foundation.
-
Hypersonic instrumentation
Instrumentation and facility control for hypersonic, high-Mach, and wave-heater testing.
-
Lifecycle systems integration
Experienced engineers integrating software, electrical, and mechanical systems across the mission lifecycle.
EditorialLanes alternating photo/text · auto-side · stats · tags · CTA · hairline dividers
Magazine-style alternating photo/text strips for case studies, featured projects, and in-depth feature lanes. Each item is a 50/50 split that auto-alternates sides.
Selected work
Three case studies, end-to-end.
FeaturedAndSupporting layouts: below · right · around
One hero tile + N satellite tiles. Use when one item is genuinely the headliner (a platform core surrounded by extensions; a flagship feature; the most-recent project).
The platform
One platform. Five mission-shaped tools.
CCTK is the core; the four extensions stand on the same foundation.
BentoGrid columns: 4 · 6 · 12 · per-item colSpan/rowSpan · tones: brand · accent · soft · muted
Asymmetric tile layout with per-item column/row spans. Visual hierarchy comes from size variety rather than uniform cards. Mobile collapses to single column.
Highlights
Asymmetric tile layout.
Each tile declares its own colSpan/rowSpan in a 6-column grid.
-
Headliner
Hero feature
4-column span, 2-row span. Carries the visual weight of the whole bento.
-
Supporting
02Secondary
2-column span. Sits to the right of the hero.
-
Supporting
03Tertiary
Another 2-column tile under the secondary.
-
Footer
04Wide footer tile
Spans the bottom 3 columns.
-
Note
05Compact
Small 3-column tile.
StickyScrollReveal sticky media + scrolling text · IntersectionObserver-driven · reduced-motion fallback · mobile stacked fallback
As the user scrolls, a sticky media column crossfades through one image per step. Pure vanilla JS, no React. Respects prefers-reduced-motion (collapses to a stacked list). Below 880px or with reduced-motion, every step renders inline.
Tour
Three steps to a mission system.
Sticky media on the left swaps as the right column scrolls.
-
STEP 01
Define the operational envelope
Mission systems engineering starts with the requirements + concept of operations. CCT works with your team to scope the system, the interfaces, and the acceptance criteria.
- Concept of operations workshop
- Interface control documents
- Acceptance + test plans
-
STEP 02
Build on the open platform
CCTK is the core middleware. Modular, open, deployed across launch + range + surveillance. Your system sits on the same foundation as 18 Antares missions.
- Industry-standard control hardware
- No vendor lock-in
- Audit trail + observability built-in
-
STEP 03
Operate at mission tempo
Deployment isn't the end — we operate alongside your team. Continuous integration of new sensors, new platforms, new mission profiles.
- On-site mission support
- Continuous-delivery deployment
- 30-year operational track record
Team alternating photo/bio rows · auto-side · intro paragraphs · gradient CTA
Alternating portrait/bio profile section. Each member row auto-alternates photo side by index. Optional two-column intro paragraphs above the profile rows. CTA button uses the gradient variant.
About us
Meet the Team
The people behind the work.
We are a small, senior team that builds and operates production software for clients who can't afford downtime.
Every project gets a dedicated lead, a clear scope, and a weekly demo — no surprises, no slide-deck handoffs.
Alex Rivera
Founder
Alex has spent 15 years building production systems at the intersection of aerospace, defense, and enterprise software. Founded the studio to bring that rigor to every client.
Meet AlexJordan Park
Creative Director
Jordan leads design across the studio — from brand identity to component libraries. Obsessed with the space where visual craft meets engineering precision.
Meet JordanTwoColumnIntro align: left · center · no media · typographic authority
Calm, typographic two-column intro section. Left column: eyebrow + large serif heading. Right column: 1–3 body paragraphs. No media, no buttons. Two alignment variants below.
Our Approach
Clarity before complexity.
Every engagement starts with a one-page scope document. If we can't explain what we're building and why in a single page, we're not ready to build it.
This discipline keeps projects on time, on budget, and free of the scope drift that kills most software projects before they ship.
Our Philosophy
Great software is quiet.
The best systems are the ones your users never have to think about. They just work — reliably, quickly, and without drama.
LogoCluster dark/brand background · full-color white tiles · columns: 2 · 3 · 4
Credential/partner logo showcase on a rich dark or brand background. Full-color logos on white rounded tiles. Contrast with LogoWall (grayscale, neutral background).
Trusted by leading organisations.
From startups to Fortune 500 — our clients trust us with their most critical systems.
12
Blueprints
Blueprints are pre-composed page templates — sections + content schemas assembled into a complete page that just needs content. The kit ships StyleGuide (this page!). Page-template blueprints are the next phase of the kit.
Planned (Phase 6)
Planned
AgencyHomepage
Hero + TrustStrip + ServiceShowcase + SocialProof + Process + WorkShowcase + FAQ + CTAStrip + NavBar + Footer.
data: agencyHomepageSchema Planned
ServiceDetail
PageHero + Tabs (overview/approach/outcomes) + Process + SocialProof + FAQ + CTA + Service schema.
data: serviceDetailSchema Planned
LandingPage
Hero + Benefits + SocialProof + FAQ + CTAStrip. Optimized for paid traffic.
data: landingPageSchema Planned
AboutPage
PageHero + Story + Values + Team + Stats + CTA + Organization schema.
data: aboutPageSchema Planned
BlogPost
PageHero + TableOfContents + Prose article body + Author + Pagination + Article schema.
data: blogPostSchema Planned
ContactPage
PageHero + ContactSection (split) + LocalBusiness schema.
data: contactPageSchema 
