Preview image. Unlock full-res
whiteboard and violet ink. A stark white teaching surface, annotated with confident, vivid purple markings to guide and activate.
Uxcel employs a crisp, professional learning platform aesthetic: a bright white canvas framed by subtle gray surface cards. A vibrant violet accent color is precisely delivered as active states and primary calls-to-action, contrasting sharply with the otherwise monochrome palette. Typography is tightly tracked, creating a dense, information-rich feel, while generous border-radii on all interactive elements soften the overall impression, balancing seriousness with approachability. Prioritize a bright, spacious feel: use Cloud White (#ffffff) for primary backgrounds and Whisper Gray (#f8f8f8) for secondary section backgrounds. Use Virtual Violet (#513deb) exclusively for critical calls-to-action and active interactive states to maintain its impact. Apply Inter typeface with precise letter-spacing; use tight tracking (e.g., -1.45px for display, -0.96px for display-sm) for headlines to create a sharp, modern feel. Employ generous border-radii: 20px for cards, buttons, and contained elements, and 100px for all pill-shaped buttons and interactive tags. Define interactive elements with subtle borders like 1px Platinum Gray (#d7d7d9) or 10% opacity Ink Black (#05060f) when not using a filled background. Utilize elevation only for prominent cards, applying the shadow rgba(0, 19, 41, 0.01) 0px 10px 32px 0px, rgba(0, 19, 41, 0.02) 0px 2px 0px 0px, rgba(0, 19, 41, 0.02) 0px 0px 24px 0px. Do not use saturated colors other than Virtual Violet (#513deb) for primary interactive elements; reserve other chromatic colors for semantic badges. Avoid heavy shadows or gradients on anything but the most important elevated cards; keep surfaces flat and bright. Do not introduce additional font families or vary letter-spacing for Inter beyond the defined tight values. Never use Cloud White (#ffffff) as text on any light background; always ensure a minimum contrast ratio of 7:1 against main content backgrounds. Refrain from altering the default 20px border-radius for cards or 100px for buttons, as these are signature elements. Do not place multiple primary call-to-action buttons side-by-side; use one filled Virtual Violet (#513deb) button and a ghost alternative.
