Rajeev Karemane

GRC Design system

A Figma and React design system for governance, risk and compliance products, built around how audits really work: chasing evidence, owners and deadlines.

Role
Lead product designer
Scope
Research, 60 component sets, 13 screens, React library
Built with
Figma variables, React, Radix Primitives, Tailwind CSS
Get the design system Try the live demo
Readiness overview for a fictional telehealth company: readiness at 70 percent, 5 blocking gaps, 19 open evidence requests with 6 overdue, a 12-week readiness trend, control status, and a table of controls blocking the SOC 2 audit.

Compliance tools treat audits as monitoring. The real work is chasing.

Dashboards full of green ticks look reassuring, but a SOC 2 or HIPAA audit is won or lost on follow-up. I designed for the three things that actually stall teams.

Evidence gets rejected for small, fixable reasons

A missing date or a cropped screenshot sends the owner back to the start, weeks before fieldwork.

Controls with no owner stall quietly

Nobody is reminded about work nobody owns, so it surfaces only when the auditor asks.

Nobody can see who has gone quiet

The person who owes four items hasn't replied in 11 days, and a status dashboard never shows it.

Four decisions I'd defend in any design review

Each one is built into the components, so a team using the system gets it without having to remember it.

Status is never colour alone

Every control status pairs its colour with its own icon and word, so it still reads in greyscale and for people with colour blindness. Try it: the switch turns every chip in this section grey.

Compliant At risk Non-compliant In review Not assessed Expired

Unassigned is a designed state

In compliance, a control with no owner is the finding. It gets its own look and always sorts to the top of the queue.

Unassigned 5 days overdue

Risk accepted is not resolved

Accepting a risk needs an approver, a reason and an expiry date, so it can never quietly pass as fixed.

Accepted by Maya Kessler until 31 Mar 2027. Compensating control: network isolation.

The record can't be edited

The audit trail has no edit or delete. A rejection carries its reason, and a signed attestation keeps who signed, when in UTC, and a hash of what was signed.

Priya Nair rejected "Q3 access review export": "Date range not visible; re-export with the filter shown." 3 Oct 2026, 14:12:40 UTC · CC6.1

One set of tokens, two themes, every screen built from components

Colour, type, spacing and radius live in Figma variables with Light and Dark modes. The same names become CSS variables in code, so a designer's spec and a developer's component read alike.

60component sets
420+variants
227variables
88icons
13screens, 9 in both themes
Evidence queue in the light theme, grouped by person, with the unassigned group first and a stale responder highlighted.
Evidence queue, Light
The same evidence queue in the dark theme.
The same screen, Dark. One class switches every token.

Stop bad evidence at upload, not at the audit

Most rejections are predictable, so the evidence flow catches them early and makes every rejection actionable.

  1. Upload with a checklist

    Submit unlocks only when the uploader confirms the file shows a date, the system and the full population.

  2. Reject with a reason

    A reviewer can't reject without choosing a reason and writing a note the uploader sees word for word.

  3. Approve and lock

    Approval records who and when, then counts toward the control until the evidence expires.

Control detail for CC6.1: one of four evidence items approved, a rejected access review with the reason and a re-upload button, and a requested item with guidance on what to send.
Control detail: the rejected item says exactly what to fix, next to the button that fixes it.

New in v1.2: two regulations, one question

In September 2026 the ICO approved the WASPI UK GDPR Code for information sharing, and the EU's anti-greenwashing rules began to apply. Different laws, same question underneath: can you explain what you did, why, and who decided?

WASPI UK GDPR Code of Conduct

Information sharing

A protocol isn't finished when it's signed and filed. Each one has an owner, a review date and a status, and every share has a decision record.

Share with Afon Valley Police?Shared and logged
What
Name, date of birth, address. Excluded: siblings.
Why
Protect a child at risk of significant harm. UK GDPR 6(1)(e), 9(2)(g).
Who
Helen Okafor, Caldicott Guardian 21 Sep 2026, 09:10 UTC

6 components, 2 patterns and 2 screens, including readiness against the Code's six requirements.

Directive (EU) 2024/825

Environmental claims

A finding points at the exact phrase, names the rule, and suggests a specific rewrite, so marketing and legal agree before anything is printed.

"Eco-friendly packaging"Rewrite needed

Generic claim without proof. Needs recognised excellent environmental performance relevant to the claim.

Say instead"Box made from 100% recycled cardboard"

5 components and 2 screens, covering generic, offset, scope, label and future claims.

Designed in Figma. Built in React.

Every variant value is a prop value, and every colour is a CSS variable with the same name as its Figma variable.

import { ControlTable, EvidenceUpload } from "@grc-ds/core";

<ControlTable
  controls={controls} people={people}
  hiddenColumns={["framework"]} selectable />

<EvidenceUpload
  requirement="Quarterly access review"
  onSubmit={submit} />
  • 61 React components on Radix Primitives and Tailwind CSS, in TypeScript, with Storybook.
  • 305 automated tests for behaviour, keyboard use and accessibility checks on every component.
  • WCAG 2.2 AA contrast recomputed from the tokens on every run, in both themes.
  • One source of tokens exported from Figma into CSS, a Tailwind theme and TypeScript. The v1.2 modules are Figma-only for now.

Use it in your product

The Figma file has a free version with the foundations, atoms, base components and the two v1.2 modules, plus previews of everything else. The full kit adds every domain component, all thirteen screens and the React library.

Get it free on Figma Community Buy the full kit on Gumroad Buy the full kit on Lemon Squeezy

Building a compliance product?

I design for fintech, healthcare and compliance software. If you're working on audits, risk, evidence or data sharing, I'd like to hear about it.

Email me