MEGA Resources

Overview

MEGA Resources operates in the mining and resources sector, serving investors, stakeholders, and operational teams with a brand that communicates industrial confidence and earth-rooted authenticity. The aesthetic is 'Industrial Minimalism with Warmth'—a deliberate fusion of austere, high-contrast surfaces (charcoal #404042, near-black #2a2a2c) paired with a bold, warm accent orange (#eb6d2e) that signals energy, action, and forward momentum. The UI evokes the scale and solidity of mining operations while remaining approachable and modern. The emotional response is one of stability, expertise, and purposeful ambition: users feel they are engaging with a serious, capable organization.

The brand voice is direct, factual, and confident—never hyperbolic or breathless. Vocabulary emphasizes precision: 'JORC resource', 'full mining permits', 'strategic hub', 'production capacity'. Tone is professional yet accessible; sentences are clear and unadorned. Example sentence in brand voice: 'Rama is positioned as a central hub for gold production, with 85,000 ounces of JORC-compliant resource and full permitting in place.'

Colors

The color system is built on a dark, neutral foundation with a single, strategically deployed accent. Primary surface (#404042) and its container stack (ranging from #1a1a1c to #5a5a5d) create a professional, high-contrast canvas that emphasizes content and imagery. The on-surface palette (#ffffff for primary text, #cdcccb for secondary) ensures legibility and hierarchy without glare. Primary accent orange (#eb6d2e) is reserved exclusively for call-to-action buttons, key interactive elements, and brand moments—it appears on 'GET IN TOUCH', 'BACK TO PROJECTS', and hover states. This restraint makes the orange feel intentional and commanding rather than decorative. Secondary green (#65bc7b) provides a supporting accent for status indicators, highlights, or tertiary actions. Error red (#cf2e2

Typography

The type system centers on Montserrat, a geometric sans-serif that conveys modernity and precision. Display (62px, weight 900) is reserved for hero headlines and primary page titles, set in all-caps for maximum impact. Headline-lg (48px, weight 700) and headline-md (36px, weight 700) structure section breaks and subsections, maintaining visual hierarchy through size and weight rather than color. Body text (16px–18px, weight 400) is set with 24–28px line-height to ensure readability on dark backgrounds; letter-spacing is kept minimal (0.01em) to preserve the geometric character of Montserrat. Labels and buttons use weight 600–900 with increased letter-spacing (0.02–0.03em) to create visual distinction and emphasis. All headlines use negative letter-spacing (-0.01em to -0.03em) to tighten th

Layout

The page layout uses a 12-column grid with a max-width of 1280px, centered on desktop and full-width on mobile with 24px gutters. Sections are separated by lg spacing (40px) vertically and md spacing (24px) horizontally, creating a rhythm that feels spacious without excessive whitespace. Hero sections span full-width with a semi-transparent dark overlay (rgba(64, 64, 66, 0.5)) to ensure text legibility over imagery. Content containers use md padding (24px) on mobile, lg padding (40px) on tablet, and xl padding (64px) on desktop. The container-max-width of 1280px prevents content from stretching excessively on ultra-wide displays. White-space is used strategically: generous margins around section headings (lg spacing above, md spacing below) create visual breathing room, while compact paddi

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than glassmorphism or dramatic effects. Level 1 (Base): flat surfaces with no shadow, used for primary backgrounds and large content areas. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), applied to cards, modals, and lifted containers to create gentle separation from the background. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), used on hover states and interactive elements to signal interactivity. Shadows are always dark (rgba(0, 0, 0, ...)) and never colored, maintaining the industrial ae

Shapes

The shape philosophy is 'Architectural Sharpness'—a commitment to sharp, right-angled forms that echo industrial design and mining infrastructure. Default border-radius is 0px (no rounding) across all surfaces, buttons, and containers. Exceptions are applied sparingly: md (5px) for list items and subtle interactive elements to reduce visual harshness without compromising the industrial character, lg (12px) for modals and overlays to signal importance, and full (9999px) for badges and pill-shaped elements. Buttons use DEFAULT (4px) for a minimal, professional appearance. This restraint in round

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (background: #eb6d2e, color: #ffffff, padding: 20px 40px, height: 48px, font-weight: 900, border-radius: 4px) is used for primary CTAs like 'GET IN TOUCH' and 'BACK TO PROJECTS'. On hover, background transitions to #d95a1a (200ms ease-in-out) with no shadow change, maintaining flatness. Button-secondary (background: transparent, color: #eb6d2e, border: 2px solid #eb6d2e, padding: 10px 15px, height: 40px) is used for tertiary actions and links; on hover, background becomes rgba(235, 109, 46, 0.1) with the same 200ms transition. Both button variants use Montserrat weight 900 and letter-spacing 0.02em for maximum legibility and brand presence.

Containers & Surfaces Cards (background: #404042, border-radius:

Do's and Don'ts

**Do**

• Do use Montserrat weight 900 for all headlines and primary CTAs to reinforce the bold, confident brand voice.
• Do apply the primary orange (#eb6d2e) exclusively to interactive elements and CTAs—never use it for passive content or backgrounds.
• Do maintain sharp edges (0px border-radius) on primary surfaces and buttons to preserve the industrial aesthetic.
• Do pair dark surfaces (#404042) with white text (#ffffff) and reserve #cdcccb for secondary information to ensure hierarchy and legibility.
• Do use lg spacing (40px) to separate major sections and create visual breathing room without excessive whitespace.
• Do apply box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) to cards and lifted elements for subtle depth without floating effects.

**Don't**

• Don't use rounded corners (border-radius > 4px) on primary buttons or card containers—maintain architectural sharpness.
• Don't apply the primary orange to backgrounds, body text, or decorative elements; reserve it for actionable CTAs only.
• Don't use gradients, blur effects, or glassmorphism—the design relies on flat, solid colors and sharp edges.
• Don't exceed 1280px container max-width on desktop; maintain consistent content width for readability.
• Don't use color alone to convey meaning; pair color changes with typography weight, size, or spacing for clarity.
• Don't apply shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.2)—excessive shadows undermine the grounded, industrial aesthetic.