Design System & Style Guide
This page documents the visual language, UI components, and design principles used across datamays.com. It serves two purposes: as a working development reference for me, and as a transparent look into how this site is built with intention, structure, and care.
Design Philosophy
My goal for this site is to balance professionalism with personality. I want it to feel credible and product-ready, while still representing me as a human who enjoys building thoughtful systems. I'm not attempting to highlight any skills in frontend design, so I outsourced a lot of the decision-making to ChatGPT and Gemini. The design leans modern and minimal, driven by reusable components, semantic color tokens, and clear hierarchy.
Color System
Colors are defined semantically rather than aesthetically (e.g., “primary” instead of “blue”), which makes the system easier to maintain and adapt over time.
Primary
Used for key calls to action and highlights.
Accent
Used sparingly to add contrast + emphasis.
Surface & Neutrals
Provide structure and depth without clutter.
Typography
Typography is designed for clarity and accessibility. Headlines communicate hierarchy, and body text prioritizes readability.
Heading 1
A strong, confident headline
Heading 2
A clear section heading
Body Text
This is an example of standard body text. It is used across content pages, case studies, and documentation. The goal is to maintain a tone that is readable, welcoming, and just a little conversational without losing professionalism.
Buttons
Buttons are designed to be recognizable and consistent. Primary buttons drive action, while secondary and ghost buttons provide supporting interactions.
Cards
Cards are a foundational element for projects, writing previews, and structured information.
Hero Example
The hero sets the tone of the site. It is bold, direct, and purpose-driven.
A hero designed to welcome, clarify, and inspire action.
This block demonstrates the tone and structure used for key introductions throughout the site.