Design System Inspired by Above & Below Gallery
1. Visual Theme & Atmosphere
Above & Below Gallery's design embodies the serene beauty of oceanic exploration through a sophisticated, minimalist aesthetic. The system balances coastal tranquility with professional gallery elegance, featuring generous whitespace and carefully curated teal accents that evoke pristine waters and marine environments. The visual language celebrates photography as the primary medium, allowing high-quality imagery to breathe while maintaining a refined, approachable brand presence. Typography is clean and measured, with selective use of decorative script fonts for branding moments. The design conveys wanderlust, environmental consciousness, and artistic integrity—perfect for a photographer gallery celebrating Australia's natural wonders above and below the surface.
Key Characteristics
- Minimal, gallery-focused layout with abundant whitespace
- Teal and ocean-inspired color accents against neutral backgrounds
- Clean, geometric typography with occasional script flourishes for branding
- High-quality imagery as the focal point
- Accessible, light-touch navigation that doesn't compete with content
- Sustainable, nature-forward brand messaging throughout
2. Color Palette & Roles
Primary
- Teal Ocean (
#1391A4): Primary brand color used in headers, banners, and key UI elements; evokes the Great Barrier Reef and clean waters
- Deep Teal (
#035A68): Darker variant for hover states, links, and emphasis; provides depth and sophistication
Accent Colors
- Leaf Green (
#56AD6A): Secondary accent for calls-to-action related to sustainability and environmental messaging (1% for the Planet initiative)
- Warm Neutral (
#E7CAAC): Soft tertiary accent for warm, organic design touches; suggests sand and natural tones
Interactive
- Navy Dark (
#1C3360): Used for interactive text links and secondary navigation; conveys trust and professionalism
- Very Dark Navy (
#071228): Deepest dark for subtle interactive states and fine typography
Neutral Scale
- Pure White (
#FFFFFF): Primary background; used extensively throughout (1024 instances) to create clean, spacious layouts
- Off-White (
#F7F7F7): Subtle secondary background for card containers and section differentiation
- Light Gray (
#EEEEEE): Divider lines and subtle background separation
- Medium Gray (
#DEDEDE): Border color for input fields and form elements
- Cool Light Blue (
#E4EDFD): Subtle background tint for featured sections
- Very Light Cyan (
#F2FBFE): Delicate background wash for hero sections and soft highlights
Surface & Borders
- Charcoal Text (
#333333): Primary text color for body content and navigation (17 instances); ensures readability without harsh contrast
- Black (
#000000): Used sparingly for high-contrast typography and critical text; reserved for headings and emphasis (30 instances)
Semantic / Status
- Danger Red (
#D02E2E): Error states and warnings; used in form validation
- Alert Orange (
#FF4B00): Secondary error indicator for critical alerts and destructive actions
3. Typography Rules
Font Family
Primary: Montserrat
- Stack:
Montserrat, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
- Usage: Navigation, headings, body text, buttons, links
- Character: Clean, geometric sans-serif; professional yet approachable
Secondary: Poppins
- Stack:
Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
- Usage: Form labels, input hints, accessible labels
- Character: Modern, slightly rounded; friendly and contemporary
Decorative: Alex Brush, Allura, Meie Script, Sail, Style Script
- Stack: Used selectively for brand identity and artistic moments
- Usage: Logo, hero taglines, special announcement text
- Character: Hand-drawn, artistic; appears sparingly to maintain elegance
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|
| Display / H1 | Montserrat | 46px | 400 | 57.5px | 0px | Hero titles, page headers; sets grand visual tone |
| Heading / H3 | Montserrat | 25px | 400 | 34.375px | 0px | Section headings, featured content titles |
| Body / P | Montserrat | 14px | 600 | 21px | 0px | Primary body text; semi-bold for readability at smaller size |
| Link / A | Montserrat | 17px | 400 | 25.5px | 0px | Inline links and navigation items; draws eye without bold weight |
| Label / Form | Poppins | 18px | 700 | 24px (normal) | 0px | Form labels and input instructions; high legibility |
| Button Text | Montserrat | 11.5px to 14px | 600 | 16.33px to 21px | 0px | CTAs and interactive text; compact, scannable |
| Navigation Item | Montserrat | 17px | 400 | 25.5px | 0px | Main navigation, menu items; consistent with link hierarchy |
| Caption / Small | Montserrat | 11.5px | 400 | 16.33px | 0px | Supplementary text, image captions; secondary information |
Principles
- Hierarchy through size, not weight: Uses size variation (46px → 14px) and selective bold weights for navigation clarity rather than aggressive font-weight variance
- Generous line height: Line heights are 1.25–1.5x font size, creating breathing room and reducing visual density
- Single sans-serif system: Montserrat forms the backbone, with Poppins reserved for form elements where friendliness aids usability
- Spartan decoration: Decorative fonts reserved for branding; body content remains utilitarian and scannable
- Neutral letter spacing: All values at
0px to maintain elegance; naturally tight spacing from font metrics
4. Component Stylings
Buttons
Primary CTA Button (Search / Prominent Action)
- Background:
rgba(0, 0, 0, 0) (transparent)
- Text Color:
#FFFFFF
- Font: Montserrat, 11.5px, weight 600
- Padding:
0px 15px
- Height: 17.7px
- Border Radius:
0px
- Border: None
- Line Height: 16.33px
- Hover State: Background becomes
#1391A4, text remains white
- Active State: Background becomes
#035A68
Icon Button (Circular)
- Background:
rgba(255, 255, 255, 0.75) (translucent white)
- Text Color:
#FFFFFF
- Font: Montserrat, 14px, weight 600
- Padding:
0px (no padding; uses fixed width/height)
- Width/Height: 36px
- Border Radius:
50% (perfect circle)
- Border: None
- Line Height: 21px
- Hover State: Background becomes
rgba(255, 255, 255, 1) (fully opaque)
- Active State: Background becomes
rgba(19, 145, 164, 0.9)
Navigation Button / Ghost Button
- Background:
rgba(0, 0, 0, 0) (transparent)
- Text Color:
#333333
- Font: Montserrat, 17px, weight 400
- Padding:
0px 20px
- Height: Auto
- Border Radius:
0px
- Border: None
- Line Height: 25.5px
- Hover State: Text color becomes
#1391A4; add bottom border 2px solid #1391A4
- Active State: Text color
#1391A4; bottom border 2px solid #1391A4
Secondary Button (Dropdown / Menu)
- Background:
rgba(0, 0, 0, 0) (transparent)
- Text Color:
#333333
- Font: Montserrat, 11.5px, weight 700
- Padding:
0px 20px
- Height: Auto
- Width: 100%
- Border Radius:
0px
- Border: None
- Line Height: 18.6875px
- Hover State: Text color becomes
#1391A4; background becomes #F7F7F7
Cards & Containers
Featured Product / Print Card
- Background:
#FFFFFF
- Border:
1px solid #DEDEDE
- Border Radius:
0px (sharp edges, gallery aesthetic)
- Padding:
24px
- Shadow:
0px 2px 8px rgba(0, 0, 0, 0.08) (subtle elevation)
- Hover State: Shadow becomes
0px 4px 16px rgba(0, 0, 0, 0.12); border becomes 1px solid #1391A4
Section Container
- Background:
#FFFFFF or #F7F7F7 (alternating)
- Border: None
- Padding:
48px 36px
- Max Width: 1280px, centered on desktop
- Margin:
0 auto
Hero Section Overlay Container
- Background:
rgba(255, 255, 255, 0.85) (semi-transparent white with slight backdrop blur effect)
- Padding:
44px 32px
- Border Radius:
0px
- Backdrop Filter:
blur(4px)
- Text Color:
#333333
Inputs & Forms
Text Input (Default)
- Background:
#FFFFFF
- Text Color:
#000000
- Font: Poppins, 18px, weight 400
- Padding:
0px 0px 0px 16px (left-aligned text)
- Height:
50px
- Border:
1px solid #606A72
- Border Radius:
4px
- Line Height: Normal
- Placeholder Color:
#999999
- Focus State: Border becomes
1px solid #1391A4; outline none; box-shadow 0px 0px 0px 2px rgba(19, 145, 164, 0.1)
- Error State: Border becomes
1px solid #D02E2E
Form Label
- Font: Poppins, 18px, weight 700
- Color:
#333333
- Margin Bottom:
12px
- Line Height: Normal
Checkbox / Radio (Implied)
- Size: 18px × 18px
- Border:
1px solid #606A72
- Border Radius:
3px (checkbox), 50% (radio)
- Checked State: Background
#1391A4; border 1px solid #1391A4
Navigation
Main Navigation Bar
- Background:
#1391A4 (teal) on desktop; #FFFFFF on mobile
- Height: 128px on desktop; reduced on mobile
- Padding:
16px 36px
- Flex Layout: Horizontally centered items with justify-content space-between
- Item Color:
#333333 (desktop) / #1391A4 (mobile)
- Item Font: Montserrat, 17px, weight 400
- Active Item: Border-bottom
2px solid #333333; text remains #333333
- Hover Item: Text color becomes
#1391A4
Mobile Navigation (Hamburger Menu)
- Background:
#FFFFFF
- Text Color:
#333333
- Font: Montserrat, 14px, weight 600
- Padding:
16px 20px
- Border Radius:
0px
- Box Shadow:
0px 4px 12px rgba(0, 0, 0, 0.1) (beneath main nav)
Links
Inline Link (Body Text)
- Color:
#1391A4
- Font: Montserrat, 17px, weight 400
- Text Decoration: None (underline on hover)
- Hover State: Text decoration becomes
underline 2px solid #1391A4; color remains #1391A4
- Visited State: Color becomes
#035A68
Header / Navigation Link
- Color:
#333333
- Font: Montserrat, 17px, weight 400
- Text Decoration: None
- Hover State: Color becomes
#1391A4; bottom border 2px solid #1391A4 appears
- Active State: Color
#1391A4; bottom border 2px solid #1391A4 persists
Badges & Tags
Status Badge (New / Featured)
- Background:
#56AD6A
- Text Color:
#FFFFFF
- Font: Montserrat, 11.5px, weight 700
- Padding:
4px 12px
- Border Radius:
3px
- Display: Inline-block
Category Tag
- Background:
#F2FBFE
- Text Color:
#1391A4
- Font: Montserrat, 12px, weight 600
- Padding:
6px 12px
- Border:
1px solid #1391A4
- Border Radius:
3px
- Hover State: Background becomes
#E4EDFD; border remains 1px solid #1391A4
5. Layout Principles
Spacing System
Base Unit: 4px
Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 44px, 48px
Usage Context:
- 4px–8px: Micro-spacing within button text, tight component padding
- 12px–16px: Standard input padding, small card margins
- 20px–24px: Standard gap between form fields, spacing between grid columns
- 32px–36px: Section padding, major layout blocks
- 44px–48px: Large section padding, full-width container margins
- 152px: Exceptional margin for hero section vertical spacing
Grid & Container
- Max Width: 1280px for content containers
- Column Strategy: 12-column responsive grid on desktop; collapses to 1–2 columns on tablet/mobile
- Gutters: 24px between columns
- Container Padding:
- Desktop: 36px–48px left/right
- Tablet: 24px left/right
- Mobile: 16px left/right
- Section Patterns:
- Full-width hero with overlay container (centered max-width content atop background image)
- Alternating light/white section backgrounds for rhythm
- Two-column grid for product displays; single column on mobile
Whitespace Philosophy
Above & Below Gallery prioritizes breathing room to let photography shine. Whitespace is treated as a design element, not empty space—each section has generous margins and padding to create visual rhythm and reduce cognitive load. Body text is left-aligned with 1.5x line height, and card-based layouts maintain 24px gaps. Hero sections use semi-transparent overlays and substantial padding to ensure text clarity while celebrating background imagery. Mobile layouts maintain proportional whitespace despite reduced screen width, prioritizing legibility over content density.
Border Radius Scale
- 0px (default): Primary radius; used for buttons, navigation, containers, cards. Sharp edges maintain gallery elegance and modern minimalism
- 3px: Subtle softness for input fields, badges, and secondary components; adds approachability without disrupting clean aesthetic
- 4px: Slightly more rounded variant for form inputs and tertiary components
- 50% (circular): Icon buttons, avatar placeholders, decorative circular elements
6. Depth & Elevation
| Level | Treatment | Use |
|---|
| Flat (L0) | No shadow; box-shadow: none | Body text, borders, flat backgrounds, navigation items |
| Raised (L1) | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08) | Standard cards, product containers, subtle lift |
| Elevated (L2) | box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.12) | Hover states on cards, featured sections, modal containers |
| Prominent (L3) | box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.16) | Floating elements, dropdowns, overlay modals |
| High (L4) | box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.2) | Full-page modals, top-most navigation overlays |
Shadow Philosophy: Shadows are used sparingly and subtly; they enhance hierarchy without creating visual noise. Most components remain flat with borders or background color shifts to indicate interactivity. Shadows increase only on hover or in modal contexts to guide attention. The system favors soft, diffused shadows that evoke natural light rather than harsh digital drops.
7. Do's and Don'ts
Do
- Use teal (
#1391A4) and deep teal (#035A68) as primary interactive colors; visitors expect these ocean tones
- Prioritize whitespace around imagery; let photography breathe and lead the design
- Apply Montserrat for all body text, navigation, and UI; maintain font system consistency
- Use sharp borders (
0px radius) on cards and buttons to maintain gallery aesthetic; only soften to 3px for inputs
- Stack vertically on mobile with full-width single columns; maintain 16px padding
- Employ generous line height (1.25–1.5x) for all text to ensure readability and visual calm
- Use color shifts and borders for interactive states rather than relying on shadow manipulation
- Apply light backgrounds (
#F7F7F7, #F2FBFE) to section containers to create visual separation without jarring contrast
Don't
- Avoid black (
#000000) text on white; use charcoal (#333333) for primary body text to reduce eye strain
- Don't saturate the interface with color; reserve teal accents for CTAs and key navigation
- Avoid serif fonts or display fonts for body copy; maintain Montserrat throughout for coherence
- Don't add shadows to flat elements; reserve shadows for elevated cards and interactive states only
- Avoid rounded corners on primary containers; keep
0px radius for clean gallery feel
- Don't mix font sizes erratically; adhere strictly to the typographic hierarchy table
- Don't use pure white backgrounds (
#FFFFFF) for all sections; alternate with #F7F7F7 to create subtle rhythm
- Avoid cramped padding on desktop; maintain 36px–48px margins for spacious, gallery-appropriate layouts
- Don't overcomplicate form inputs; keep borders simple (
1px solid #606A72) and focus state colors consistent (#1391A4)
- Avoid accessibility pitfalls: never use color alone to convey status; include icons, text labels, and borders
8. Responsive Behavior
Breakpoints
| Name | Width | Key Changes |
|---|
| Mobile | 0px–767px | Single column, 16px padding, hamburger navigation, stacked buttons, 14px body text |
| Tablet | 768px–1024px | Two-column grid, 24px padding, drawer navigation, side-by-side CTAs, 16px body text |
| Desktop | 1025px–1439px | 12-column grid, 36px–48px padding, horizontal navigation, full-width layouts, 14px–17px body text |
| Wide | 1440px+ | Max-width container (1280px) centered, additional padding, expanded hero sections |
Touch Targets
- Minimum size: 44px × 44px for all interactive elements (buttons, links, form controls)
- Icon buttons: 36px × 36px minimum; use 48px for mobile interfaces
- Links: Minimum 18px height; pad with 8px vertical whitespace if inline
- Form inputs: 50px height on mobile; 44px acceptable on desktop with adequate padding
- Navigation items: 44px tall on mobile; 48px preferred for touch accuracy
Collapsing Strategy
- Hero section: Maintains full-width overlay container; background image scales down (background-size: cover); overlay padding reduces to 24px on tablet, 16px on mobile
- Navigation: Converts from horizontal (128px height) to hamburger menu at 768px breakpoint; drawer animates from left, full-width on mobile
- Grid layouts: 12-column → 6-column (tablet) → 1-column (mobile) using CSS Grid or flex
flex-wrap: wrap
- Cards and containers: Padding reduces from 24px to 16px on tablet, 12px on mobile; gaps reduce from 24px to 16px
- Typography: Display heading (
46px) → 36px tablet, 28px mobile; body text (14px) → 14px tablet, 13px mobile
- Images: Max-width 100% with aspect-ratio preserved; lazy-load for mobile performance
- Form inputs: Width adjusts from
692px (desktop) to 100% on tablet/mobile with max-width: 100%
- Buttons: Convert from horizontal layout to stacked vertical on mobile; full-width CTAs on mobile devices
9. Agent Prompt Guide
Quick Color Reference
- Primary CTA: Teal Ocean (
#1391A4) — all primary interactive elements, links, hover states
- Secondary CTA: Leaf Green (
#56AD6A) — sustainability messaging, secondary actions
- Background: Pure White (
#FFFFFF) — primary; alternate with Off-White (#F7F7F7)
- Navigation Bar: Teal Ocean (
#1391A4) on desktop; white on mobile
- Heading Text: Black (
#000000) for h1; Charcoal (#333333) for body and secondary headings
- Body Text: Charcoal (
#333333) for all paragraphs and standard content
- Borders & Dividers: Medium Gray (
#DEDEDE) for form inputs; Light Gray (#EEEEEE) for subtle separations
- Error States: Danger Red (
#D02E2E) for validation errors; Alert Orange (#FF4B00) for critical warnings
- Active/Hover States: Deep Teal (
#035A68) for pressed buttons; Teal Ocean (#1391A4) for hovered links
Iteration Guide
- Use Montserrat font exclusively for buttons, navigation, headings, and body text; reserve Poppins only for form labels to maintain design coherence
- Apply zero border-radius (
0px) to primary components (buttons, cards, containers) unless the element is circular (50%) or is a form input (3px–4px)
- Layer teal colors strategically: default state uses light teal (
#1391A4), hover/active states use deep teal (#035A68)
- Implement whitespace generously: minimum padding on major sections is 32px desktop, 24px tablet, 16px mobile; gaps between grid items default to 24px
- Maintain 1.25–1.5x line height on all typography; never use
line-height: 1 or tighter; body text defaults to 1.5x (21px line-height for 14px font)
- Shadow hierarchy is minimal: flat components have no shadow; raised cards use
0px 2px 8px rgba(0, 0, 0, 0.08); hover states increase to 0px 4px 16px rgba(0, 0, 0, 0.12)
- Form inputs must include focus states with box-shadow
0px 0px 0px 2px rgba(19, 145, 164, 0.1) and border color change to #1391A4
- Navigation states: default text color
#333333; hover/active states change to #1391A4 with underline 2px solid #1391A4
- Responsive collapsing: desktop 12-column grid → tablet 6-column → mobile 1-column; hamburger menu appears at 768px breakpoint; adjust container padding proportionally
- Accessibility compliance: never use color alone; pair with icons, text labels, and visible borders; maintain minimum contrast ratio of 4.5:1 for all text on background colors; button labels must be semantic HTML and never rely on title attributes
