You can download the raw markdown file here: Download SKILL.md
ibbe design system
ibbe builds interfaces that feel like physical objects on a desk: thick charcoal borders, hard offset shadows, a spring-loaded snap when you touch anything. Every surface should read as deliberate and tactile rather than soft or corporate. Color stays restrained (cream and bone cover most of the canvas) so the personality lives in shape and motion rather than decoration. When a choice feels generic or safe, push toward the version with more weight, more contrast, or more attitude.Contents
- Token cheat sheet
- Color
- Typography
- Spacing
- Borders, radius, shadow (the physics)
- CSS variables and Tailwind config
- Components: cards, sticker, sidebar, omnibox
- Layout patterns: the editorial grid, the dossier layout
- Starter templates: home page, article page, omnibox demo
1. Token cheat sheet
Use these everywhere. Treat them as fixed; resist adding new hex values for “visual interest”. Color
Cream and bone together should cover roughly 80% of any screen.
Type: Inter (400 to 800) for voice, JetBrains Mono for data (timestamps, IDs, nav labels, buttons, code).
Spacing: 8px base unit; common stops are 4, 8, 12, 16, 24, 32px.
Shape: structural borders 3px solid charcoal; inner borders/active states 2px solid charcoal; dividers 1px solid
line. Outer containers (cards) round to 16px, inner elements (buttons, inputs) round to 12px, tags/pills snap sharp to 4px.
Motion: every hover and click moves the element on cubic-bezier(0.25, 0.8, 0.25, 1) while the shadow grows or shrinks, simulating an object lifting off or pressing into the page.
2. Color
Foundations
Semantic accents
Rules
Cream and bone act as neutral partners and should fill roughly 80% of any interface; layer them intentionally rather than randomly (cream for outer canvas, bone for the surfaces sitting on top of it). Charcoal on bone is the default text pairing and clears WCAG AA at every size used in this system. Color carries meaning: green always reads as “go”, red always reads as “stop”, blue always reads as “primary action or tech”, yellow always reads as “ops or visual category”. Gradients, soft pastel blues, or extra hexes added for visual interest sit outside the palette; resist them and push personality into shape and motion instead.3. Typography
Font pairing: Inter for voice (headlines, body, UI labels), JetBrains Mono for data (timestamps, IDs, navigation labels, buttons, code). System fallback for Inter:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif.
General UI scale
Use this scale for app-like surfaces: dashboards, settings, forms, sidebars, modals.Editorial scale
Use this scale for content/reading surfaces: the Journal home feed, article pages, hero blocks.Rules
Headers carry weight 700 or above to signal hierarchy at a glance; body copy stays at weight 400 for readability. Line-height runs generous for reading text (1.5 or higher) and tight for headings (around 1.1). UI labels (buttons, nav items, tags) typically render in lowercase rather than title case or caps; headings are the exception and can run in their natural case. Large headings tighten with negative letter-spacing per the tables above. Body text holds a 15px floor across the whole system. Inter ships without italic weights, so italics stay absent entirely. ALL CAPS stays reserved for JetBrains Mono / technical contexts (timestamps, IDs, nav chips) rather than headline text. Mixing in a third typeface, anywhere, sits outside the system: Inter and JetBrains Mono are the complete set.4. Spacing
8px base unit. Every margin, padding, and gap in the system resolves to one of these stops.
Card interiors typically use 24px to 48px of padding so type has room to breathe; the gap between cards in a grid is usually 24px or 32px.
5. Borders, radius, shadow (the physics)
Borders
Radius
Shadow and the tactile hover
Shadows sit hard and offset, never soft or blurred, and they shrink or grow to suggest the object lifting toward the cursor or pressing down on click.Entrance choreography
Content enters staggered rather than all at once, especially in a grid:6. CSS variables and Tailwind config
7. Components
The Journal Card family
Every card shares the same base, then a variant decides its grid span and internal layout.The Sticker
A small rotated tag that reads as a physical label slapped on top of a card, used to flag something as essential, new, or featured.The Sticky Sidebar
Acts as the table of contents or admin control panel for a page. Stays pinned while the canvas beside it scrolls.The Omnibox (URL-bar style nav)
A search/nav field styled like a browser address bar: pill-shaped and centered at rest, expanding into a left-aligned input with a suggestions dropdown on focus.8. Layout patterns
The editorial grid (“the desk”)
Listing and home pages use a 12-column asymmetric grid rather than a uniform card grid; the asymmetry (one big hero, a tall list beside it, then a mix of standard/wide/visual cards) is what makes the page feel like a curated desk rather than a generic feed.- Hero content: 8 columns, 2 rows.
- Lists / tall sidebars-within-the-grid: 4 columns, 2 rows.
- Standard cards: 4 columns.
- Wide cards: 6 columns.
- Visual/featured cards: 4 or 6 columns.
The dossier layout (article / detail pages)
Three columns at full width: a sticky left rail for the title and meta, a centered reading column, and a right rail of “marginalia” notes.::after pseudo-element rather than a simple underline, and list items swap their bullet for a bold arrow (→) in --blue.
Right rail (marginalia): a mix of definition boxes (term plus short description, framed by two horizontal rules), small rotated “note cards” (sticky-note styling: cream background, 2px border, hard offset shadow, a slight rotation, a colored uppercase label like “TECHNICAL NOTE”), and an occasional yellow “key takeaway” card pulling out a pull-quote-style line from the piece.
Responsive: around 1300px the grid drops to two columns (350px 1fr) and the marginalia rail steps out of the flow; below 900px it collapses to a single column, with the left rail becoming a normal (non-sticky) block above the article body.