Switch between the rendered Visual preview and the Raw DESIGN.md.
Mastra embodies a cutting-edge, tech-forward aesthetic rooted in dark mode sophistication and vibrant neon accents. The design system channels the energy of modern AI development—bold, precise, and experimental—with an ultra-dark neutral foundation punctuated by vivid, high-contrast accent colors that evoke digital networks and neural connectivity. The atmosphere is sophisticated yet approachable, balancing minimalist elegance with energetic visual flourishes. Every interaction feels responsive and purposeful, reinforcing the framework's positioning as a powerful, developer-first platform. The overall tone is forward-thinking, confident, and technically refined.
Key Characteristics
#161616, #0F0F0F) creating immersive focus#7AFF78): Primary accent for highlights, success states, active elements, and featured content. Most prominent in the accent system.#18FB6F): Secondary primary accent for interactive states and accent highlights. Slightly less saturated than Lime.#FDAC53): Warm accent for secondary highlights, calls-to-action, and informational content.#FF69CC): Vibrant accent for tertiary highlights, special features, and decorative elements.#FA7B6A): Warm accent for tertiary interactions and supporting highlights.#FF4758): Status color for error states, alerts, and critical warnings.#FFFFFF): Text on dark button backgrounds for maximum contrast.#D9D9D9): Text on secondary buttons and navigation links.#939393): Text for disabled or inactive interactive elements.#0F0F0F): Deepest dark background for elevation and contrast.#161616): Primary background color for all surfaces.#171717): Slightly elevated surfaces and containers.#262626): Input fields and component backgrounds (inferred from component data).#424242): Borders and subtle dividers.#939393): Secondary text and disabled states.#D9D9D9): Primary body text and active elements.#E6E6E6): Light accents and highlights on dark backgrounds.#262626): Dark surface for form inputs with subtle elevation.#424242): Subtle border for input fields.#171717): Semi-transparent overlay for modals and navigation.rgba(0, 0, 0, 0.8) 0px 4px 54px 0px — Strong depth for sticky header.rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px — Subtle lift for cards and containers.Primary Font: Greed (or system fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif)
Secondary Font: Geist Mono (or system fallback: 'Monaco', 'Courier New', monospace)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Greed | 68px | 520 | 74.8px | 0px | Hero headings, main page title |
| Heading 2 / H2 | Greed | 24px | 520 | 26.4px | 0px | Section headings |
| Body Large | Greed | 17px | 400 | 23.12px | 0px | Paragraph text, links, descriptions |
| Body Standard | Greed | 15px | 500 | 23.12px | 0px | List items, standard UI text |
| Body Small | Greed | 12.5px | 470 | 16.25px | 0px | Secondary text, captions |
| Input / Placeholder | Greed | 12px | 400 | 16px | 0px | Form inputs, placeholders |
| Code Large | Geist Mono | 17px | 400 | 23.12px | 0px | Code blocks, command display |
| Code Small | Geist Mono | 14px | 400 | 23.94px | 0px | Inline code, terminal text |
500) for labels and UI text; regular (400) for body and code.#171717#FFFFFF0px 24px48px50px2px solid #1A1A1A23.12px#262626, border to #333333#7AFF78, indicating Lime Green accentrgba(0, 0, 0, 0) (transparent)#A9A9A90px 20px34px9px0px solid transparent15px#D9D9D9, subtle background rgba(255, 255, 255, 0.05)1px solid #7AFF78rgba(0, 0, 0, 0) (transparent)#9393930px136px (variable based on content)40px0px solid transparent23.12px#D9D9D9, background rgba(122, 255, 120, 0.1)rgba(0, 0, 0, 0) (transparent)#D9D9D98px 8pxauto0px0px solid transparent23.12px#7AFF78)#1717171px solid #42424224px or 40px depending on context9pxrgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px#D9D9D9#16161660px to 80px for large sections; 32px for smaller containers56px vertical spacing between sections#262626#D9D9D9#9393934px 12px32px58px1px solid #424242rgba(13, 13, 13, 0.3) 0px 4px 38.8px 0px16px#7AFF78, shadow intensifies to rgba(13, 13, 13, 0.5) 0px 4px 38.8px 0px#0F0F0F, text color #424242, border #2A2A2Argba(0, 0, 0, 0) (transparent, with sticky behavior)#D9D9D934px per nav item0px (items spaced via gaps)rgba(0, 0, 0, 0.8) 0px 4px 54px 0px when sticky23.12px#7AFF78#D9D9D9, slight opacity increase#D9D9D9#7AFF7823.12px4px4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 40px, 56px, 60px, 80px4px — Micro-spacing (gaps between tightly grouped elements)8px — Tight spacing (button padding, small gaps)12px — Compact spacing (input padding, label offsets)16px — Standard gap between UI elements20px — Component spacing (between buttons, form groups)24px — Card padding, medium sections28px — Larger gaps, spacing variants32px — Container padding for standard sections40px — Large card padding, elevated spacing56px — Section margin (between major layout sections)60px — Large section padding80px — Hero section padding, maximum breathing room1440px for desktop layouts32px on desktop, 24px on tablet, 16px on mobile20px to 28px between columns80px padding; standard sections use 60px padding; nested containers use 40px or 24pxMastra prioritizes generous whitespace and breathing room, especially in dark mode. Large gaps between sections create visual hierarchy and reduce cognitive load. Components are never cramped; input fields, buttons, and cards maintain ample internal padding. The design avoids visual clutter through strategic use of negative space and high contrast, allowing the neon accents to pop without overwhelming the composition.
0px): Links, text, no radius for flat components9px): Input fields, secondary buttons, cards with subtle definition40px): Icon buttons, large ghost buttons50px): Primary buttons, CTA elements58px): Highly rounded inputs for a pill-shaped aesthetic| Level | Treatment | Use |
|---|---|---|
| Base (0) | No shadow, flat surface #161616 | Primary background, base layout |
| Level 1 | Subtle shadow rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px | Cards, containers, slight lift |
| Level 2 | Medium shadow rgba(0, 0, 0, 0.3) 0px 4px 38.8px 0px | Input fields with focus, modals |
| Level 3 | Strong shadow rgba(0, 0, 0, 0.8) 0px 4px 54px 0px | Sticky header, overlays, topmost elements |
Shadow Philosophy: Mastra uses shadows sparingly to maintain minimalist aesthetics while creating subtle depth perception. Shadows always employ dark, heavily transparent blacks to work harmoniously with the ultra-dark background. Components at higher elevation receive stronger shadows, guiding user focus toward interactive elements. Shadows are never harsh; they blend seamlessly into the dark foundation, creating a sense of layered depth without visual disruption.
#7AFF78 Lime Green for primary interactive states, success confirmations, and key feature highlights. Use #FDAC53 Coral and #FF69CC Magenta for secondary and tertiary accents sparingly.#D9D9D9 or lighter against #161616 backgrounds. Never place light text on light surfaces.24px horizontal padding; cards should have 40px padding minimum. Never crowd components.50px radius; inputs use 58px; cards use 9px. Match the visual language.68px Display for heroes, 24px for section headings, 17px for body. Never rely on color alone for hierarchy.1px solid #7AFF78 outline or border on focus, ensuring keyboard navigation is visible.50px, 58px) for CTAs and inputs; subtle corners (9px) for cards and modest UI elements.#161616 text on #171717 surfaces. Always ensure minimum contrast ratio of 4.5:1.0px border radius on buttons or inputs except for utility or layout purposes. The brand embraces roundness for approachability.8px on buttons or 12px on inputs. Mastra prioritizes breathing room.50px, keep inputs 58px and cards 9px.#939393 or lighter. Never use text below #424242 on #161616 backgrounds.1.5x to 1.6x multiplier) for readability. Compact line height creates fatigue.| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single-column layout, 16px container padding, 32px section padding, full-width buttons, stacked navigation |
| Tablet | 768px–1023px | Two-column grid, 24px container padding, 60px section padding, adjusted font sizes (-2px on body), side-by-side navigation |
| Desktop | 1024px–1439px | Three-column grid, 32px container padding, 80px section padding, full typography scale |
| Large Desktop | 1440px+ | Full 12-column grid, 32px container padding, max-width container at 1440px, optimal spacing throughout |
44px × 44px for all interactive elements (buttons, links, input fields).48px height on all devices. Secondary buttons scale to 36px on mobile, 40px on tablet/desktop.32px minimum across all breakpoints to accommodate touch and keyboard interaction comfortably.34px height per nav link; 20px horizontal padding on mobile, 24px on tablet/desktop.12px gap between interactive elements to prevent accidental taps.Mobile (320px–767px):
32px padding instead of 80px.28px instead of 56px.Tablet (768px–1023px):
60px padding.56px.56px from 68px.Desktop (1024px+):
320px.1440px with centered alignment.#7AFF78) — Use for active states, highlights, success indicators.#FDAC53) — Use for secondary actions and informational highlights.#FF69CC) — Use for decorative elements and special features.#FF4758) — Use for warnings and critical states.#161616) — All main surface backgrounds.#171717) — Cards, containers, slightly raised surfaces.#D9D9D9) — Body text, standard UI text.#939393) — Disabled text, captions, reduced prominence.#FFFFFF) or Light Neutral (#D9D9D9) — Display and section titles.#262626) — Form input fields.#424242) — Input field borders, subtle dividers.Always start with #161616 background for any new surface. Elevate to #171717 only when semantic distinction is needed (cards, containers).
Default text color is #D9D9D9. Never use lighter text on light backgrounds or darker text on dark backgrounds. Contrast ratio must exceed 4.5:1.
Neon accents (#7AFF78 primarily) are reserved for interactive states and highlights only—active buttons, hover states, success indicators, and focus outlines. Do not use on static text.
All buttons default to 50px border radius except secondary buttons which use 9px. Input fields use 58px. This maintains visual cohesion.
Typography hierarchy is size-driven, not color-driven: 68px for Display/H1, 24px for H2, 17px for body large, 15px for standard UI, 12px for small. Use Greed font throughout, Geist Mono exclusively for code.
Spacing follows the system strictly: 24px padding for cards, 40px for larger containers, 56px margin between sections, 8px to 12px for internal component spacing. No arbitrary values.
Shadows apply only at three elevation levels: None (base), subtle (cards), medium (inputs on focus), strong (sticky header/overlays). Use the exact CSS values provided; never create custom shadows.
Focus states must include a 1px solid #7AFF78 outline or border for keyboard navigation accessibility. Never remove focus indicators.
On mobile (320px–767px), reduce hero padding to 32px, collapse navigation to hamburger, stack cards vertically, and expand buttons to full width within their container's padding.
Line height must scale with font size: Display 74.8px (1.1x), headings 26.4px (1.1x), body 23.12px (1.35x), small body 16.25px (1.3x). Never compress line height below 1.3x in dark mode.