o ' + + . . '
' . o
* .
' .
. + . | +
| ' . -- --* + |
-- -- * / | . . -+-
| / | ' |
. * - - '
. | + +
* .-'""'-. |
* .' () . '. -*-
. / . o \ . | /
' | o _ () ; / +
' : (_) ; | . o * . '
. ' \ . o / - * -
' '. O . .' | . . '
'-....-' ' * '
. . .
. +
' o ' .
' ' ' +
' \ . . . o '
' \
* * ' .
' . /
| | o ' /
- o - --o-- _|_ . *
| | ' |
calcy
Overview
This template features a soft, lo-fi purple color scheme with thick shadow buttons that maintain their color on hover. The design uses muted tones for a calming aesthetic while preserving the distinctive ASCII-style character.
Key Features
- Thick multi-layer shadow effects with subtle animations
- Soft, muted purple theme for a lo-fi aesthetic
- Clean slide-out navigation menu with purple shadow accents
- Responsive design with mobile-first approach
- ASCII decorative elements maintaining the retro aesthetic
- Consistent button colors with movement-only hover effects
How to Use
Click the MENU button in the top-right corner to reveal the slide-out navigation panel. The overlay softly dims the background content for better focus. Quick links provide direct access to all sections with subtle hover animations.
All buttons feature a distinctive thick shadow that responds to user interaction with movement only, maintaining color consistency throughout.
Documentation
The design system uses CSS custom properties for easy theme customization. Key variables include:
- --primary: Soft purple color (#9f7aea)
- --shadow-color: Muted gray shadow for subtle depth
- --pixel-border: Border thickness for retro pixel look
For more information, visit documentation portal.
Frequently Asked Questions
Q: Can I customize the color scheme?
A: Yes! All colors are defined as CSS variables in the :root selector for easy modification.
Q: Is this design accessible?
A: The soft color palette maintains good contrast ratios for comfortable reading.
Q: Can I add images?
A: Absolutely, though the design philosophy is text-first with ASCII enhancements.
Contact Information
Get in touch for questions or feedback:
Email: hello@example.com
GitHub: @example
Twitter: @example