PURE CSS THEME / VERSION 1.0

Ore

A block-built interface theme for ApricityUI, adapted from Minecraft-CSS and packaged with local fonts.

Pure CSS No CDN MPL-2.0
O
02 / MATERIAL PALETTE

Color tokens

Deep stone
Emerald
Amethyst
Gold
Redstone
Lapis
01 / TYPE SYSTEM

Typography

Ore Display carries headings and controls. Ore Regular handles body copy, data, and longer labels.

Heading scale

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Body styles

Standard copy stays readable over deep stone surfaces. Strong text increases emphasis without changing the typeface.

Muted copy is intended for descriptions, metadata, and secondary status.

Small text: coordinates 124 / 68 / -32

Large text: Diamond level reached

Inline link and /give @s diamond

INTERACTION STATES

Actions & navigation

Hover and press each control to inspect its face, inset edge, and depth response.

Button variants
Sizing & composition
NAVIGATION STATES

Tabs & pagination

Navigation components preserve the same stone surfaces and amethyst selection state.

Tabs

The active tab uses an amethyst top edge while preserving the stone surface.

Pagination component
INPUT & SELECTION

Forms

Labels, help text, validation, selection controls, and grouped actions share one pixel-aligned rhythm.

World settings
Displayed in the world selection list.
TEXT & VALIDATION

Text areas & validation

Long-form input and validation states remain visible together without an inner scrolling surface.

Description
Shown beneath the world name when additional context is available.
Validation
This name can be used.
Choose a different name.
CHOICE & GROUPING

Form controls

Selection controls, grouped inputs, disabled fields, and form actions use the same control rhythm.

World options
Difficulty
Input group
Disabled fields
STRUCTURED CONTENT

Data display

Cards, tables, lists, badges, and inventory slots cover dense operational interfaces.

Overworld

Base Camp

Last played today

Online Survival
Nether

Fortress Route

Coordinates 84 / 63 / -210

Portal Hazard
The End

Outer Islands

Gateway route saved

Rare Mapped
DENSE DATA

Tables, lists & slots

Dense resource data remains legible without nesting another scrolling surface.

Resource ledger
ResourceLayerStockStatus
Coal96384Stable
Iron32128Processing
Gold-1654Low
Diamond-5412Rare
Redstone-59512Full
Server list
  • Builders18 / 40
  • Redstone Lab7 / 20
  • Adventure32 / 64
  • Offline archiveOffline
SLOT GRID

Inventory slots

Slots retain their fixed square format and hover state without forcing the surrounding page to scroll.

Inventory slot example
Fe
Au
C
Cu
L
R
Q
E
D
64
32
18
8
SYSTEM RESPONSE

Feedback & overlays

Communicate state with color, edge weight, progress, and focused modal surfaces.

World saved. All region files were written successfully.
Resource reload. New theme assets are now available.
Storage warning. Only 12 slots remain in this chest.
Connection lost. Reconnect before continuing.
Progress
Terrain82%
Resources56%
Lighting24%
OVERLAYS & STATUS

Dialogs & status

Focused overlays and compact status labels complete the feedback vocabulary.

Modal dialog

Ore includes the structural styles for backdrop, header, content, and footer.

Status vocabulary
ReadySuccess
QueuedInfo
AttentionWarning
BlockedDanger
SpecialRare
COMPOSITION & ADOPTION

Layout & usage

The twelve-column grid collapses for narrow viewports, while stacks and clusters cover common component flow.

Twelve-column grid
12 columns
8 columns
4 columns
6 columns
6 columns
3
3
3
3
ADOPTION

Usage & utilities

The theme is scoped by one class and ships with layout and text utilities for common composition.

Quick start
<link rel="stylesheet" href="ore.css">

<body class="ore-theme">
  <button class="button button-primary">
    Create world
  </button>
</body>
Theme contract
  • Theme scope.ore-theme
  • Variables--ore-*
  • Display fontOreDisplay
  • Body fontOreRegular
  • LicenseMPL-2.0
UTILITY CLASSES

Utility samples

Color, spacing, alignment, and panel utilities can be composed without changing the component layer.

Text and spacing
Success text Warning text Danger text Info text Muted text
Padding, centered text, panel surface, and responsive width.