---
version: alpha
name: G Mining
description: Industrial corporate minimalism — near-black charcoal canvas with a signature lime-green accent, clean grotesque sans-serif headlines, generous whitespace, and restrained mining-engineering precision. Statistics as bold display numbers, square-edged cards, and a confident "plan better, build together" voice.

colors:
  # Canvas + ink
  background: "#0e1110"
  surface: "#171b1a"
  surface-soft: "#1e2322"
  ink: "#f2f4f3"
  ink-secondary: "#a7afad"
  ink-muted: "#6f7775"

  # Signature accent — G Mining lime
  primary: "#c5e000"
  accent-hover: "#d6f02a"
  on-primary: "#0e1110"

  # Light-section inversion (some sections invert to light)
  light-bg: "#f5f6f4"
  light-surface: "#ffffff"
  light-ink: "#161a19"
  light-ink-secondary: "#5a625f"

  # Borders + dividers
  border: "#2a302e"
  border-strong: "#3a423f"
  border-light: "#e2e4e0"

  # Status / tags
  tag-bg: "#1e2322"
  tag-text: "#c5e000"

  # On-color
  on-ink: "#0e1110"

typography:
  display-hero:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -2px
  section-heading:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  stat-number:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -1.5px
  body-large:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.5px
  nav-link:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Archivo, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.3px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 10px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
  button-primary-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.border-strong}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 16px 32px
    borderColor: "{colors.primary}"

  badge:
    backgroundColor: "{colors.tag-bg}"
    textColor: "{colors.tag-text}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 6px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
    borderColor: "{colors.border}"

  card-project:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  card-stat:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.stat-number}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 40px
    borderColor: "{colors.border}"
---

# G Mining Design System

## Overview

G Mining Services is a mining engineering and construction firm, and its website carries the visual confidence of heavy industry rendered with restraint. The canvas is a deep, slightly desaturated charcoal-green (`{colors.background}`) rather than pure black — a color that reads as graphite, rock, and machined metal. Against that darkness, near-white text (`{colors.ink}`) and a single electric lime accent (`{colors.primary}`) do all the talking. The result is a system that feels engineered and precise without ever feeling cold or corporate-generic.

The signature move is the lime-green accent. It appears sparingly — on primary CTAs, tag text, stat numbers, and the brand mark — never as decoration. Because the rest of the palette is achromatic graphite, that one saturated color carries the entire brand identity. When a button turns lime, it is unmistakably G Mining. The accent reads as a hi-vis safety color borrowed from the mine site, lending the digital experience a tactile, on-the-ground authenticity.

Typography is a clean grotesque sans-serif (Archivo as the closest Google match), used at large display sizes with tight negative tracking for headlines and a confident "Plan better, build together" hero voice. Statistics are presented as oversized display numbers (`{typography.stat-number}`) — the firm lets its track record speak in big bold figures rather than prose. Body copy stays generous in line-height for readability against the dark ground.

Shape language is deliberately squared. Buttons, cards, tags, and inputs are sharp-cornered (`{rounded.none}`) or barely softened, echoing the rectilinear precision of engineering drawings, structural steel, and site plans. There are no playful pills or heavy shadows here — depth comes from surface elevation (`{colors.surface}` over `{colors.background}`) and thin graphite borders.

**Key Characteristics:**
- Deep graphite-charcoal canvas (`{colors.background}`) — reads as rock and machined metal, not pure black
- Single electric-lime accent (`{colors.primary}`) used functionally on CTAs, stats, tags, and brand mark
- Clean grotesque sans-serif headlines with tight negative tracking at display sizes
- Oversized stat numbers — the firm's track record told in big figures
- Squared, sharp-cornered shape language echoing engineering precision
- Surface elevation + thin graphite borders for depth, no heavy shadows
- Hi-vis safety-color logic — the lime is borrowed from the mine site
- Some sections invert to a light ground for contrast and rhythm

## Colors

### Canvas & Ink
- **Graphite** (`{colors.background}`): Primary dark canvas. Desaturated charcoal-green, not pure black.
- **Surface** (`{colors.surface}`): Elevated cards and panels, one step lighter than canvas.
- **Surface Soft** (`{colors.surface-soft}`): Secondary elevation, hover fills.
- **Ink** (`{colors.ink}`): Near-white primary text on dark.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Signature Accent
- **G Mining Lime** (`{colors.primary}`): The brand color. CTAs, stat numbers, tag text, brand mark. Used sparingly.
- **Accent Hover** (`{colors.accent-hover}`): Brighter lime on interaction.
- **On Primary** (`{colors.on-primary}`): Graphite text on lime fills — the lime is too bright for white text.

### Light Inversion
- **Light Bg** (`{colors.light-bg}`): Light section ground for rhythm and contrast.
- **Light Surface** (`{colors.light-surface}`): White cards within light sections.
- **Light Ink** (`{colors.light-ink}`): Near-black text on light ground.
- **Light Ink Secondary** (`{colors.light-ink-secondary}`): Supporting text on light ground.

### Borders
- **Border** (`{colors.border}`): Thin graphite dividers and card outlines on dark.
- **Border Strong** (`{colors.border-strong}`): Input outlines, emphasized dividers.
- **Border Light** (`{colors.border-light}`): Dividers within light sections.

