Elden Ring Weapon Calculator

Overview

The Elden Ring Weapon Calculator is a **tactical data-visualization tool** designed for hardcore players optimizing damage output across multiple game versions and mods. The aesthetic is **Dark Brutalism with Warm Accents**: a near-black canvas (rgb(14, 18, 14)) provides the austere, serious foundation, while a warm golden-tan primary accent (#d4a574) highlights interactive elements and critical data points—mimicking the warm glow of runes and enchantments in the game itself. The interface evokes precision, depth, and the methodical nature of min-maxing; every pixel serves function over decoration.

The brand voice is **technical yet accessible**: direct, unadorned, and respectful of the player's time. Sentences are short and data-forward. Example: "Rosus' Axe +10 deals 674 total damage with Standard affinity at 30 Strength." The UI prioritizes information density and rapid scanning—no flourishes, no animations that distract from the calculation. Typography uses Prompt (a geometric, slightly condensed sans-serif) at medium weight (500–600) to maintain legibility on dark backgrounds while preserving the technical, utilitarian tone.

Colors

The color system is built on **high-contrast dark mode** with a single warm accent to guide attention. **Primary (#d4a574)** is the signature warm gold used exclusively on interactive CTAs (buttons, checkboxes when checked), data highlights (weapon names in orange/gold affinity rows), and focus states. It appears sparingly but decisively, creating visual hierarchy without noise. **Surface stack** ranges from near-black (#0e120e for base) through mid-tones (#1f1d17 for containers) to lighter grays (#35332b for highest), enabling subtle layering without harsh contrast. **On-surface (#ffffff)** is pure white for body text and labels, ensuring 21:1 contrast ratio on dark backgrounds. **Outline (#8a8a8a)** and **outline-variant (#505050)** define borders on inputs, dropdowns, and cards at 1px w

Typography

The type system uses **Prompt** (Google Fonts, geometric sans-serif) across all scales, chosen for its technical neutrality and legibility at small sizes on dark backgrounds. **Display (60px, 700 weight)** anchors the page title with -0.04em letter-spacing for tightness. **Headline-md (28px, 600 weight)** introduces major sections ("Affinity", "Weapon Type"). **Body-md (16px, 500 weight)** is the workhorse for table cells, labels, and descriptions—Prompt's medium weight (500) is heavier than typical body text, compensating for the dark background and maintaining clarity without bold. **Label-md (14px, 600 weight)** marks form labels and column headers with 0.01em tracking for subtle emphasis. **Label-sm (12px, 500 weight)** is used for badges, stat abbreviations, and tertiary information.

Layout

The layout uses a **12-column fluid grid** with a max-width of 1280px, centered on desktop. The left sidebar (controls: version, affinity filters, weapon type) occupies ~3 columns; the main table (weapon results) spans ~9 columns. **Spacing** follows a strict 8px unit scale: `{spacing.sm}` (12px) for input padding and table cell padding, `{spacing.md}` (24px) for section margins and card padding, `{spacing.lg}` (40px) for major section breaks. The gutter between sidebar and table is 24px. Container max-width is 1280px to prevent line-length bloat on ultra-wide displays. White space is minimal but intentional—the interface is data-dense, so breathing room is reserved for section dividers (horizontal rules at 1px, {colors.outline-variant}) and gaps between control groups. Mobile breakpoints

Elevation & Depth

Depth is conveyed through **layered surfaces and subtle shadows**, not dramatic drop-shadows. The base layer is the dark background (#0e120e). **Level 1 (Standard surfaces)**: cards and input fields use `background: {colors.surface-container}` (#1f1d17) with `border: 1px solid {colors.outline-variant}` (#505050) and no shadow. **Level 2 (Elevated/Interactive)**: on hover or focus, surfaces lift to `background: {colors.surface-container-high}` (#2a2820) with `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)` (the single shadow used site-wide, matching the CSS excerpt). Dropdown panels use this same sh

Shapes

The shape philosophy is **Minimal Geometric Precision**: border-radius is kept small and consistent, reflecting the technical, utilitarian nature of the tool. **Default (0.5rem / 8px)** is used for most interactive elements: buttons, input fields, dropdown panels, and cards. This radius is just enough to soften hard edges without appearing playful or rounded. **sm (0.25rem / 4px)** is used sparingly for checkboxes and very small UI elements. **lg (1rem / 16px)** is reserved for larger modals or future expanded components. **full (9999px)** is used only for badges and pill-shaped elements. The

Components

Action Elements **Button-primary** uses `background: {colors.primary}` (#d4a574), `color: {colors.on-primary}` (#1f1d17), `padding: 8px 16px`, `height: 40px`, `border-radius: 0.5rem`, and `border: 1px solid {colors.outline-variant}`. On hover, the background shifts to `{colors.primary-fixed-dim}` (#a8845a) and a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) appears. Transition is 150ms ease-out. **Button-secondary** is transparent with `color: {colors.primary}`, same padding and height, and a 1px border at {colors.outline-variant}. On hover, `background: {colors.surface-container-high}` (#2a2820) appears without shadow.

Containers & Surfaces **Card** is the base container: `background: {colors.surface-container}` (#1f1d17), `padding: 24px`, `border-radius: 0.5rem`, `border: 1px so

Do's and Don'ts

**Do**

• Do use {colors.primary} (#d4a574) exclusively for CTAs, focus states, and critical data highlights—never on backgrounds or body text.
• Do maintain 1px solid {colors.outline-variant} (#505050) borders on all inputs, cards, and dropdowns to define edges without shadows.
• Do apply `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)` only on hover/elevated states; never use multiple shadow layers.
• Do use Prompt at 500–600 weight for all text; avoid lighter weights on dark backgrounds as they reduce contrast below 18:1.
• Do keep border-radius at 0.5rem (8px) for consistency across buttons, inputs, and cards; reserve 0.25rem for tiny elements only.
• Do invert dropdown panels to light mode (#e9ecef background, #1f1d17 text) to break visual monotony and improve readability.

**Don't**

• Don't use near-black or near-white as primary; the warm gold (#d4a574) is the brand accent and must remain visually distinct.
• Don't apply text-shadow or glow effects; the 21:1 contrast ratio on dark backgrounds is sufficient without embellishment.
• Don't exceed 1px border width on inputs or cards; thicker borders feel heavy and dated on modern dark-mode interfaces.
• Don't mix border-radius values (e.g., 0.5rem on buttons and 0.75rem on inputs); consistency is critical for technical credibility.
• Don't use drop-shadows on table rows or list items; dense data tables become visually chaotic with per-row shadows.
• Don't apply animations longer than 150ms on hover states; the interface should feel snappy and responsive, not sluggish.