WTF is a UI Kit?
It’s one look for every tool AKA the live reference for the OMGLORD design skill. Tokens, fonts and components here come from the Figma file OMGLORD UI Kit—Base; the stylesheet is what every new tool loads.
Sample tool
Example data
Accent
128Resources listed
3Issues in draft
41%Open rate, last issue
| Issue | Section | Send | Status |
|---|---|---|---|
| Tools for type nerds | Resources | Oct 02 | In review |
| Ten years of OMGLORD | Interviews | Oct 09 | Scheduled |
| Archive tools, round 2 | Links | Sep 18 | Sent |
| Password managers | Resources | — | Draft |
Components
NeutralAccentSuccessWarningDanger
No issues yetAdd your first issue to start planning the next send.
Type
Site Title · Söhne Mono Kräftig 20—tool name onlyOMGLORD
Large · Söhne Buch 24/140—section and card titlesA curated resources directory and newsletter
Body · Söhne Buch 16/150—default: paragraphs, tables, buttons, labelsA password manager, digital vault and form filler in one.
Small · Söhne Buch 11/150—helper text, badges, table headersUpdated 2 days ago
Display · Elastik 40/120—the “WTF is…?” intro only, or when askedWTF is OMGLORD?
Color
Using it in a tool
Claude does this automatically when the design skill is active. A published tool copies omglord.css from this page and links it; the fonts ride inside the stylesheet.
<link rel="stylesheet" href="omglord.css">
<div class="omg-app">
<header class="omg-header">
<span class="t-site-title">Tool name</span>
<span class="omg-spacer"></span>
<button class="btn btn-primary">New item</button>
</header>
<main class="omg-page"> … </main>
</div>