NOINDEX · INTERNAL

Rokkit200 Design System

Living styleguide v2.0 — for agents and humans to see the system live.

01 — Palette

Four-Force Colors

Background--bgGround
Navy--navyStructure
Accent--accentSignal
Light--lightRelief

Color Ramps

Blue — structure / authority
1
2
3
4
5
6
7
8
9
10
11
12
Orange — signal / action
1
2
3
4
5
6
7
8
9
10
11
12
Neutral — surface / typography
1
2
3
4
5
6
7
8
9
10
11
12
Dark — depth scale
1
2
3
4
5
6
7
8
9
10
11
12

Semantic Tokens

fg
fg-dim
muted
surface
indigo
accent-2
success
warn
danger

02 — Typography

Type Families

Display / HeadingsSpace Grotesk

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789

BodyIBM Plex Sans

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789

Mono / LabelsIBM Plex Mono

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz · 0123456789

Type Scale

Momentumhero · --fs-hero · Space Grotesk
Forward Deployed Engineeringh1 · --fs-h1 · Space Grotesk
What we doh2 · --fs-h2 · Space Grotesk
Senior engineers embeddedh3 · --fs-h3 · Space Grotesk
We sit with your team, build custom software and AI into how you actually work.lead · --fs-lead · IBM Plex Sans
Forward Deployed Engineering is Rokkit200's model for embedding senior engineering capability close to your business.body · --fs-body · IBM Plex Sans
Four engagements. One continuous path.small · --fs-small · IBM Plex Sans
UNDERSTAND — BUILD — ADOPT — SCALEmono · --fs-mono · IBM Plex Mono

03 — Spacing & Radius

8px Spacing Scale

space-1 · 8px
space-2 · 16px
space-3 · 24px
space-4 · 40px
space-5 · 64px
space-6 · 104px

Border Radius

radius-none · 0px
radius · 4px
radius-pill · 999px

04 — Components

Buttons

PrimaryWith microFree · no sign-upSecondaryGhost

Disabled state: Disabled

Link

Inline link — accent-2 underline

Status Pills

OperationalDegradedIncident

Stage Badge

UnderstandBuildAdoptScaleUnderstand · Entry point

Form Field

Default state
Enter a valid addressPlease enter a valid email address.
Valid state

Panel

Build

Custom software and AI, engineered for your environment.

Embed

Senior engineers working inside your team, not at arm's length.

Scale

What works gets measured, iterated and rolled out.

Process (3-col)

01

Understand

Get close to the business, workflows and systems.

02

Identify leverage

Find where AI and engineering create the most value.

03

Build & integrate

Build and integrate solutions that fit your environment.

Rung

Understand · Entry point

AI Adoption Diagnostic

Understand where your team really stands with AI adoption — in about ten minutes.

Read more →
Build

AI Delivery Sprint

An embedded engineer joins your team for four weeks to ship a focused AI integration.

Read more →

Deliverables

Senior engineering expertise

Experienced engineers embedded with your team.

Custom software delivery

Tailored solutions built for your needs.

Practical AI adoption

Hands-on support to identify and operationalise AI.

Workflow & system integration

Solutions that fit your existing systems.

Outcome

  • AI initiatives that deliver measurable business outcomes
  • Empowered teams who adopt and champion change
  • Efficient, scalable solutions built for your environment
  • Sustainable impact through continuous improvement

Checklist

  • —Senior engineers, not a vendor relationship
  • —Custom builds — no off-the-shelf templates
  • —AI adoption as engineering discipline
  • —Measure outcomes, iterate, scale what works

05 — CTA Band

CTABand component

Forward thinking. Forward doing.

See where you stand in about ten minutes — then let's talk about what comes next.

Take the diagnosticTalk to us

06 — Motion

Animation & Reduced Motion

Motion (the scan line glitch, hero entrance, .reveal scroll transitions, and hover micro-lifts) is demonstrated live on the homepage hero. All animations respect prefers-reduced-motion: reduce — the global rule in components.css sets animation:none !importantand removes button transitions when the preference is active.