Retrosystem

Chalk Blackboard

🔥 Certified BangerThis prompt produces genuinely distinct output

Generates UI that feels hand-drawn on a dusty blackboard — chalky white text on dark slate green, imperfect lines, mathematical notation vibes, and the nostalgic warmth of a classroom after hours.

chalkhand drawnblackboardeducationnostalgic

Added February 16, 2026 by unslop.dev

Example output

Lecture notes card

      *
      Lecture 12 — Data Structures
    
A binary search tree maintains sorted order through its structure. For any node n, all values in the left subtree are < n and all values in the right subtree are > n.

      → see also: AVL trees, Red-Black trees

View code

<div style="padding: 2rem; background: #1a2a1a;">
  <div style="max-width: 26rem; border: 1px dashed rgba(232,228,216,0.3); padding: 1.5rem; font-family: 'Courier New', 'American Typewriter', monospace;">
    <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid rgba(232,228,216,0.25);">
      <span style="font-size: 0.75rem; color: #f0d060;">*</span>
      <span style="font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: #e8e4d8; font-weight: 700;">Lecture 12 — Data Structures</span>
    </div>
    <p style="font-size: 0.8125rem; color: rgba(232,228,216,0.7); line-height: 1.7; margin: 0 0 1rem 0;">A binary search tree maintains sorted order through its structure. For any node <span style="color: #f0d060;">n</span>, all values in the left subtree are <span style="color: #88bbdd;">&lt; n</span> and all values in the right subtree are <span style="color: #88bbdd;">&gt; n</span>.</p>
    <div style="display: flex; gap: 0.75rem; align-items: center;">
      <span style="font-size: 0.6875rem; color: rgba(232,228,216,0.4);">→ see also: AVL trees, Red-Black trees</span>
    </div>
  </div>
</div>

Chalk button row

View code

<div style="padding: 2rem; background: #1a2a1a; font-family: 'Courier New', 'American Typewriter', monospace; display: flex; gap: 0.75rem; flex-wrap: wrap;">
  <button style="background: transparent; border: 1px solid rgba(232,228,216,0.5); color: #e8e4d8; padding: 0.5rem 1.25rem; font-size: 0.75rem; font-family: inherit; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;">Next Slide →</button>
  <button style="background: transparent; border: 1px dashed rgba(240,208,96,0.4); color: #f0d060; padding: 0.5rem 1.25rem; font-size: 0.75rem; font-family: inherit; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;">* Important</button>
  <button style="background: transparent; border: 1px dashed rgba(136,187,221,0.3); color: #88bbdd; padding: 0.5rem 1.25rem; font-size: 0.75rem; font-family: inherit; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer;">Reference</button>
  <button style="background: transparent; border: 1px solid rgba(232,228,216,0.15); color: rgba(232,228,216,0.3); padding: 0.5rem 1.25rem; font-size: 0.75rem; font-family: inherit; text-transform: uppercase; letter-spacing: 0.1em; cursor: not-allowed;">[Erased]</button>
</div>

Grade summary

— Quiz Results (Feb 16) —
A+
Algorithms
92
Networks
78
Compilers
∴ class avg: 87.3

View code

<div style="padding: 2rem; background: #1a2a1a; font-family: 'Courier New', 'American Typewriter', monospace;">
  <div style="max-width: 28rem;">
    <p style="font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(232,228,216,0.4); margin: 0 0 1rem 0;">— Quiz Results (Feb 16) —</p>
    <div style="display: flex; gap: 0;">
      <div style="flex: 1; border: 1px dashed rgba(232,228,216,0.2); padding: 1.25rem; text-align: center;">
        <p style="font-size: 2rem; color: #f0d060; margin: 0; line-height: 1;">A+</p>
        <p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(232,228,216,0.4); margin: 0.5rem 0 0 0;">Algorithms</p>
      </div>
      <div style="flex: 1; border: 1px dashed rgba(232,228,216,0.2); border-left: none; padding: 1.25rem; text-align: center;">
        <p style="font-size: 2rem; color: #88bbdd; margin: 0; line-height: 1;">92</p>
        <p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(232,228,216,0.4); margin: 0.5rem 0 0 0;">Networks</p>
      </div>
      <div style="flex: 1; border: 1px dashed rgba(232,228,216,0.2); border-left: none; padding: 1.25rem; text-align: center;">
        <p style="font-size: 2rem; color: #dd8899; margin: 0; line-height: 1;">78</p>
        <p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(232,228,216,0.4); margin: 0.5rem 0 0 0;">Compilers</p>
      </div>
    </div>
    <p style="font-size: 0.625rem; color: rgba(232,228,216,0.25); margin: 0.75rem 0 0 0; text-align: right;">∴ class avg: 87.3</p>
  </div>
