---
name: light-mode-paper-technical
description: "Create a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals."
---

# Light Mode Paper Technical Skill

## Use When
- Create a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals.

## Workflow

## Scope
- Apply this as a full design-system direction across shell, layout, typography, navigation, cards, mockups, background treatment, and motion.
- Use it when the interface should feel bright, refined, and technical, but warmer and more tactile than a cold white enterprise dashboard.
- This is not plain minimal light mode and not editorial paper alone. It should combine paper-like surfaces with precise product-tech framing.

## Visual target
- Build the main experience on warm off-white, parchment, or soft paper-toned surfaces instead of stark white.
- Wrap the lighter interior inside a darker outer shell or surrounding field so the content area feels framed, elevated, and intentional.
- Add subtle technical structure: thin borders, inset rules, L-brackets, tiny corner details, diagonal background texture, and measured spatial guides.
- Use one restrained accent color for active states, labels, progress, or focal details. The accent should punctuate the system rather than dominate it.
- Keep the overall result premium and contemporary: rounded container shells are acceptable, but internal layout logic should remain crisp and technical.

## Implementation guidance
- Prefer a framed master container with generous radius, soft shadow, and a light paper interior placed against a darker page background.
- Use warm neutrals for primary surfaces, then separate layers with slightly darker paper tones, soft borders, and gentle contrast instead of bright white-on-gray UI.
- Add low-contrast diagonal texture or fine patterning to large paper regions so the background feels material and lightly engineered.
- Use clean sans-serif typography for interface content and optional mono utility text for timestamps, captions, browser chrome, transcript cues, or metadata.
- Build product surfaces such as app mockups, transcript panes, sidebars, or session cards with bright clean interiors, careful spacing, and delicate border hierarchy.
- Motion should stay calm and polished: masked headline reveals, fade-up sections, controlled card entrance, and subtle activity indicators are appropriate.

## Recommended patterns
- Dark outer page with a large light rounded container holding the whole experience.
- Inner framing system using inset border rectangles, small corner brackets, and quiet technical lines over paper-toned backgrounds.
- Warm light app panels with browser chrome, transcript windows, sidebars, or dashboard modules nested inside the main shell.
- Accent-driven live states such as active bullets, tiny dividers, progress marks, highlighted words, or primary call-to-action buttons.
- Paper-technical contrast: soft, readable, welcoming surfaces paired with precise geometry and system-level visual discipline.

## Tuning knobs
- Paper warmth: shift between cooler stone paper and warmer parchment depending on the brand mood.
- Framing strength: add or reduce brackets, boundary lines, and technical rules depending on how instrumented the design should feel.
- Roundness: keep outer shells softly rounded, but avoid over-softening inner layout structures.
- Accent intensity: keep the accent crisp and memorable, but let warm neutrals carry most of the interface.
- Texture amount: maintain subtle patterning so the paper feel reads without becoming noisy or vintage.

## Avoid
- Flat plain white SaaS layouts with no material warmth or framing logic.
- Heavy vintage paper distressing that makes the interface feel old or dirty.
- Cold enterprise blue-gray systems that lose the soft paper character.
- Overusing rounded blobs or generic consumer-app softness that fights the technical structure.
- Excessive accent usage that turns the paper system into a loud marketing palette.