Exploring ruled paper cards, sticky notes, tape overlays, wooden desk backgrounds, and manila folder containers for the Sundog visual overhaul.
Cards styled as notebook paper with horizontal ruled lines and a left margin line. These mimic classic lined notebook pages.
The Sundog Project demonstrates that indirect measurement through photometric signals can provide sufficient information for navigation and control tasks.
This ruled paper effect uses CSS gradients to create horizontal lines that repeat at consistent intervals, creating the familiar notebook aesthetic.
Given partial observability, an agent can still achieve alignment through careful measurement of indirect signals.
The left margin line (in red/pink) adds authenticity to the notebook paper metaphor.
CSS class: .sd-paper-card
Uses linear-gradient for ruled lines and background-size to control line spacing (1.5rem default).
Post-it style notes with subtle rotation at rest and enhanced tilt on hover. Available in multiple pastel colors.
Quick reminder: Update the documentation to reflect the new theme patterns.
Sticky-note color tokens remain available as accents under Option C; text inherits the body sans stack.
Pink sticky note for urgent items or special emphasis.
Blue sticky note for informational content or calm reminders.
Green sticky note for success states or positive feedback.
Hover over any sticky note to see the enhanced tilt and shadow effect!
Semi-transparent tape effects that can "fasten" cards to the page. These decorative elements add tactile realism.
This card has a tape overlay positioned at the top center, as if it were fastened to a surface.
The tape has a subtle texture and frosted glass appearance with realistic shadows.
Tape positioned at the top-left corner with a different rotation angle.
Tape positioned at the top-right corner for asymmetric visual interest.
A dark wood grain background that evokes a workspace surface. Apply data-theme="desk" to body or use .sd-desk-bg class.
This paper card sits on a wooden desk background, creating a realistic workspace aesthetic.
The wood grain texture is created entirely with CSS gradients—no images required.
Tan/cream containers styled as manila folders or clipboards, perfect for navigation or content areas.
This container has a manila folder appearance with a subtle paper texture and realistic edge shadows.
The tan/cream color palette evokes traditional office filing systems.
Add the .with-tab modifier class to show a folder tab at the top.
This variant is ideal for sections that should appear as distinct folders or categories.
Demonstrating multiple paper-inspired effects working together in harmony.
This paper card includes a tape overlay, creating a layered, realistic effect.
The combination of ruled paper, tape fastening, and folder container creates a cohesive analog workspace aesthetic.
Remember to run Phase 6 baselines!
Check three-body integration tests.
All these effects work together to create a tactile, paper-based interface that maintains the scientific credibility of the Sundog brand.
The paper-inspired theme introduces three distinct typography voices:
Used for major titles and prestigious headings. Georgia and Times New Roman provide classical authority.
Used for technical content, data labels, and code snippets. Maintains scientific credibility with clean monospace rendering.
Reserved for an Option-A or Option-D direction. Removed from the live token roster on 2026-05-08; see UI_UX_THEME_FOUNDATION.md.
✓ DO: Use ruled paper for research notes, evidence panels, and content cards
✓ DO: Use sticky notes for highlights, reminders, and informal asides
✓ DO: Use manila containers for navigation areas and section groupings
• All paper effects degrade gracefully on older browsers
• Handwritten fonts are kept at minimum 16px (1rem) for readability
• prefers-reduced-motion removes tilt animations
• WCAG AA contrast ratios maintained throughout (4.5:1 for body text)
• Focus indicators remain visible on all interactive elements