R
Rideful Slides

Visual Design Techniques for AI Presentations

8 visual techniques that transform plain slides into professional presentations, plus 10 reference color palettes.

When an AI agent creates a presentation with Rideful, it applies intentional visual design to every slide. Without these techniques, agents default to plain centered text on a white background — which looks unprofessional. This page documents the design vocabulary that agents use behind the scenes to produce polished results.

Tip: Enable extended thinking on your AI assistant for the best design results. The extra reasoning time lets the agent deliberate on technique combinations and color choices before building.

The 8 Visual Techniques

Every presentation uses at least 2-3 of these techniques. They work together to create visual hierarchy, contrast, and professional polish.

1. Color Blocks

Filled rectangles covering 30-60% of the slide as background sections. Text is placed on top for contrast. This is the most common technique — it instantly adds structure to a slide by dividing it into distinct visual zones.

Implementation: A shape element with shapeType: "rectangle" and a fillColor. Typical dimensions: 500-770px wide, full 720px height.

2. Split Backgrounds

Two side-by-side rectangles in different colors to create a two-tone slide. Common splits are 40/60 or 30/70 — asymmetric ratios look more dynamic than a 50/50 split.

3. Accent Lines

Horizontal or vertical lines (2-4px) to separate sections or underline titles. A small detail that adds visual structure without taking up space.

Implementation: A line element with strokeWidth: 3 and a contrasting strokeColor.

4. Stat Callouts

Oversized numbers (48-72pt) in a colored shape to highlight key metrics. The extreme font size draws the eye immediately, making data points memorable. Often paired with a smaller label underneath.

5. Extreme Size Contrast

Pair large titles (44-60pt) with small body text (12-14pt) for visual impact. The size difference creates natural hierarchy — the reader's eye goes to the large text first, then discovers the details.

6. Side Accent Bars

A tall, narrow colored rectangle (10-20px wide) along the left edge of the slide. Adds a design accent with minimal visual weight. Often uses a brand or palette accent color.

Implementation: A shape with dimensions like x: 0, y: 0, width: 16, height: 720.

7. Icon-Style Circles

Small colored circles with single characters or numbers inside as visual markers. Useful for numbered lists, step indicators, or category labels.

Implementation: A shape with shapeType: "circle" (40-60px diameter) and the number or character as the shape's text property.

8. Overlapping Shapes

Layer shapes with different opacities to create depth and visual interest. For example, a semi-transparent rectangle behind a solid one creates a shadow-like effect.

Reference Color Palettes

AI agents select from or adapt these palettes when creating new presentations. Plain white with black text is never used as a default — every deck gets an intentional color scheme.

  • Classic Blue: #1C2833 #2E4053 #AAB7B8 #F4F6F6Professional and authoritative — ideal for corporate and strategy decks
  • Teal & Coral: #5EA8A7 #277884 #FE4447 #FFFFFFVibrant contrast — great for marketing and product launches
  • Warm Blush: #A49393 #EED6D3 #E8B4B8 #FAF7F2Soft and elegant — suited for lifestyle, wellness, or creative topics
  • Purple & Emerald: #B165FB #181B24 #40695B #FFFFFFBold and modern — works well for tech and innovation themes
  • Black & Gold: #BF9A4A #000000 #F4F6F6Premium and luxurious — perfect for executive summaries and high-stakes pitches
  • Sage & Terracotta: #87A96B #E07A5F #F4F1DE #2C2C2CEarthy and warm — good for sustainability, education, or community topics
  • Charcoal & Red: #292929 #E33737 #CCCBCB #F4F6F6High-energy and urgent — ideal for action-oriented presentations
  • Forest & Lime: #191A19 #4E9F3D #1E5128 #FFFFFFNatural and grounded — fits environmental, health, and growth narratives
  • Orange & Turquoise: #FC993E #667C6F #FCFCFCFriendly and approachable — great for team updates and internal comms
  • Burgundy Luxury: #5D1D2E #951233 #C15937 #997929Rich and sophisticated — suited for finance, wine, or heritage brands

Layout Guidance

  • Match layout to content: The agent counts content pieces before choosing a layout. A 3-column layout won't be used for 2 items, and placeholders are never left empty.
  • Asymmetric layouts: For text + visual pairs, agents use 40/60 or 30/70 splits instead of equal halves. Asymmetry looks more dynamic and professional.
  • Breathing room: At least 40-60px margins from slide edges. Agents don't fill every pixel — whitespace is an intentional design choice.
  • Consistent styling with masterStyles: When creating a multi-slide deck, agents use the masterStyles property in slides_bulk_create to enforce the same background, text colors, and fonts across all slides.

Code Example

A single slide applying 3 techniques — a color block on the left 40%, a vertical accent line as a divider, and a stat callout with an oversized number:

// A slide using 3 techniques: color block, accent line, stat callout
slides_bulk_create_elements({
  deckId: "abc123",
  slideId: "slide-2",
  elements: [
    // 1. Color block — dark rectangle covering left 40% of slide
    {
      type: "shape",
      shapeType: "rectangle",
      x: 0, y: 0,
      width: 512, height: 720,
      fillColor: "#1C2833"
    },
    // 2. Accent line — vertical separator between sections
    {
      type: "line",
      x: 512, y: 60,
      width: 0, height: 600,
      strokeColor: "#AAB7B8",
      strokeWidth: 3
    },
    // 3. Stat callout — oversized number on the dark side
    {
      type: "text",
      role: "body",
      text: "**92%**",
      x: 80, y: 200,
      width: 360, height: 100,
      fontSize: 72,
      fontFamily: "Inter",
      fontColor: "#F4F6F6"
    },
    // Label below the stat
    {
      type: "text",
      role: "body",
      text: "Customer satisfaction rate",
      x: 80, y: 310,
      width: 360, height: 40,
      fontSize: 18,
      fontFamily: "Lato",
      fontColor: "#AAB7B8"
    },
    // Title on the light side
    {
      type: "text",
      role: "title",
      text: "Key Metrics",
      x: 560, y: 80,
      width: 660, height: 60,
      fontSize: 40,
      fontFamily: "Inter",
      fontColor: "#1C2833"
    },
    // Body content on the light side
    {
      type: "text",
      role: "body",
      text: "- Response time under 2 hours\n- 15% increase QoQ\n- NPS score of 78",
      x: 560, y: 180,
      width: 660, height: 300,
      fontSize: 16,
      fontFamily: "Lato",
      fontColor: "#2E4053"
    }
  ]
})

Common Issues

  • Plain white background with black text: This is the most common sign that an agent skipped the design step. Rideful's workflow requires agents to choose from a color palette and present a design plan before building.
  • Using arbitrary font names: Agents must call slides_list_fonts to discover available fonts. Using a font that isn't in the library may cause it to render as a fallback, breaking the intended design.
  • Missing masterStyles: Without master styles, each slide in a multi-slide deck may end up with different backgrounds or fonts, creating a visually inconsistent presentation.

Related