</div>

To-do checklist

Today's Assignments* = due tomorrow

        ✓
        Read chapters 8-10 on graph theory
      
        ✓
        Problem set 4, questions 1-5
      
        ○
        Implement Dijkstra's algorithm *
      
        ○
        Write proof for problem 6
      
        ○
        Office hours — bring questions about P vs NP
      
      2/5 completed → 40%

View code

<div style="padding: 2rem; background: #1a2a1a; font-family: 'Courier New', 'American Typewriter', monospace;">
  <div style="max-width: 24rem; border: 1px dashed rgba(232,228,216,0.25); padding: 1.5rem;">
    <h3 style="font-size: 1rem; color: #e8e4d8; margin: 0 0 0.25rem 0; border-bottom: 2px solid rgba(232,228,216,0.25); padding-bottom: 0.625rem;">Today's Assignments</h3>
    <p style="font-size: 0.625rem; color: rgba(232,228,216,0.3); margin: 0 0 1rem 0;">* = due tomorrow</p>
    <div style="display: flex; flex-direction: column; gap: 0.625rem;">
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <span style="font-size: 0.875rem; color: #f0d060;">✓</span>
        <span style="font-size: 0.8125rem; color: rgba(232,228,216,0.4); text-decoration: line-through;">Read chapters 8-10 on graph theory</span>
      </div>
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <span style="font-size: 0.875rem; color: #f0d060;">✓</span>
        <span style="font-size: 0.8125rem; color: rgba(232,228,216,0.4); text-decoration: line-through;">Problem set 4, questions 1-5</span>
      </div>
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <span style="font-size: 0.875rem; color: rgba(232,228,216,0.2);">○</span>
        <span style="font-size: 0.8125rem; color: #e8e4d8;">Implement Dijkstra's algorithm *</span>
      </div>
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <span style="font-size: 0.875rem; color: rgba(232,228,216,0.2);">○</span>
        <span style="font-size: 0.8125rem; color: #e8e4d8;">Write proof for problem 6</span>
      </div>
      <div style="display: flex; align-items: center; gap: 0.75rem;">
        <span style="font-size: 0.875rem; color: rgba(232,228,216,0.2);">○</span>
        <span style="font-size: 0.8125rem; color: #88bbdd;">Office hours — bring questions about P vs NP</span>
      </div>
    </div>
    <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px dashed rgba(232,228,216,0.15);">
      <span style="font-size: 0.625rem; color: rgba(232,228,216,0.25);">2/5 completed → 40%</span>
    </div>
  </div>
</div>

Theorem proof block

* Theorem 3.7
For every connected graph G with n vertices and m edges, the number of faces f in any planar embedding satisfies:

      n - m + f = 2
    
Proof sketch:
Begin with a spanning tree T of G, which has n - 1 edges and 1 face. Each of the remaining m - (n-1) edges adds exactly one face when reinserted...

      → Euler, 1752
      □
    

View code

<div style="padding: 2rem; background: #1a2a1a; font-family: 'Courier New', 'American Typewriter', monospace;">
  <div style="max-width: 30rem; padding-left: 1.5rem; border-left: 2px solid rgba(240,208,96,0.3);">
    <p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: #f0d060; margin: 0 0 0.875rem 0;">* Theorem 3.7</p>
    <p style="font-size: 1rem; color: #e8e4d8; margin: 0 0 1rem 0; line-height: 1.6; font-style: italic;">For every connected graph G with n vertices and m edges, the number of faces f in any planar embedding satisfies:</p>
    <div style="text-align: center; padding: 1rem 0; margin: 0.5rem 0;">
      <span style="font-size: 1.5rem; color: #f0d060; letter-spacing: 0.05em;">n - m + f = 2</span>
    </div>
    <p style="font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.15em; color: #88bbdd; margin: 0.875rem 0 0.625rem 0;">Proof sketch:</p>
    <p style="font-size: 0.8125rem; color: rgba(232,228,216,0.6); line-height: 1.7; margin: 0 0 0.875rem 0;">Begin with a spanning tree T of G, which has <span style="color: #f0d060;">n - 1</span> edges and <span style="color: #f0d060;">1</span> face. Each of the remaining <span style="color: #88bbdd;">m - (n-1)</span> edges adds exactly one face when reinserted...</p>
    <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px dashed rgba(232,228,216,0.1);">
      <span style="font-size: 0.625rem; color: rgba(232,228,216,0.25);">→ Euler, 1752</span>
      <span style="font-size: 0.875rem; color: rgba(232,228,216,0.2);">□</span>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt

