JASYTI's Pop Palette Style Guide • Modern, Glowy, Readable
This reference page shows how the palette, spacing, type, and layout come together across real components. Tweak variables once; review here.
LIVE DEMO • RED ACCENT
Typography • Heading Hierarchy & Body Text
H1 Electric Blue
H2 Mid Blue
H3 Soft Cyan
H4 Pale Blue-Gray
H5 Off-White Subheader
H6 Muted Gray-Cyan
Body paragraph text uses the neutral light gray for long-form readability on a dark canvas. The link style uses a softer cyan by default and shifts toward red on hover for clear feedback.
Lead text emphasizes introductory content with a slightly larger size.
Small / caption text helps with secondary labels and notes.
- Unordered list item one
- Unordered list item two
- Unordered list item three
- Ordered item one
- Ordered item two
- Ordered item three
Quotes • Blockquote Styling
“Blockquote wrapped in a card to demonstrate contrast and spacing.”
Buttons & Toolbars • Primary Controls
Buttons use consistent padding, borders, and transitions. Primary buttons carry the electric cyan fill, outline leans on strokes, danger uses red, and disabled reduces interactivity and opacity without layout shifts.
Layout • Containers, Flex, and Grid
Flex Center
Grid 2 Columns
Grid 3 Columns
Cards • Standard, Profile, and Success Variants
Standard Card
Demonstrates the accent border, rounded corners, and shadow depth that separate content from the dark canvas while maintaining contrast.
Profile Card
John Barkle
Full-stack learner. Focused on clean, fast, accessible UI.
Success Card
This variant demonstrates the .card--success class, using
a neon-green border and glow to signify a positive or completed state.