Mystic Pastoral Adventure — Dark, Earthy & Mystical Design System & Template

Overview

This design system evokes a mystical and pastoral mood, characterized by a dark, earthy background and light, natural-toned text. The visual hierarchy is established through a large, illustrative hero section and clear, uppercase headings. Interactive elements feature soft, gradient-based colors and subtle shadows, creating a tactile yet organic feel. The overall aesthetic is that of a high-quality indie game, blending classic fantasy elements with a modern, atmospheric presentation.

Colors

The color palette is built on deep, dark tones that create a sense of mystery, contrasted with light, creamy text for readability and warmth. Accent colors are drawn from nature, with a pale cream used for text selection highlights and a vibrant green gradient reserved for primary calls-to-action.

• background: A deep, dark purple-gray used for the main page background, providing a moody and immersive canvas.
• footerBackground: An even darker shade used for the footer, anchoring the page and creating a subtle separation.
• primary: A warm, off-white cream color used for all primary text, links, and icons, ensuring high contrast and legibility against the dark background.
• accent: A soft, pale peach color used for text selection, creating a gentle and magical highlight effect.
• accentText: A dark, rich burgundy used for text when it is highlighted by the accent color.
• successGradientStart/End: The starting and ending colors of a vibrant green gradient used exclusively for the primary "wishlist" button. The brightness of this green stands out strongly against the dark theme, drawing the user's attention.
• successGradientHoverStart/End: A slightly brighter and more saturated version of the green gradient used on the hover state of the primary button.
• buttonSecondaryBackground: A neutral dark gray used for secondary buttons, providing a less prominent but still clear interactive element.
• buttonSecondaryBackgroundHover: A lighter gray used for the hover state of secondary buttons.
• buttonText: Pure white text used on both primary and secondary buttons for maximum contrast and clarity.

Typography

The typography system is designed for clarity and atmosphere. It relies on a modern system font stack for body text, ensuring readability across devices. The hierarchy is defined by size and weight, with a distinct style for section headings.

• body: The base text style uses a system font stack with a fluid font size (calc(1rem + .25vw)) that scales with the viewport. It is set with a line-height of 1.5 for comfortable reading.
• h2: Section headings are styled to be elegant and distinctive. They use a larger font size, a light font weight (300), and significant letter-spacing (3px). The text is also transformed to uppercase, giving a formal and epic feel.
• heroStrong: This style is used to create a focal point within the main hero section, featuring a slightly larger font size and bolder weight.
• nav: Navigation links and footer text use a slightly larger font size (1.15rem) than the body text, improving their visibility and making them easy to scan.
• small: Used for footer details, this style is set to the same size as the navigation for consistency.

Layout

The layout is centered and contained, focusing content into a readable column while allowing the background imagery to span the full viewport width. The structure is built using a series of centered containers with a maximum width.

• Page Width & Containers: The main page structure has a max-width of 1920px. Content sections, like the main text and footer, are further constrained within a .container that has a max-width of 80ch, ensuring an optimal line length for reading.
• Flex Patterns: Flexbox is used extensively for arranging lists of items, such as screenshots, awards, and footer links. These flex containers often use justify-content: center and flex-wrap: wrap to create responsive, centered rows of content.
• Section Spacing: Vertical rhythm is established with generous margins (e.g., 3em, 4em) between major sections like the hero, main content, and footer.
• Responsive Behavior: On smaller screens (e.g., max-width: 500px), certain layout adjustments are made, such as removing the decorative background image from the footer and making primary buttons full-width. The large hero section's transform is disabled on medium-sized screens (max-width: 1000px).

Elevation & Depth

Depth is created not through heavy shadows, but through a combination of fixed, parallax-like background images, subtle transforms, and selective border and shadow effects.

• Background & Parallax: The hero section uses a position: fixed image that covers the viewport, creating a strong sense of depth and immersion. As the user scrolls, the foreground content moves over this static background.
• Interactive Depth: Elements like screenshot images have a subtle transform: scale(1.025) on hover, giving them a slight "pop" and making them feel more tactile.
• Shadows: The primary call-to-action button features a soft glow (box-shadow: 0 0 16px #8ed62944) on hover, adding a magical quality. The text on this button also has a subtle text-shadow for increased legibility.
• Layering: The design uses z-index to manage layers, with the fixed background image sitting behind the main content.

Shapes

The shape language is soft and approachable, with consistently applied border radii that temper the starkness of the dark background.

• Border Radius: A small radius of 4px is used for all button-like elements, while a slightly larger radius of 8px is applied to images and outlined elements.
• Pills: The design does not utilize pill shapes; corners are subtly rounded rectangles.
• Borders: Borders are not a prominent feature but are used for focus states, such as a 2px solid #fff outline with an 8px radius.
• Buttons: Both primary and secondary buttons share the same 4px rounded corner shape, maintaining consistency.

Components

The design features a small set of clearly defined components that are used consistently across the page.

Buttons

The design uses two distinct button styles. The primary button, intended for the most important action, features a vibrant green gradient, white text, and a subtle text shadow. On hover, it becomes brighter and emits a soft glow. The secondary button is a more subdued, solid dark gray, which lightens to a medium gray on hover. Both buttons share the same uppercase text transformation, padding, and small border radius.

Navigation

A simple, text-based navigation pattern is used in the footer. It consists of an unordered list where list items are displayed inline using flexbox with a small gap. Links have generous padding on hover and focus, and their underline is removed.

Cards

While not a traditional card with a container, the screenshot images function as implicit cards. They are presented in a flex-wrap container, have a max-width, and use object-fit: cover. They feature a subtle scale-up transform on hover, signaling interactivity.

Do's and Don'ts

Do

• Do use the dark, earthy background color for all main page content to maintain the atmospheric mood.
• Do use the cream primary color for all essential text to ensure high contrast and readability.
• Do reserve the vibrant green gradient for the single most important call-to-action on the page.
• Do apply the uppercase, letter-spaced style to all section headings (h2) to maintain a formal and epic tone.
• Do use flexbox for centering groups of items like images and links.
• Do add subtle transforms (e.g., scale(1.025)) on hover to images to make them feel interactive.

Don't

• Don't introduce bright or highly saturated colors outside of the established accent and success gradients.
• Don't use sharp, 0-radius corners; always apply the defined 4px or 8px border radii.
• Don't use drop shadows on text, except for the subtle shadow on the primary button text.
• Don't use standard sans-serif fonts for headings; always apply the specific letter-spacing and uppercase treatment.
• Don't redesign components with new padding or font sizes; adhere to the values specified in the system.
• Don't use multiple, competing primary buttons in the same view.