You generate UI with a blackboard/chalkboard aesthetic — the visual atmosphere of a professor's blackboard after a brilliant lecture. Chalky white and colored text on dark slate-green, slightly imperfect alignments that feel hand-drawn, mathematical notation styling, and the cozy intellectual warmth of a late-night study session. Digital interfaces that feel analog and academic.

VISUAL RULES:
- Background: Dark slate green. #1a2a1a for the blackboard surface, #141f14 for deeper areas, #223322 for slightly worn/lighter patches. Never black — always that distinctive dark green.
- Chalk white: #e8e4d8 — slightly warm, slightly dusty, not pure white. This is your primary text and line color.
- Chalk colors: Use sparingly like actual chalk. Yellow (#f0d060), pale blue (#88bbdd), soft pink (#dd8899), orange (#dd9955). These are muted, powdery, not saturated.
- Text rendering: Suggest a slight roughness. Use fonts that feel hand-written or academic: `font-family: 'Courier New', 'American Typewriter', monospace` for body, or a handwriting-style font for headings.
- Borders: 1px solid chalk-white at 30-40% opacity. Slightly uneven feel. Use dashed borders to suggest chalk lines: `border: 1px dashed rgba(232,228,216,0.35)`.
- Border radius: 0 to 4px. Chalk lines are straight. No smooth curves.
- Shadows: None. Chalk on a board is flat. No depth effects.
- Spacing: Academic and structured but slightly organic. Not pixel-perfect grid — things can be slightly off-aligned for the hand-drawn feel.
- Decorative elements: Asterisks (*), arrows (→), underlines (___), brackets, and mathematical symbols (+, =, ∴, ∑) as ornaments. Small chalk dust particles or eraser smudge effects.
- Underlines: Use bottom borders or text-decoration to underline important items, like a teacher would.

SPECIFIC PATTERNS:
- Cards: bg-[#1a2a1a] or slightly lighter, dashed chalk border, no shadow. Content arranged like notes on a board.
- Buttons: Bordered rectangles in chalk style. Dashed or solid 1px border in chalk-white. No fill. Uppercase monospace text. Hover: slightly brighter chalk color.
- Labels/badges: Circled or boxed text — like a teacher circling an answer. Chalk-colored border around text.
- Headings: Underlined with a chalk line (bottom border, slightly thicker — 2px). Can use chalk colors for emphasis.
- Lists: Use hand-drawn style bullets: *, -, or → in chalk-yellow.
- Dividers: A chalk line (1px solid at 25% opacity) across the full width. Or a wavy/dashed line.
- Numbers: Large, prominent, in chalk-yellow or chalk-white. Like numbers on a board during a proof.

ANTI-PATTERNS:
- No gradients. Chalk is flat.
- No drop shadows or glows. Nothing luminous.
- No saturated colors. All colors are powdery and muted.
- No rounded corners larger than 4px.
- No sans-serif headings that feel digital. Keep it academic/monospace.
- No dark mode toggle — this IS the dark mode, and it's the only mode.
- No glossy or metallic effects.

Related prompts

★ Quest Log

▶ Find the Lost Artifact

The Elder spoke of a relic hidden deep within the Crystal Caves. Bring it back before moonrise.

Deliver the Message

Gather 10 Herbs [DONE]

ATK: 42 DEF: 38 SPD: 56 LCK: 21

Retro

Pixel Retro

🔥79system

Generates UI with 8-bit game aesthetics — pixelated borders, chunky elements, limited color palettes, bitmap-style typography, and the nostalgic charm of early gaming interfaces.

Now Playing

Live

Side B — Evening Mix

Recorded Feb 14, 2026 · C-90

27:14

Retro

Cassette Tape

🔥79system

Generates UI with analog audio warmth — muted oranges and browns, VU meter aesthetics, tape reel decorations, and the cozy lo-fi quality of a well-loved mixtape. Press play on your interface.

My Notebook

The most beautiful interfaces are those that feel like they exist in the real world. Texture, light, and shadow create trust through familiarity.

Retro

Skeuomorphism

🔥91system

Generates UI with rich real-world textures — leather stitching, brushed metal, wood grain, linen backgrounds, and glossy glass buttons. iOS 6 energy. Every pixel pretends to be a physical material.