Stats
Actions
Tags
From ritual-dapp-skills
Provides Ritual dApp design system with dark-mode-first Tailwind config, color tokens, typography, async precompile lifecycle visuals, icons, and AI slop prevention for React/Next.js frontends.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ritual-dapp-skills:ritual-dapp-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design tokens and visual direction for Ritual Chain dApp frontends. Dark-mode-first, technically precise, and unmistakably Ritual.
Design tokens and visual direction for Ritual Chain dApp frontends. Dark-mode-first, technically precise, and unmistakably Ritual.
When styling a new Ritual dApp frontend:
tailwind.config.ts.When reviewing an existing dApp:
Common edge cases:
gray-500 text on bg-ritual-elevated fails WCAG AA (3.7:1 ratio). Use gray-400 minimum.Precision over decoration. Every element earns its pixels. No ornament that doesn't communicate state, identity, or hierarchy. A green glow means TEE-verified. A pink border means AI-generated. If an element has no semantic reason to exist, remove it.
Atmosphere over brightness. The dark canvas is not a concession to dark mode — it is the medium. Glows, mesh gradients, and noise grain create depth and dimension that only work on black. Light is used surgically: to draw attention, to signal state, to reward completion.
Semantic honesty. Colors, shapes, and motion always mean what they mean. Green never decorates — it certifies. Gold never highlights — it warns. Pink never accents arbitrarily — it marks machine intelligence. Users learn to read the interface once and trust it forever.
| Token | Hex | Usage |
|---|---|---|
bg-primary | #000000 | Page background, base layer |
bg-elevated | #111827 | Cards, modals, elevated surfaces |
bg-surface | #1F2937 | Input fields, dropdown menus |
bg-overlay | rgba(0,0,0,0.8) | Modal overlays, sheet backgrounds |
| Token | Hex | Usage |
|---|---|---|
accent-green | #19D184 | Primary CTAs, success states, TEE verified, active indicators |
accent-lime | #BFFF00 | Highlight text, data emphasis, hover states |
accent-pink | #FF1DCE | AI/agent features, persistent agent UI, creative precompiles |
accent-gold | #FACC15 | Warnings, pending states, fee displays |
accent-red | #EF4444 | Errors, failed states, destructive actions |
| Token | Hex | Usage |
|---|---|---|
gray-700 | #374151 | Borders, dividers |
gray-500 | #6B7280 | Secondary text, labels |
gray-400 | #9CA3AF | Body text (on dark backgrounds) |
gray-300 | #D1D5DB | Primary text headings |
gray-100 | #F3F4F6 | High-emphasis text (use sparingly) |
accent-green for anything verified, successful, or connected.#FFFFFF for backgrounds. Maximum is gray-100 for text.| Role | Font | Fallback |
|---|---|---|
| Display / Headlines | Izoard | 'Izoard', system-ui, sans-serif |
| Body / UI | Barlow | 'Barlow', 'Inter', system-ui, sans-serif |
| Code / Data | JetBrains Mono | 'JetBrains Mono', 'Fira Code', monospace |
Note: Izoard is a licensed font from atipo foundry. For open-source projects, substitute with Archivo or Archivo Black (Google Fonts). The key functional requirement: always use a monospace font for hex addresses, data values, and block numbers.
| Role | Licensed | Open-Source Substitute | Google Fonts |
|---|---|---|---|
| Display | Izoard 700 | Archivo Black 400 (reads as bold) | Yes |
| Display (lighter) | Izoard 400 | Archivo 600 | Yes |
| Body | Barlow 400/600 | Barlow 400/600 (already free) | Yes |
| Mono | JetBrains Mono | JetBrains Mono (already free) | Yes |
| Element | Font | Size | Weight | Letter-spacing | Transform |
|---|---|---|---|---|---|
| Hero title | Izoard | 4rem (64px) | 700 | -0.02em | — |
| Section title | Izoard | 2.5rem (40px) | 700 | -0.01em | — |
| Card title | Barlow | 1.25rem (20px) | 600 | 0 | — |
| Body | Barlow | 1rem (16px) | 400 | 0 | — |
| Body small | Barlow | 0.875rem (14px) | 400 | 0 | — |
| Data label | Barlow | 0.75rem (12px) | 500 | 0.1em | uppercase |
| Data value | JetBrains Mono | 0.875rem (14px) | 500 | 0 | — |
| Hex/address | JetBrains Mono | 0.75rem (12px) | 400 | 0 | — |
| Button | Barlow | 0.875rem (14px) | 600 | 0.02em | — |
:root {
--font-display: 'Izoard', system-ui, sans-serif;
--font-body: 'Barlow', 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}
max-width: 65ch, line-height: 1.75, Barlow 16px/400.clamp() for hero and section titles to scale without breakpoints: font-size: clamp(2.5rem, 5vw, 4rem).Extend your Tailwind config with these Ritual-specific tokens:
const config = {
theme: {
extend: {
colors: {
ritual: {
black: '#000000', elevated: '#111827', surface: '#1F2937',
green: '#19D184', lime: '#BFFF00', pink: '#FF1DCE', gold: '#FACC15',
},
},
fontFamily: {
display: ['var(--font-display)', 'system-ui', 'sans-serif'],
body: ['var(--font-body)', 'Inter', 'system-ui', 'sans-serif'],
mono: ['var(--font-mono)', 'Fira Code', 'monospace'],
},
boxShadow: {
'glow-green': '0 0 30px -5px rgba(25, 209, 132, 0.25)',
'glow-pink': '0 0 30px -5px rgba(255, 29, 206, 0.2)',
'card': '0 4px 40px -12px rgba(0, 0, 0, 0.5)',
},
},
},
};
Class-level patterns. Build your own components around these tokens.
| Element | Recommended Classes |
|---|---|
| Page background | bg-black min-h-screen text-gray-300 font-body |
| Card | bg-ritual-elevated border border-gray-800 rounded-xl shadow-card p-6 |
| Primary button | border border-ritual-green text-ritual-green hover:bg-ritual-green/10 px-4 py-2.5 rounded-lg font-semibold |
| Secondary button | border border-dashed border-ritual-gold text-ritual-gold hover:bg-ritual-gold/10 |
| Ghost button | border border-gray-700 text-gray-400 hover:border-gray-600 |
| Danger button | border border-red-500/50 text-red-400 hover:bg-red-500/10 |
| Text input | bg-ritual-surface border border-gray-700 rounded-lg px-4 py-3 text-sm text-gray-300 |
| Data label | text-xs text-gray-500 uppercase tracking-wider |
| Data value | text-sm text-gray-300 font-mono |
| Hex address | font-mono text-xs text-gray-500 (truncate to 0x1234...5678) |
| Section divider | h-px bg-gradient-to-r from-ritual-green/30 via-gray-800 to-transparent |
| Focus ring | focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ritual-green/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black |
Ritual buttons are transparent with borders, not filled. The primary button is a green-bordered outline that glows on hover — filled buttons feel consumer/SaaS, outlines feel technical/crypto-native. Use rounded-xl max; mix with sharper corners where appropriate.
Every async precompile operation passes through up to 9 states. Each state has a distinct visual treatment. Always pair color with an icon and text label — never rely on color alone (see Accessibility).
| State | Dot Color | Animated | Text Color | Icon |
|---|---|---|---|---|
| Submitting | gray | pulse | text-gray-400 | · |
| Awaiting Executor | gold | pulse | text-ritual-gold | ◌ |
| Committed | gold | static | text-ritual-gold | ◉ |
| Processing | green | pulse | text-ritual-green | ⟳ |
| Result Ready | green | static | text-ritual-green | ◈ |
| Settling | gold | static | text-ritual-gold | ◎ |
| Settled | green | static | text-ritual-green | ✓ |
| Failed | red | static | text-red-400 | ✗ |
| Expired | gray-600 | none | text-gray-500 | ⊘ |
Each precompile type has a geometric icon. Green = data operations, pink = AI/inference, lime = cryptographic, gold = scheduling.
| Type | Address | Icon | Color |
|---|---|---|---|
| ONNX | 0x0800 | ⬡ | green |
| HTTP | 0x0801 | ⇄ | green |
| LLM | 0x0802 | ◇ | pink |
| JQ | 0x0803 | {} | green |
| Long HTTP | 0x0805 | ⟳ | green |
| ZK Long-Running | 0x0806 | △ | lime |
| FHE | 0x0807 | ◈ | lime |
| Sovereign Agent | 0x080C | ▣ | pink |
| Image | 0x0818 | ◐ | pink |
| Audio | 0x0819 | ♫ | pink |
| Video | 0x081A | ▶ | pink |
| Persistent Agent | 0x0820 | ⊞ | pink |
A green badge with "TEE Verified" text signals enclave-computed results. Style: bg-ritual-green/10 text-ritual-green border border-ritual-green/20. Include a small geometric icon (rotated square suggesting a hexagon) for visual weight.
Any content produced by an AI precompile (LLM, Agent, Image, etc.) should be visually distinguished with a pink top-border gradient (border-ritual-pink/20), a diamond icon ◇ with "AI Output" label, and the model name in gray monospace.
Transactions from the system scheduler (sender 0x000...fa7e, type 0x10) should show a gold ⏲ Scheduled badge to distinguish them from user-initiated calls.
Ritual transaction receipts include an spcCalls array (precompile input/output pairs inline). Display these as collapsible monospace blocks with a "Decode" action.
ECIES-encrypted results should show a blurred placeholder with a lock icon and "Decrypt" button. Only the user's key can read the content.
Before shipping any Ritual dApp UI, audit against these signals of generic AI-generated design:
| Red Flag | Why It's Wrong | Fix |
|---|---|---|
| Purple/violet gradients | Default AI color scheme, screams "ChatGPT made this" | Use Ritual's green/lime/pink accents on black |
| System fonts (Inter everywhere) | No brand identity | Use Izoard for display, Barlow for body |
| Perfectly symmetric grid layouts | Feels templated, no visual tension | Break one column wider, offset elements |
Generic gray #f5f5f5 backgrounds | Web2 SaaS energy | Pure black #000000 with #111827 cards |
box-shadow: 0 2px 8px rgba(0,0,0,0.1) | The default AI shadow | Use dramatic shadow-card or glow variants |
| Rounded-2xl on everything | Friendly/consumer, not crypto-native | Mix sharp corners with selective rounding |
| Blue primary buttons | Every AI default | Green border buttons with glow |
| Stock gradient hero sections | Immediately recognizable as AI | Mesh gradients with noise texture |
backdrop-blur-xl everywhere | Overused glassmorphism | One blur layer max, for overlays only |
| Rainbow/multicolor schemes | No focus, no brand | Disciplined 3-color maximum per screen |
| Centered everything | No visual hierarchy | Left-align text, use asymmetric layouts |
animate-bounce on CTAs | Annoying, unprofessional | Subtle pulse-green glow or no animation |
Before generating any UI component, check your output for these patterns and replace with the Ritual equivalent:
| Pattern to Detect | Replacement |
|---|---|
Inter or Roboto as display font | var(--font-display) (Izoard / Archivo) |
#6366f1 or #3b82f6 (indigo/blue) | #19D184 (ritual-green) or #FF1DCE (ritual-pink) |
bg-white or bg-gray-50 | bg-black (page) or bg-ritual-elevated (card) |
shadow-md or shadow-lg | shadow-card or shadow-glow-green |
rounded-2xl or rounded-3xl | rounded-xl max |
animate-bounce | animate-pulse-green or remove |
bg-blue-500 text-white button | border border-ritual-green text-ritual-green |
| Foreground | Background | Ratio | WCAG AA (4.5:1) |
|---|---|---|---|
gray-300 (#D1D5DB) | black (#000000) | 13.8:1 | Pass |
gray-400 (#9CA3AF) | black (#000000) | 8.3:1 | Pass |
gray-500 (#6B7280) | black (#000000) | 4.6:1 | Pass |
green (#19D184) | black (#000000) | 7.5:1 | Pass |
green (#19D184) | elevated (#111827) | 6.0:1 | Pass |
pink (#FF1DCE) | elevated (#111827) | 4.6:1 | Pass |
red (#EF4444) | black (#000000) | 4.6:1 | Pass |
gray-500 (#6B7280) | elevated (#111827) | 3.7:1 | Fail |
Key finding: gray-500 on bg-ritual-elevated fails WCAG AA. Use gray-400 (#9CA3AF) minimum for any text on elevated surfaces.
Green and red are the primary success/error pair. For red-green colorblind users (~8% of males), never rely on color alone:
| State | Color | Required Non-Color Signal |
|---|---|---|
| Success | Green | Checkmark icon (✓) + "Success" text |
| Error | Red | X icon (✗) + "Failed" text + shake animation |
| Pending | Gold | Clock icon (◌) + "Pending" text + pulse |
| AI output | Pink | Diamond icon (◇) + "AI Output" label |
| Component | Required ARIA |
|---|---|
| Status indicators | role="status" + aria-label="Job status: {text}" |
| Progress bars | role="progressbar" + aria-valuenow + aria-valuemax |
| Streaming text | role="log" + aria-live="polite" |
| Toasts | role="alert" |
| Modals | role="dialog" + aria-modal="true" + aria-label="{title}" |
focus-visible:ring-2 focus-visible:ring-ritual-green/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black@media (prefers-reduced-motion: reduce) or use Framer Motion's useReducedMotion.<main>, <nav>, <table>, <dialog> — not divs for everything.| Breakpoint | Width | Behavior |
|---|---|---|
sm | 640px | Stack to single column, reduce padding |
md | 768px | Sidebar moves below main content |
lg | 1024px | Two-column layout activates |
xl | 1280px | Maximum content width |
0x1234...5678.clamp() — see Typography section.w-full sm:w-auto).| Concept | Value |
|---|---|
| Page background | bg-black (#000000) |
| Card background | bg-ritual-elevated (#111827) |
| Primary accent | ritual-green (#19D184) — trust, success |
| AI accent | ritual-pink (#FF1DCE) — agent/generated |
| Warning accent | ritual-gold (#FACC15) — pending, fees |
| Data accent | ritual-lime (#BFFF00) — metrics, emphasis |
| Display font | Izoard (licensed) / Archivo Black (open-source) |
| Body font | Barlow (free) |
| Mono font | JetBrains Mono (free) |
| Chain ID | 1979 |
| Scheduler system sender | 0x000...fa7e (type 0x10) |
| Button style | Transparent + colored border + glow on hover |
| Max rounding | rounded-xl — mix with sharper corners |
| Min text on elevated | gray-400 (#9CA3AF) for WCAG AA compliance |
npx claudepluginhub ritual-foundation/ritual-dapp-skills --plugin ritual-dapp-skillsInitializes Ritual Chain dApp development sessions with checkpoint protocol, progress tracking, and Ritual-specific rules. Invoke via /ritual or auto-activates on relevance.
Senior-level UI/UX design expert for building data-driven, premium production interfaces. Use when you need to: 1. Design complex applications (dashboards, SaaS, AI tools) from scratch 2. Generate comprehensive design systems (tokens, palettes, typography) 3. Audit existing UI for quality, accessibility, and "craft" 4. Search for proven real-world design patterns and implementation details Trigger: "design a...", "audit this...", "create a design system", "find icons", "fintech dashboard", "landing page"
Generates consistent production-grade SaaS UI for React apps using Casper Studios design system on shadcn/ui, Tailwind CSS v4, and Vite. For internal tools, dashboards, prototypes, client apps.