The single source of truth for the design and the build
Every colour, size and component on the site comes from this page. Values are read live from tokens.css and kit.css, the same files the site ships with.
No value is typed by hand: a size or colour without a token is a defect. One meaning, one component: a local variant is a modifier, not a copy. A component is accepted only with every state shown here, on light and on dark sections.
Source: Figma RE Squad AI, the approved A5 brochure and one-pager, and the UI Kit page.
Colour
Primitives come from Figma. Neon is a fill and a highlight on dark sections; as text on white it fails contrast, so light sections use Green Dark for accent text.
Type
Inter only, as in every approved material. The hero is set Regular with tight leading like the one-pager; headings are Bold. Arabic pairs with IBM Plex Sans Arabic when the AR version comes.
--fs-display · 400 · 0.9Your next developer is 1 prompt away
--fs-h1 · 700Built for regulated programmes.
--fs-h2 · 700One platform. Engineers, teams or AI.
--fs-h3 · 700The new way: one prompt
--fs-lead · 400Type your vacancy. Get matched instantly.
--fs-body · 400Every engineer is a full-time employee of a verified software company. Resquad deploys them to your project under a single MSA, and that company stays accountable for the work.
--fs-small · 400Illustrative. Index reflects relative bench size reported by partner agencies.
--fs-micro · capsEngineers · Project teams · Agentic AI services
Space & radius
A 4/8 grid, closed set. Radii step down with nesting: a card inside a section takes the next one down.
Icons
Tabler Icons, outline, stroke 2, as in the approved materials (the Figma layers are named tabler:…). 24 px in tiles, 16–18 px inline. One sprite, icons.svg; no hand-drawn SVG.
Button
Primary is the one action of a section (Book a demo). Secondary sits next to it. Ghost is for inline links with an arrow.
Chip
Static tags: services, markets, proof points. Not clickable; a clickable chip would be a button.
Icon tile
A Tabler icon on a square: feature lists, security points, the three ways to deliver. The accent tile marks the one point a block is about.
Prompt bar
The brand's signature: the hero asks for a role in one line. Glow is the state used in the hero composition, over the globe.
Developer card
A matched engineer, glass over the hero. Photo, name, role, one meta line, the verified mark. Loading is the state while matches arrive.
Stat tile
Numbers from the prototype. The accent tile is used once per row, for the claim the section is about.
Process step
How it works: numbered, because the order is the content.
FAQ item
Native details/summary: works without JavaScript and with the keyboard.
How quickly can I engage engineers?
Matches appear instantly. A verified shortlist follows within 24 hours, and engineers are on the ground within a week.
Are the engineers freelancers?
No. Every engineer is a full-time employee of a verified software company that stays accountable for the work.
How are contracts handled?
One MSA covers every agency. Contract and invoice locally in the UAE and KSA.
Closed · open · hover
How quickly can I engage engineers?
Matches appear instantly. A verified shortlist follows within 24 hours.
Are the engineers freelancers?
No. Every engineer is a full-time employee of a verified software company.
Closed · open
Old way / new way
The comparison from the brochure: a neutral panel with crosses against a mint panel with checks.
The old way: months of waiting
- Post job → wait weeks → few candidates
- Interview → lose to counter-offers
- Recruiter fees → budget overruns
The new way: one prompt
- You type your need, AI returns matches on the spot
- Only agency-backed developers, verified track record
- NDAs, compliance and invoicing under one MSA
Stats row
Five stat tiles from the prototype in one row; wraps to two columns on a phone. One accent tile per row.
How it works
Five process steps from the prototype, from one prompt to delivery.