Reflect Notes

Reflect Notes evokes a deep, intellectual calm, like a thoughtful, organized mind brought to digital life. The consistent dark violet canvas sets a contemplative mood, while subtle gradients and inset shadows carve out interactive elements and content zones with precision. A single powerful violet serves as the primary accent, drawing focus and providing clear affordances without overwhelming the subdued aesthetic. The interplay of soft, almost translucent cards with sharp typography gives the UI a distinctly thoughtful and elevated feel. Use Deep Violet (#030014) as the primary page background to maintain the consistent dark, immersive aesthetic. Apply Reflect Violet (#5046e4) exclusively to primary call-to-action buttons for powerful, unambiguous interaction. Maintain a clear visual hierarchy using AeonikPro (substitute: Montserrat) for all headings (sizes 24px-72px) and Inter V (substitute: Inter) for all body and UI text (sizes 12px-18px). Employ the 16px border-radius for all primary content cards to establish visual consistency and a subtle softness. Utilize rgba(255, 255, 255, 0.01) for card backgrounds to allow the underlying page gradients and dark tones to create depth. Implement the Halo Inset Gradient (linear-gradient(rgba(183, 164, 251, 0) 0px, rgb(183, 164, 251) 100%, rgb(133, 98, 255) 100%, rgba(133, 98, 255, 0) 0%)) for feature backgrounds to give an internal glow. Avoid using highly saturated colors other than Reflect Violet for interactive elements; stick to the muted violet palette. Do not introduce sharp corners; maintain the consistent 5px, 6px, 8px, 16px, or 32px border radii for elements. Do not use external drop shadows for elevation; rely on transparent backgrounds and subtle inset shadows like rgba(255, 255, 255, 0.04) 0px 0px 24px 0px inset. Do not deviate from the Inter V and AeonikPro font families; alternative fonts would compromise the precise, thoughtful tone. Avoid arbitrary custom padding values; adhere to the 4px base unit and specified spacing tokens (e.g., 8px, 12px, 16px, 20px, 24px, 28px). Do not replace the subtle gradient backgrounds with solid colors, as the gradients are central to the 'orbit' aesthetic.