The Infringement Control design system.

Semantic tokens

Accessible text pairs (WCAG 2.2)

Primary CTA 1: Press

Main action on every page. Tangerine with ink text.

Primary CTA 2: Cobalt window

Second important action (pricing, email). The sun strip is a title bar.

Primary CTA 3: Sticker

Audience switches and urgent flags. Die-cut ring, tilts on hover.

Secondary and links

Form fields

Labels are always visible. Placeholders only hint at format. Validation runs on blur and clears the moment the value is fixed. Errors say how to fix it, never blame.

Cards

leak_cleanup.exe

Service card

Window chrome, icon, title, one line, tags, arrow link. Lifts 3 px on hover.

• Tag
• Tag

See how it works

No.01Creator

Audience card

• Collectible-card layout
• Avatar flush to the art panel

Card link

3

Step card

Sticker number marker on the route rail, art, title, one or two lines.

Tabs, alerts, status

Navigation and dropdown

InfringementControl

Taskbar is sticky, 72 px, blurred paper. Current page is a sun chip. Below 960 px the links become a full-height sheet with 56 px rows.

FAQ

Testimonial layout (no fabricated quotes)

Ships empty. Fill only with real, approved client words, name and role. Until then the section is hidden on the live pages.

Footer

Ink taskbar with a tangerine Start chip, four columns collapsing to two then one. See the bottom of this page.

Heroes

Section illustrations

Icons: 36, colour and mono, 48 px grid

service

process

audience

interface

Stickers and badges

Textures

Brand

1. Contours are Ink #1A1F3D. No black, no grey outlines, no outline-free shapes on the light theme.
2. Line weight reads 2 to 4 px at display size. Detail lines are about two thirds of the contour.
3. Fills are flat palette colours with one shade per material. No gradients except the night lamp glow.
4. Shadows are hard 6 to 10 px ink offsets down-right. Never blurred, never a second direction.
5. Faces follow the construction: eyes on the head midline, one-hook nose, ears at eye height. Same person, same hair, same accessories in every scene.
6. Hands have a clear gesture: fist, point, open, grip, flat or thumbs-up. Check every thumbs-up at thumbnail size so it can't be misread.
7. Busts are cropped by a frame, a desk or a counter. Nothing floats.
8. Every illustration uses the window chrome or sits inside one. Windows are containers, not decoration.
9. No readable words baked into art. Text bars stand in for copy; real copy is HTML.
10. No real logos, platform marks, brand names or recognisable characters. Platforms are abstract glyph windows.
11. No shields, padlocks-as-answer, hooded hackers, matrix code, badges, gavels, handcuffs or courtrooms.
12. The story reads: discover the misuse, submit it, review, action, resolved. Each scene shows one of those moments.
13. Creator art can be bolder and more expressive, but everyone is fully dressed, adult and professional.
14. PNG exports have a real alpha channel. Corners are transparent; nothing is baked onto white or checkerboard.
15. Texture sits at 12 percent or less behind text. Grain only lives inside shapes.
16. Mobile: the art still reads at 343 px wide. If a detail is lost, use the mobile composition, don't shrink harder.
17. Every UI text pairing on the contrast table passes AA. Cream on tangerine is never used for text.
18. Alt text describes what happens in the scene, not the style. Decorative stickers get empty alt.

1. "Real people on email": confirm cases are handled by people and the address is monitored.
2. Do you also handle YouTube Content ID or other video-platform claims? If so, it becomes a seventh card. An icon is ready (video-claims).
3. What exactly does Evidence lock involve? Screenshots, page archives, timestamps? The wording here is a best reading of the site.
4. How and how often do clients hear back? Email per update, a summary, a portal?
5. Do clients get per-link status like this? If not, this section becomes an explainer of what happens to each link. Day labels are illustrative.
6. Can you state a real first-review time for urgent cases (for example, within 24 hours)? It would replace the word Urgent.
7. Testimonials: none on the current site, so none are shown. The slot below appears once you supply real, approved quotes. See the style guide for the layout.
8. Is there a price range to publish for URL clusters and urgent leak cases?
9. Please confirm you are comfortable with this wording.
10. Confirm this matches how you describe the business.
11. Confirm the reply you send after review (timing and what it contains). The nav's Call button became Email because no phone number is published.
12. What does a client need to send to prove an impersonation? ID is often required by platforms. Worth stating here.
13. Do you search for additional copies, or only act on links the client sends? If you search, that's a monitoring service and gets its own section (art brief is ready).
14. Confirm whether links can be added to an open case.
15. Please check these lists against what you actually ask clients for.
16. Confirm agencies and resellers can bring cases on behalf of clients.
17. Ongoing monitoring is not on the current site, so it has no finished art. A generation brief is ready in prompts/ if you add it.
18. The current hero shows a 76% exposure score and case IC-TAKEDOWN-1047. The new design uses IC-EXAMPLE-0001, labelled as an example.