Brand & Style

This design system embraces a Neobrutalist aesthetic to mirror the raw, unfiltered energy of high-end photography and visual arts. The brand personality is unapologetic, structural, and high-impact, moving away from traditional “soft” UI patterns to create a sense of architectural permanence and creative urgency.

The style is characterized by:

• Hard-Edged Structuralism: Every element is defined by thick, unyielding borders.
• Vibrant Functionalism: Color is used not just for decoration, but as a high-contrast signal for interactivity.
• Raw Typography: A juxtaposition of massive, heavy headers with technical, monospaced secondary text.
• Physicality without Softness: Depth is conveyed through hard-edged offsets rather than atmospheric blurs.

Colors

The palette is built on a foundation of extreme contrast. The primary background is stark white (#FFFFFF) to allow photography to stand out, while the UI framework is defined by a consistent black (#000000) for borders and shadows.

• Neon Yellow (Primary): Used for primary calls to action and high-priority highlights.
• Electric Blue (Secondary): Used for secondary interactions, links, and informational states.
• Hot Pink (Tertiary): Used for accents, notifications, and “save” or “like” actions.
• Black (Stroke/Shadow): Used for all structural lines, 4px borders, and hard shadows.

Typography

The typography strategy creates a “wall of text” effect for headers while maintaining technical legibility for data and descriptions.

• Headlines: Set in Montserrat (900 weight). Use tight tracking for a dense, heavy look. All display text should feel like a physical block on the page.
• Body & Metadata: Set in Space Mono. This reinforces the “visual services” aspect, nodding to technical specs, camera settings, and file names.
• Scale: On mobile, display sizes must scale aggressively to prevent horizontal overflow, while maintaining the heavy weight.

Layout & Spacing

The layout follows a rigid, visible grid. Elements do not float; they are anchored.

• Grid: Use a 12-column fluid grid for desktop and a 4-column grid for mobile.
• Borders as Spacing: The 4px black border is a mandatory separator between distinct functional areas.
• The “Offset” Rule: Interactive elements and containers should feature a hard shadow offset to the bottom-right (6px), creating a physical layered effect without using Z-axis depth blurs.
• Margins: Generous outer margins (32px+) ensure the heavy borders don’t feel claustrophobic.

Elevation & Depth

In this design system, “Elevation” is literal rather than atmospheric. We do not use Gaussian blurs or soft shadows.

1. Level 0 (Flat): Backgrounds and static layout containers.
2. Level 1 (Raised): Interactive elements (buttons, cards). These utilize a 4px black border and a 6px black shadow offset.
3. Level 2 (Pressed/Active): When an element is clicked, the shadow offset is removed (set to 0), and the element translates +6px on the X and Y axes to simulate a physical button being pressed into the page.
4. Overlay: Modals use a thick 4px border and a larger 12px shadow offset to distinguish themselves from the main content.

Shapes

The shape language is strictly “Sharp.”

• Corners: 0px radius for all borders, buttons, and image containers. This reinforces the Brutalist “built with blocks” philosophy.
• Consistency: If an image is placed within a container, the image itself must not have rounded corners.
• Icons: Use thick-stroke, geometric icons with 90-degree angles where possible to match the border-weight of the UI.

Components

Buttons

• Primary: Neon Yellow background, 4px black border, 6px black shadow. Text is bold Montserrat.
• Secondary: Electric Blue background, 4px black border, 6px black shadow.
• Interaction: On hover, the shadow offset increases to 8px. On active/click, the shadow disappears and the button moves to fill the space where the shadow was.

Cards (Artist/Service Profiles)

• White or Light Grey background.
• 4px black border.
• Images inside cards are flush to the top and sides, separated from text by a 4px horizontal rule.
• Metadata (Price, Location) is displayed in Space Mono with high-contrast labels.

Input Fields

• White background with a 4px black border.
• Focus state: The border remains black, but the background shifts to a very light tint of the Primary color (Neon Yellow).
• Labels are always positioned above the input in bold Mono-UI caps.

Chips & Tags

• Rectangular (0px radius).
• High-contrast fills (Electric Blue or Hot Pink).
• No shadow for tags to keep them visually “lighter” than primary buttons.

Checkboxes & Radios

• Large, 24x24px squares.
• 4px black border.
• Checked state: A solid Black “X” for checkboxes or a solid Primary color block for radios.