uinaf/uinaf-design-system
Apply the uinaf brand identity to anything that ships under the uinaf name — web interfaces, blog posts, changelogs, documentation, READMEs, slides, OG / social images, email, terminal banners, app or product UI starting points. Covers voice, design tokens, components, motion, and brand assets, with a Tailwind v4 path for web work. Use when producing or restyling any uinaf-branded artefact. Skip for non-uinaf work; this is opinionated brand guidance, not a generic UI kit.
98
1.67x
Quality
100%
Does it follow best practices?
Impact
97%
1.67xAverage score across 5 eval scenarios
Securityby
Passed
No known issues
criteria.jsonevals/scenario-3/
{
"context": "The agent is asked to bootstrap a uinaf-branded landing page on a fresh Vite + Tailwind v4 project. This scenario tests whether the agent correctly wires Berkeley Mono from the CDN, registers the full uinaf token set as Tailwind v4 @theme custom properties, applies the link/card component patterns, uses the brand illustrations from the CDN, and writes copy in the uinaf voice (lowercase, dry, no emoji, no SaaS sludge).",
"type": "weighted_checklist",
"checklist": [
{
"name": "Berkeley Mono CDN import",
"description": "src/styles.css contains @import url(\"https://cdn.uinaf.dev/fonts/berkeley-mono/variable/font.css\") (or equivalent <link> in index.html), and --font-mono / font-mono utility is set to \"Berkeley Mono\" with sensible fallbacks. No second typeface, no Google Fonts sans/serif imports.",
"max_score": 10
},
{
"name": "Neutral palette extended",
"description": "@theme registers --color-neutral-* including the design-system additions (-050, -850, -925) — not just the Tailwind defaults. Body uses bg-neutral-950 with text-neutral-200.",
"max_score": 8
},
{
"name": "Slime palette registered, not used as CTA",
"description": "@theme registers --color-slime-cyan and at least the cyan/green/magenta/purple set. The slime colors are NOT applied as button fills, gradient washes, or default text colors. Cyan only appears as the .u-link hover color.",
"max_score": 8
},
{
"name": "Type scale matches",
"description": "@theme defines --text-2xs/xs/sm/base/md/lg/xl/2xl with the design-system pixel values (11/12/14/15/18/20/28/40). The page h1 uses text-lg (20px) and body uses text-sm (14px) with leading-relaxed.",
"max_score": 6
},
{
"name": "Square corners only",
"description": "No element uses rounded-md or above. Cards and inputs use rounded-[2px] / --radius-xs. Status pills are absent or use rounded-full only on a sub-2px dot.",
"max_score": 8
},
{
"name": "u-link / u-link-plain / u-card components",
"description": "@layer components defines .u-link (underline default, color and decoration shift to slime-cyan on hover), .u-link-plain (no underline, opacity 0.8 hover), and .u-card (1px neutral-800/90 border, neutral-950/40 bg, rounded-[2px], hover lift translateY(-2px) + border-neutral-500). Footer links use .u-link-plain.",
"max_score": 10
},
{
"name": "Logo lockup",
"description": "The home logo is rendered at 240x240 inside a 1px border-neutral-900 square frame, filled by https://cdn.uinaf.dev/images/uinaf-team.png. No rounded corners on the frame, no shadow, on a near-black canvas.",
"max_score": 8
},
{
"name": "Favicon and OG meta",
"description": "<head> includes <link rel=\"icon\"> and <link rel=\"apple-touch-icon\"> pointing at https://cdn.uinaf.dev/images/uinaf-computer-favicon.png. og:image and twitter:image point at https://cdn.uinaf.dev/images/uinaf-team.png.",
"max_score": 6
},
{
"name": "Lowercase voice",
"description": "Every visible string in body, headings, nav, and footer is lowercase. The legal entity name does not appear. No Title Case, no sentence-case capitalization, no all-caps.",
"max_score": 10
},
{
"name": "No emoji, no icon fonts",
"description": "Body and chrome contain zero emoji. No icon-font import (Lucide, Heroicons, FontAwesome, Material Icons). External links carry a trailing ↗ unicode glyph. Footer link clusters are separated by middle-dot · (U+00B7).",
"max_score": 8
},
{
"name": "No coloured CTAs, no shadows on UI",
"description": "No element has a colored background fill (slime, status, blue, green) acting as a button or call-to-action. The page has zero box-shadow on UI surfaces — borders do all the elevation work.",
"max_score": 8
},
{
"name": "Voice — short, dry, direct",
"description": "The h1 reads `we bet you've seen us before`. Body paragraphs are 1-2 sentences each, in the uinaf voice. None of `empower`, `unlock`, `synergies`, `simply`, `just`, `essentially`, `transform`, `elevate`, `mission` appear. No exclamation marks.",
"max_score": 6
},
{
"name": "Footer pattern",
"description": "Footer is two clusters: nav links left (e.g. `projects · terms · thanks`) and contact + socials right (e.g. `dev@uinaf.dev · github ↗ · x ↗`). Separated by middle-dot · in neutral-700. All links use .u-link-plain.",
"max_score": 4
}
]
}