Your design system, enforced on every agent.

How Gate works

1. 1  It imports your design system

   Tokens, a Tailwind config, CSS variables or a DESIGN.md from your repo. Color and text styles from Figma. A VOICE.md for the words. Gate turns them into one kit.

2. 2  Your agents get it before they write

   Claude Code, Cursor, Codex and any MCP-capable agent read your kit from Rams before they touch UI. The first draft starts from your tokens and your words.

3. 3  Every PR is checked against it

   Gate flags colors, sizes, spacing, radii and fonts that are off your kit, and copy that breaks your voice. Each finding comes with the fix, ready to commit. Run it as a warning or as a required check.

Without Gate and with Gate

The same settings screen for Fieldnote, a sample brand. Left, built from stock components. Right, held to the Fieldnote kit by Gate.

What Gate catches

Five checks measure values against your tokens, and the same files always give the same result. The sixth reads your VOICE.md.

• Colors off your palette

  A hex, rgb or utility color that is not in your kit. Gate names the closest one you have.

  #2F5E51becomesmoss-600

  bg-[#7c3aed]becomesbg-moss-600

  color: #999becomesink-500
• Type sizes off your scale

  A font size between the steps of your type ramp.

  font-size: 17pxbecomes16px

  text-[13px]becomestext-xs

  font-size: 22pxbecomes24px
• Spacing off your scale

  Padding, margins and gaps that miss your steps.

  p-[13px]becomesp-3

  margin: 18pxbecomes16px

  gap-[7px]becomesgap-2
• Corners off your scale

  A border radius that is not one of yours.

  rounded-[6px]becomesrounded-sm

  border-radius: 10pxbecomes8px

  rounded-[3px]becomesrounded-sm
• Fonts outside your kit

  A font family your kit does not list, like a system fallback or a face from another project.

  InterbecomesInter Tight

  "Times New Roman"becomesInter Tight

  font-family: ArialbecomesInter Tight
• Copy that breaks your voice

  Button labels, errors and headings checked against your VOICE.md. New in the alpha.

  Click here to submit!!becomesSend

  Invalid input!!becomesCheck the email

  Learn MorebecomesLearn more

The alpha is free for 30 days

We take a few teams at a time and set Gate up with each one by hand.

1. Day 1
   We set up Gate with you

   On a call, we import your kit from your repo, Figma or a VOICE.md, then fix by hand whatever came in wrong. Your agents can read it the same day.

2. Weeks 1 to 4
   Gate warns on one repo

   Gate checks every pull request on that repo and suggests fixes on the line. It only warns, so nothing is held up while you see what it finds.

3. Day 30
   A Gate readout

   What Gate caught, what it got wrong, and what we changed because of you. Then you decide if you want to keep it.