Switch between the rendered Visual preview and the Raw DESIGN.md.
The Kudos design system embodies a modern, celebratory aesthetic designed for team recognition and workplace positivity. It combines a deep, sophisticated dark background with vibrant accent colors and warm highlights, creating an energetic yet professional environment. The visual language emphasizes clarity and accessibility while maintaining a contemporary feel that appeals to collaborative teams. Typography is bold and confident, guiding users through a streamlined experience that prioritizes action and engagement over complexity.
Key Characteristics
#9B59C5): Primary brand color used throughout the interface for emphasis, accents, and key UI elements#0000EE): Secondary action color and link emphasis for interactive elements#FFE566): Primary call-to-action buttons and celebratory highlights#FEBC2E): Alternative accent used for secondary emphasis#0000EE): Standard hyperlink color with high contrast155, 89, 197, 0.18): Subtle border treatment for secondary buttons#F0EAF5): Primary text color, navigation elements, and light UI text#9E8FA8): Secondary text, helper text, and less prominent information#CCC4D6): Tertiary text and disabled states#0D0710): Darkest background surface for deep sections#1A0A00): Primary background surface#1A0F1E): Alternative dark background#171217): Subtle background variation#28C840): Success states and positive confirmations#F5A623): Warning and alert statesPrimary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif
Code: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | -apple-system | 60px | 900 | 66px | 0px | Hero headlines, primary page title |
| Heading H2 | -apple-system | 35.2px | 800 | 56.32px | 0px | Section headings, major content dividers |
| Heading H3 | -apple-system | 15.68px | 700 | 25.088px | 0px | Subsection headings, card titles |
| Subheading / Span | -apple-system | 19.2px | 800 | 30.72px | 0px | Emphasized text, highlighted spans |
| Body Text | -apple-system | 17.6px | 400 | 28.16px | 0px | Standard paragraph and content text |
| Link / Navigation | -apple-system | 16px | 400 | 25.6px | 0px | Navigation links, secondary links |
| Small Link | -apple-system | 14.08px | 400 | 22.528px | 0px | Footer links, helper text links |
| Button Text | -apple-system | 15.2px | 700 | 24.32px | 0px | Button labels and CTA text |
| Code | monospace | 15.84px | 400 | 25.344px | 0px | Inline code, command references |
#FFE566#1A0A0015.2px70012px 25.6px12px0px none50.3125px24.32px0.9, slight scale transform 1.020.8, slight inset shadowrgba(0, 0, 0, 0)#9E8FA815.2px40012px 22.4px12px1px solid rgba(155, 89, 197, 0.18)50.3125px24.32pxrgba(155, 89, 197, 0.4), text color to #F0EAF50.6rgba(0, 0, 0, 0)#F0EAF515.2px70012px 25.6px12px0px none50.3125pxrgba(155, 89, 197, 0.1), text maintains #F0EAF5rgba(155, 89, 197, 0.2)#1A0F1E12px1px solid rgba(155, 89, 197, 0.15)32px0px 8px 24px rgba(0, 0, 0, 0.3)#F0EAF5#FFFFFF (white for emphasis)#17121712px1px solid rgba(155, 89, 197, 0.12)28px24px#FFE566#1A0A0040px x 40px, border-radius 8px#1A0F1E12px1px solid rgba(155, 89, 197, 0.2)16px#FFE566#F0EAF5#9E8FA8rgba(26, 15, 30, 0.5)1px solid rgba(155, 89, 197, 0.2)8px12px 16px#F0EAF5#9E8FA8#9B59C5, box-shadow 0px 0px 0px 3px rgba(155, 89, 197, 0.2)1px solid #F5A6230px 0px 0px 3px rgba(245, 166, 35, 0.1)1px solid #28C8400px 0px 0px 3px rgba(40, 200, 64, 0.1)transparent#F0EAF516px4000px25.6px#FFE566, no underline initially, underline on hover optional#FFE566, bold weight optional#9E8FA814.08px400#F0EAF522.528px#FFE566#1A0A00700100px4px 8px12px16pxrgba(155, 89, 197, 0.2)#FFE5666008px4px 12px12px#28C840#FFFFFF3px4px 8pxBase unit: 4px
Scale progression:
4px8px12px16px20px24px32px40px56px64px80pxUsage contexts:
12px–32px16px–24px56px–80px (vertical)28px–40px12px–25.6px1200px (inferred for standard web pages)24px gutters40px minimum on desktop; reduces on tablet/mobile24px gap between columnsWhitespace is generous and intentional, supporting readability and reducing cognitive load. The design prioritizes breathing room around text and interactive elements, especially on dark backgrounds. Vertical rhythm is maintained through consistent spacing multiples. Negative space reinforces content hierarchy and draws attention to primary actions.
3px: Minimal radius for small status badges8px: Moderate radius for feature badges and smaller containers12px: Primary radius for buttons, cards, and major UI containers100px: Full circle effect for numeric badges and avatars| Level | Treatment | Use |
|---|---|---|
| Base / Ground | No shadow | Main content background surfaces |
| Raised / L1 | 0px 2px 8px rgba(0, 0, 0, 0.2) | Secondary containers, hover states |
| Elevated / L2 | 0px 8px 24px rgba(0, 0, 0, 0.3) | Cards, modal backdrops, primary emphasis |
| High / L3 | 0px 16px 40px rgba(0, 0, 0, 0.4) | Modals, dropdowns, overlay elements |
| Top / L4 | 0px 24px 56px rgba(0, 0, 0, 0.5) | Full-screen overlays, top-level dropdowns |
Shadow philosophy:
Shadows are subtle and intentional, used to create perceived depth without overwhelming the dark theme. They reinforce visual hierarchy by separating interactive and prominent elements from the background. All shadows use black with varying opacity to maintain consistency with the dark palette. Elevation increases with user interaction priority: primary CTAs and highlighted content receive more shadow, while secondary elements remain closer to the surface.
#FFE566 for primary CTAs — it provides maximum visual pop and encourages immediate action#F0EAF5) on dark backgrounds for accessibility (WCAG AA minimum)12px border radius as your default for all major UI elements (buttons, cards, inputs)#9B59C5) for subtle accents and borders, not primary text or backgrounds#1A0A00) for maximum contrast and celebration feel12px for buttons and primary containers consistently80px margin between major page sections; it creates disconnected fragmentation#28C840, #F5A623) for general UI — reserve them strictly for status and validation states12px on buttons — this compromises touch target accessibilityrgba(0, 0, 0, 0.3) minimum)#0000EE) for general accents — it's reserved for links and secondary actions| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–479px | Single column, 16px padding sides, 16px section spacing, font sizes reduced 10%, buttons full width |
| Tablet | 480px–767px | 2 columns, 24px padding sides, 32px section spacing, cards stack vertically, navigation collapses to hamburger |
| Tablet Large | 768px–1023px | 2–3 columns (context-dependent), 32px padding sides, feature cards begin 2-column layout, navigation expands |
| Desktop | 1024px+ | Full 3-column layouts, 40px padding sides, 64px–80px section spacing, max-width containers activate |
| Desktop XL | 1440px+ | Hero sections expand to full viewport width, whitespace increases proportionally |
48px x 48px (iOS/Material guideline)50px on mobile (from extracted data: 50.3125px)8px vertical, 12px horizontal padding to bare links on touch devices8px gap to prevent accidental triggers40px to 32px to 24px to 16px as viewport shrinks10% on mobile (e.g., 17.6px → 15.8px body text)80px on desktop → 64px on tablet large → 56px on tablet → 32px on mobile40px x 40px minimum size#FFE566) on Dark Charcoal (#1A0A00)#9B59C5) text on Deep Night (#0D0710) with 18% opacity border#1A0A00)#1A0F1E)#FFFFFF) or Light Lavender (#F0EAF5)#F0EAF5)#9E8FA8)#0000EE)rgba(155, 89, 197, 0.15)–0.2#28C840)#F5A623)-apple-system font stack with monospace fallback for code; ensure system fonts load first50.3125px height, secondary 50.3125px height; do not deviate#FFE566 on #1A0A00 with 12px border radius and 15.2px bold font0px 8px 24px rgba(0, 0, 0, 0.3) shadow with 1px solid rgba(155, 89, 197, 0.15) border12px for buttons/cards, 8px for badges, 100px for circular badges, 3px for minimal status indicators28px internal padding; buttons 12px vertical, 22.4px–25.6px horizontal200ms–300ms duration for hover/focus states; apply opacity or color shifts, not abrupt changes