Design System Preview¶

Internal page for reviewing all visual components. Not linked in navigation.

Header Gradient¶

The header uses the Rebuy brand gradient across all pages:

Token: --rb-gradient-header

Typography Scale¶

The design system uses rem values calculated against Material's 20px root.

Headings¶

H1 Page Title

H2 Section Header

H3 Subsection

H4 Minor Section

Admonitions¶

Definition Lists (Query Parameters)¶

Used for API parameter documentation. Card-based layout with gray header and white body.

parameter_name · string · Default: value

Description of what this parameter does. Should be 14px font size to match admonitions and secondary content.

another_param · integer · Required

Another parameter description. The dt (header) should have a gray background with monospace font.

complex_param · object

This parameter has multiple paragraphs of description.

It can include additional context like this second paragraph.

And even code examples or lists if needed.

Method Badges¶

Inline badges for HTTP methods (pill-shaped, white text on solid background):

• GET Success/Green
• POST Info/Blue
• PUT Neutral/Purple
• PATCH Attention/Orange
• DELETE Danger/Red

Tokens: --rb-badge-get-bg, --rb-badge-post-bg, etc. (darker in dark mode for WCAG contrast)

Endpoint Display¶

API endpoint pages use a styled display block with method badge, full URL, variable highlighting, and copy button. Generated automatically by the endpoint_display.py hook when pages contain ## METHOD /path headings.

All Method Variants¶

Features¶

• Method badge: Pill-shaped, color-coded by HTTP method
• URL: Monospace font, muted color, no background
• Variable params: {id} wrapped in subtle background (.endpoint-var)
• Copy button: Appears on hover (always visible on mobile), shows checkmark on success

Code Blocks¶

JavaScript¶

// Example API call
const response = await fetch('https://rebuyengine.com/api/v1/products/recommended', {
  headers: {
    'Content-Type': 'application/json',
    'Rebuy-Api-Key': 'your-api-key'
  }
});

const data = await response.json();
console.log(data);

JSON Response¶

{
  "data": [
    {
      "id": 123456,
      "title": "Example Product",
      "price": "29.99",
      "variants": []
    }
  ],
  "metadata": {
    "count": 1
  }
}

Inline Code¶

Use inline_code for variable names, function calls like getData(), and file paths like src/components/Widget.tsx.

Tables¶

Blockquotes¶

This is a blockquote. Used for API endpoint descriptions and important callouts.

Lists¶

Unordered List¶

• First item
• Second item
• Nested item
• Another nested item
• Third item

Ordered List¶

1. First step
2. Second step
3. Sub-step A
4. Sub-step B
5. Third step

Links¶

• Internal link to Recommended endpoint
• External link to MkDocs Material

Buttons¶

Primary Button¶

Used for main CTAs. Uses dedicated --rb-btn-primary-* tokens that go darker in dark mode (opposite of link colors) to maintain WCAG contrast with white text.

Tokens:

Navigation Components¶

Tab Bar¶

Top navigation tabs on the gradient header. White text with background-based states:

States:

• Default: White text, no background
• Hover: background: rgba(255, 255, 255, 0.15)
• Active: Same as hover
• Focus: White outline ring

Sidebar Section Headers¶

Uppercase, small, muted text with top border separator:

Nav Link States:

• Default: color: var(--rb-text-muted)
• Hover: background: var(--rb-bg-hover)
• Active: background: var(--rb-brand-accent-bg); color: var(--rb-brand-accent-dark)

Sidebar Method Badges¶

Smaller than inline badges, right-aligned in nav items:

AI Actions Dropdown¶

Appears on every page (except homepage) in the H1 title area. Provides quick access to AI chat and copy functionality.

Features:

• Keyboard accessible: Arrow keys, Enter, Escape, Tab
• ARIA attributes for screen readers
• Focus trap when open
• Click outside to close

Toast Notifications¶

Appears at bottom-center of screen for copy confirmations and errors. Both our custom toast (.copy-toast) and Material's built-in clipboard toast (.md-dialog) use the same styling.

Tokens:

• Success: --rb-toast-success-bg (#059669), --rb-toast-success-fg (#fff)
• Error: --rb-toast-error-bg (#dc2626), --rb-toast-error-fg (#fff)

Keyboard Shortcuts¶

Styled <kbd> elements for keyboard shortcut hints:

Press ⌘ + K to search

Used on:

• 404 page search hint
• Jump To feature (future)

Focus States¶

All interactive elements have :focus-visible styles for keyboard navigation accessibility.

Pattern:

.interactive-element:focus-visible {
  outline: 2px solid var(--rb-brand-primary);
  outline-offset: 2px;
}

Elements with focus styles:

• Tab bar links (white outline on gradient)
• Sidebar nav links
• Buttons (primary, hero, 404 page)
• AI dropdown trigger and menu items
• Endpoint copy button
• Links (using Material default)

Color Tokens¶

Status Colors¶

Background Colors¶

Text Colors¶

Brand Colors¶

Spacing Scale¶

Based on 4px increments:

Border Radius¶

Shadows¶

Dark Mode¶

Toggle dark mode using the sun/moon icon in the header to verify all components work in both themes.

Key dark mode changes:

• Text colors lighten for contrast
• Background colors darken
• Status colors adjust for visibility
• Borders become lighter (white alpha)
• Badge/button backgrounds go darker (for WCAG contrast with white text)
• Brand primary goes lighter (for link text contrast)

Last updated: 2026-01-12