---
version: alpha
name: ConnectiCraft
description: A dark, playful Minecraft community hub with a crafted arcade edge.
colors:
  primary: "#f4f1e8"
  secondary: "#9e9a91"
  tertiary: "#d7f26a"
  neutral: "#0c0d0b"
  surface: "#151713"
  surfaceRaised: "#1d201a"
  border: "#30352b"
  danger: "#ff806d"
typography:
  display:
    fontFamily: "Arial Black, Arial, sans-serif"
    fontSize: 4.5rem
    fontWeight: 900
    lineHeight: 0.94
    letterSpacing: "-0.06em"
  heading:
    fontFamily: "Arial, sans-serif"
    fontSize: 1.35rem
    fontWeight: 700
    lineHeight: 1.1
  body:
    fontFamily: "Arial, sans-serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.55
  mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 0.75rem
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: "0.08em"
spacing:
  xs: 8px
  sm: 12px
  md: 20px
  lg: 32px
  xl: 64px
rounded:
  sm: 10px
  md: 18px
  lg: 28px
components:
  primary-button:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 14px
  secondary-button:
    backgroundColor: "{colors.surfaceRaised}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 14px
---

## Overview

ConnectiCraft is a **Decide / Explore** surface: it introduces the Minecraft community, then opens doors into the server, Discord, Chimpwares, and a browser arcade. The visual language is an original field guide for a living game world: near-black earth, warm paper type, and one electric lime signal color.

## Colors

Lime is reserved for actions, live status, and small moments of discovery. Warm white carries the main story. Raised panels are subtle and tactile rather than glossy.

## Typography

A heavy display face gives the wordmark a poster-like presence. System sans keeps the rest fast and readable; monospace is reserved for labels and status metadata.

## Layout

The home page uses a split editorial hero, a compact live-status strip, and an asymmetric destination grid. It is intentionally not a generic three-card SaaS layout.

## Shapes

Corners are softened but not inflated. Borders are visible, low-contrast, and used to group real destinations.

## Components

Primary actions use lime. Secondary actions use raised charcoal surfaces. Cards should feel like destinations, not decorative feature tiles.

## Do's and Don'ts

- Do keep the lime accent scarce and meaningful.
- Do replace draft URLs in the HTML before launch.
- Don't add fake player counts or server claims until they are connected to real data.
- Don't turn every section into an identical card grid.