### Tags
- **Tag Bg** (`{colors.tag-bg}`): Squared status/category tag background.
- **Tag Text** (`{colors.tag-text}`): Lime text within tags.

## Typography

### Font Family
- **Primary**: `Archivo`, with fallbacks `Helvetica Neue, Arial, sans-serif` — a grotesque sans-serif with strong geometric structure suited to large industrial display headlines.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 72px hero — "Plan better, build together" billboard |
| `section-heading` | Major section titles |
| `sub-heading` | Sub-sections, panel headings |
| `card-title` | Project and service card titles |
| `stat-number` | Oversized statistics in lime |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text, metadata |
| `button-ui` | Buttons with slight positive tracking |
| `nav-link` | Top navigation links |
| `eyebrow` | Uppercase section labels with wide tracking |
| `caption` | Tags, fine print |

### Principles
- **Display compression**: Headlines use tight negative tracking (-2px at 72px) for an engineered, structural feel.
- **Numbers as proof**: Statistics get the largest weight after the hero — the firm argues with figures, not adjectives.
- **Eyebrow tracking**: Small uppercase labels use wide positive tracking (1.5px) to read as engineering callouts.
- **Three weights**: 400 (body), 500–600 (UI/headings), 700 (display/stats).

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px with large jumps (`{spacing.3xl}`–`{spacing.4xl}`) for generous section separation.

### Grid & Container
- Max content width: approximately 1280px
- Hero: large single-column statement with generous top padding
- Services: vertical numbered list
- Projects: 2–3 column card grid
- Stats: horizontal row of oversized display numbers

### Whitespace Philosophy
- **Industrial breathing room**: Large vertical padding between sections (`{spacing.3xl}`+) lets the dark canvas dominate.
- **Squared rhythm**: Sharp-cornered modules tile cleanly with consistent gutters.
- **Section inversion**: Dark and light sections alternate to pace the scroll.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, tags, inputs — the default |
| `xs` | 2px | Barely-softened functional elements |
| `sm` | 4px | Small containers |
| `md` | 6px | Larger panels when softened |
| `lg` | 10px | Featured media |
| `pill` | 9999px | Reserved — rare, language/social toggles |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Lime fill, graphite text, squared corners. The default CTA ("Send a message now").
- **`button-secondary`** — Dark fill with graphite border for secondary actions.
- **`button-ghost`** — Transparent with a lime outline and lime text.

### Tags & Badges
- **`badge`** — Squared dark tag with lime text for project status and category labels.

### Cards
- **`card`** — Elevated graphite surface with a thin border, sharp corners.
- **`card-project`** — Project grid card with year/status tag and title.
- **`card-stat`** — Oversized lime stat number over a supporting label.

### Inputs
- **`input`** — Dark surface, strong graphite border, squared. Focus shifts the border to lime.

### Navigation
- **`nav-bar`** — Dark sticky header, 15px nav links, language and social toggles, lime CTA right.

## Do's and Don'ts

### Do
- Keep the lime accent functional and sparing — CTAs, stats, tags, brand mark only
- Use squared corners (`{rounded.none}`) as the default shape
- Let statistics dominate as oversized display numbers
- Use graphite text on lime fills (`{colors.on-primary}`) — never white
- Build depth from surface elevation + thin borders, not heavy shadows
- Alternate dark and light sections for scroll rhythm

### Don't
- Don't scatter the lime decoratively — it loses its punch
- Don't use pill radius on buttons — squared is the identity
- Don't put white text on lime — the contrast fails
- Don't use heavy drop shadows — depth is elevation + border
- Don't soften the geometry into rounded, playful shapes

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked stats, hamburger nav |
| Tablet | 600–1024px | 2-column project grid |
| Desktop | 1024–1280px | Full grid, max content width |
| Large | >1280px | Centered with generous margins |

### Collapsing Strategy
- Hero: 72px → scales down, maintains negative tracking
- Navigation: horizontal links → hamburger menu, language/social into drawer
- Project cards: 3-column → 2-column → single column
- Stats row: horizontal → stacked
- Section spacing: 96px+ → 48px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Graphite `{colors.background}`
- Primary CTA: Lime `{colors.primary}` with graphite text `{colors.on-primary}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Tags / stats: Lime `{colors.primary}`
- Borders: `{colors.border}`

### Example Component Prompts
- "Create a hero on graphite `{colors.background}`. Headline 'Plan better, build together' at 72px Archivo weight 700, line-height 1.02, letter-spacing -2px, color `{colors.ink}`. Lead paragraph at 20px weight 400, `{colors.ink-secondary}`. Lime CTA button (`{colors.primary}` fill, graphite text, squared, 16px 32px padding)."
- "Design a stats row: three oversized numbers at 64px Archivo weight 700 in lime `{colors.primary}`, each over a 14px label in `{colors.ink-secondary}`, on graphite `{colors.background}`."
- "Build a project card: surface `{colors.surface}`, thin `{colors.border}` outline, squared corners, 24px padding. Squared tag with lime text top-left, 22px weight 600 title below."

### Iteration Guide
1. Default every corner to squared (`{rounded.none}`) — softness is the exception
2. Lime is functional only — CTAs, stats, tags, brand mark
3. Graphite text on lime, never white
4. Let big stat numbers carry the proof
5. Depth = surface elevation + thin border, never heavy shadow

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by G Mining. Brand names and trademarks belong to their respective owners.