Prime Period Theory

PPT Applications Library

The <ppt-application> component provides a unified shell for standalone Prime Period Theory tools. It encapsulates the standard branding, typography, color palette, and global user preferences like the Solfège/Glyph toggle and Dark/Light Mode.

Application Layout (<ppt-application>)

Wrap any full-page PPT tool inside this component to instantly inherit the design system.

Hello, World!

This content is seamlessly injected into the application shell.

Try toggling the themes and Solfège glyphs in the header above!


Current Solfège:

View Source
<ppt-application app-title="My Cool Tool">
  <div class="my-tool-layout">
    <!-- Your app content goes here -->
  </div>
</ppt-application>

Attributes

  • app-title: The name of the application displayed in the header next to the logo. Defaults to "PPT Application".

CSS Variables Provided

Child elements can utilize these CSS variables to maintain visual consistency:

  • var(--bg-color): The main background color.
  • var(--panel-bg): Background color for panels and cards.
  • var(--border-color): Subtle borders for dividers and inputs.
  • var(--text-color): Primary text color.
  • var(--brand-primary): The core PPT brand red.