Design System Quick Reference
Fast lookup guide for common patterns and components.
Which Design System?
Customer-facing page? → Use Anvil
Admin/internal tool? → Use Admin
Anvil (Customer) Quick Patterns
Colors
css
--comic-red: #EF3E4A /* Headers, buttons */
--comic-yellow: #FFDE00 /* Titles, highlights */
--comic-blue: #0A32F4 /* Backgrounds, icons */
--comic-black: #000000 /* Borders, strokes */
--comic-white: #FFFFFF /* Content areas */
Typography
```html
TITLE
SECTION
Card Title
Description text
$99.99
```
Card
erb
<%= render ComicDetailCardComponent.new(
title: "TITLE",
show_price: true,
price: 9999
) do %>
<!-- Content -->
<% end %>
Button
html
<button class="rounded-full border-5 border-comic-black bg-comic-red
font-headline text-3xl italic text-comic-yellow
shadow-comic-button hover:translate-y-1 hover:shadow-none"
style="-webkit-text-stroke: 2px var(--comic-black);">
CLICK ME!
</button>
Layout
```erb <% content_for :layout, ‘cart’ %>
layout ‘cart’ ```
Admin Quick Patterns
Colors
css
primary: #389cfa /* Actions, links */
background-light: #f5f7f8 /* Page background */
slate-600: #475569 /* Body text */
slate-900: #0f172a /* Headings */
Typography
```html
Page Title
Section
Description
```
Card
```html
```
Button
html
<button class="flex items-center gap-2 rounded-lg h-10 px-5
bg-primary text-white text-sm font-bold
shadow-sm hover:bg-primary/90">
<span class="material-symbols-outlined">add</span>
<span>Button</span>
</button>
Data Table
erb
<%= render Admin::DataTableComponent.new do |c| %>
<% c.with_head do %>
<tr><th>Column</th></tr>
<% end %>
<% c.with_body do %>
<tr><td>Data</td></tr>
<% end %>
<% end %>
Common Patterns
Status Badge (Admin)
html
<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full
text-xs font-medium bg-green-100 dark:bg-green-900/30
text-green-700 dark:text-green-400">
<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
Active
</span>
Icon (Anvil)
html
<span class="material-symbols-outlined text-comic-blue"
style="font-size: 72px;">
bolt
</span>
Icon (Admin)
html
<span class="material-symbols-outlined text-slate-400">
search
</span>
Grid Layout
```html
```
Border & Shadow Reference
Anvil
```css /* Border */ border-5 border-comic-black
/* Shadow / shadow-comic-hard / 10px offset, black / shadow-comic-button / 5px offset, dark red */ ```
Admin
```css /* Border */ border border-slate-200 dark:border-slate-700
/* Shadow / shadow-sm / Subtle / shadow-md / Medium */ ```
Spacing Reference
```css gap-2 /* 8px - Tight / gap-4 / 16px - Normal / gap-6 / 24px - Loose / gap-8 / 32px - Wide */
p-4 /* 16px - Small padding / p-6 / 24px - Medium padding / p-8 / 32px - Large padding */
mb-4 /* 16px - Between elements / mb-6 / 24px - Between components / mb-8 / 32px - Between sections / mb-12 / 48px - Between major sections */ ```
Responsive Breakpoints
css
sm: /* 640px - Small tablet */
md: /* 768px - Tablet */
lg: /* 1024px - Desktop */
xl: /* 1280px - Large desktop */
Common Responsive Patterns
```html