Color Palette
Primary (sky-500)
#38BDF8
Secondary (sky-600)
#0EA5E9
Accent (sky-700)
#0284C7
Background (custom)
#02090D
Surface Primary (custom)
#0B1118
Surface Secondary (custom)
#121A22
Surface Tertiary (custom)
#1A242C
Text Primary (slate-50)
#F8FAFC
Text Secondary (slate-300)
#CBD5E1
Text Tertiary (slate-400)
#94A3B8
Guidelines:
- Use Primary color for main calls to action and important highlights.
- Secondary and Accent colors can be used for secondary actions or visual emphasis.
- Background and Surface colors provide a dark, focused environment. The main background is #02090D.
- Text colors ensure readability against the dark backgrounds. Maintain sufficient contrast.
Typography
Font Family: Inter
Heading 1
The quick brown fox jumps over the lazy dog.
Heading 2
The quick brown fox jumps over the lazy dog.
Heading 3
The quick brown fox jumps over the lazy dog.
Heading 4
The quick brown fox jumps over the lazy dog.
Body Text (Base)
The quick brown fox jumps over the lazy dog. This is the standard paragraph text style used for most content. Ensure readability and appropriate line height.
Small Text / Captions
The quick brown fox jumps over the lazy dog. Used for less prominent information.
Guidelines:
- Use a consistent typographic scale to maintain hierarchy.
- Prioritize readability with appropriate line height (leading) and letter spacing (tracking).
- Limit the number of font weights used to maintain clarity. Regular and Medium/Semibold are often sufficient.
- Ensure text has sufficient contrast with its background (WCAG AA).
Spacing & Layout
Consistent spacing is key to a clean and organized interface. We use a base unit of 4px (Tailwind's default spacing scale).
8px (p-2)
12px (p-3)
16px (p-4)
24px (p-6)
Guidelines:
- Use multiples of the base unit (4px) for padding, margins, and gaps.
- Establish a clear visual hierarchy using spacing. Larger spaces for separating major sections, smaller spaces for related elements.
- Be consistent. If you use 16px margin below headings, do it everywhere.
- Consider mobile-first. Spacing might need to be adjusted for different screen sizes, but maintain proportionality.
- Use negative margins sparingly and with caution.
Border Radius
Rounded corners contribute to a softer, more modern aesthetic.
Guidelines:
- Use `rounded-lg` (8px) as the default for most interactive elements like buttons and inputs.
- Use `rounded-md` (6px) for cards or larger containers.
- Use `rounded-full` for circular elements like avatars or specific icons.
- Be consistent with the level of rounding. Avoid mixing too many different radii in close proximity.
UI Elements
Buttons
Button Guidelines:
- Primary buttons for the main action on a page.
- Secondary buttons for less critical actions.
- Outline buttons for tertiary actions or when multiple actions are present.
- Ensure clear hover and focus states.
- Use consistent padding and border-radius.
Input Fields
Input Guidelines:
- Clear labels above or to the side of inputs.
- Use placeholder text as a hint, not a replacement for labels.
- Provide clear focus states.
- Ensure disabled states are visually distinct.
- Use appropriate input types (e.g., `email`, `date`, `number`).
Navigation / Tabs
Tab Guidelines:
- Clearly indicate the active tab.
- Ensure sufficient tap targets on mobile.
- Use concise and clear labels.
- Maintain consistent styling for all tabs.
Cards
Weekly Timesheet Summary
Review your submitted hours for the week ending Nov 19th.
Project Alpha Completion
All tasks for Project Alpha are marked as complete. Pending final review.
Card Guidelines:
- Use cards to group related information.
- Maintain consistent padding and spacing within cards.
- Use shadows subtly to create depth if needed.
- Ensure clear hierarchy of information within the card.
Avatars / User Badges
+12
Elara
Avatar Guidelines:
- Use `rounded-full` for all avatars.
- Provide fallback initials or generic icons if an image is not available.
- Consider adding a subtle border, especially on dark backgrounds. Border color adjusted to #02090D for stacked avatars.
- For stacked avatars, ensure proper overlap and count indication.
Badges / Status Indicators
Badge Guidelines:
- Use color coding to indicate status (e.g., green for success, yellow for warning, red for error).
- Keep text concise.
- Ensure good contrast between text and background of the badge.
- `rounded-full` is often a good choice for small badges.
Alerts / Notifications
Informational Message
This is some additional information you might find useful.
Success!
Your timesheet has been submitted successfully.
Warning
Please double-check your hours before submitting.
Error
There was a problem processing your request.
Alert Guidelines:
- Use distinct colors and icons for different alert types (info, success, warning, error).
- Provide clear and concise messaging.
- Alerts should be noticeable but not overly disruptive.
- Consider providing a way to dismiss alerts if appropriate.
Modals / Dialogs
Confirm Submission
Are you sure you want to submit this timesheet? Once submitted, it cannot be edited.
Modal Guidelines:
- Modals should overlay the main content, often with a semi-transparent backdrop.
- Include a clear title and a way to close the modal (e.g., close button, Escape key).
- Actions within the modal should be clear (e.g., "Confirm", "Cancel").
- Keep modal content concise and focused on a single task.
Tooltips
Tooltip Guidelines:
- Tooltips should provide brief, contextual help.
- Appear on hover or focus of an element.
- Position tooltips so they don't obscure important content.
- Keep tooltip text short and to the point.
- Ensure good contrast and readability. Background updated to #02090D.