Xcgh

Generated Oct 9, 2026

DESIGN.md for fantasyvisuals.cc

fantasyvisuals.cc14 colors6 componentsOpen Runde

Remix

12 screenshots captured· fantasyvisuals.cc

1 / 12 · Fantasy — visual effects & HUD client for Minecraft · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Fantasyvisuals
description: |
  Fantasy's design system embodies a modern, vibrant gaming aesthetic with a
  clean hierarchy that balances playful brand energy against highly legible
  content. The visual language combines sleek dark navigation elements with
  bright, airy content surfaces, creating a sense of elevation and clarity. The
  system leans into digital momentum through rounded, pill-shaped interactive
  elements and layered color blocking that avoids heavy shadows, instead using
  proximity and surface colour shifts to establish depth. Typography is generous
  and purposeful, with tight letter-spacing on large display sizes creating a
  compact, impactful presence. The overall impression is sophisticated yet
  approachable—designed for players who value both function and visual delight.
source:
  url: "https://fantasyvisuals.cc/"
  pagesAnalyzed: 6
  extractedAt: 2026-10-09
  tokensMeasured: true
colors:
  primary: "#918DF6"
  accent: "#8B70EC"
  canvas: "#FFFFFF"
  surface: "#F5F5F5"
  on-primary: "#222222"
  ink: "#181925"
  body: "#666666"
  muted: "#999999"
  hairline: "#E8E8E8"
  accent-1: "#33C758"
  accent-2: "#1E2846"
  accent-3: "#D6409F"
  accent-4: "#BED5FE"
  neutral-1: "#9192A1"
typography:
  display-xxl:
    fontFamily: Fraunces
    fontSize: 178px
    fontWeight: 640
    lineHeight: 0.94
    letterSpacing: -1.78px
  display-xl:
    fontFamily: "Open Runde"
    fontSize: 68px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -2.38px
  display-lg:
    fontFamily: Impact
    fontSize: 64.17px
    fontWeight: 900
    lineHeight: 1
    letterSpacing: 1.28px
  display-md:
    fontFamily: "Open Runde"
    fontSize: 60px
    fontWeight: 600
    lineHeight: 1.13
    letterSpacing: -3px
  display-sm:
    fontFamily: "Open Runde"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.96px
  heading-xl:
    fontFamily: "Open Runde"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.22
    letterSpacing: -1.8px
  heading-xl-strong:
    fontFamily: "Open Runde"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.22
    letterSpacing: -1.8px
  heading-lg:
    fontFamily: "Open Runde"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: -0.32px
  heading-md:
    fontFamily: "Open Runde"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.32px
  heading-sm:
    fontFamily: "Open Runde"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: -0.32px
  heading-xs:
    fontFamily: "Open Runde"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: -0.32px
  body-lg:
    fontFamily: "Open Runde"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.32px
  body-md:
    fontFamily: "Open Runde"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.32px
  body-md-strong:
    fontFamily: "Open Runde"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.32px
  body-sm:
    fontFamily: "Open Runde"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.32px
  body-sm-tight:
    fontFamily: "Open Runde"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.28px
  body-sm-strong:
    fontFamily: "Open Runde"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.32px
  button-md:
    fontFamily: "Open Runde"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.28px
  button-sm:
    fontFamily: Geist
    fontSize: 12.8px
    fontWeight: 500
    lineHeight: 1.56
    letterSpacing: -0.32px
  button-xs:
    fontFamily: Geist
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.12px
  label-sm:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  label-sm-strong:
    fontFamily: Geist
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.32px
  caption:
    fontFamily: "Open Runde"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.32px
rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 10px
  xl: 12px
  xxl: 14px
  r-18: 18px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  xxl: 32px
  xxxl: 40px
  section: 48px
  band: 64px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px"
  md: "oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px"
elevationStrategy: layered-micro
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FFFFFF"
    surface: "#F5F5F5"
    surfaceRaised: "#ECECED"
    text: "#181925"
    textMuted: "#666666"
    border: "#E8E8E8"
    accent: "#7F7AF5"
    accentFg: "#000000"
    focusRing: "#918DF6"
    elevation: shadow
  dark:
    bg: "#0D0D12"
    surface: "#1C1C20"
    surfaceRaised: "#28282C"
    text: "#FBFAFF"
    textMuted: "#A1A0A5"
    border: "#343438"
    accent: "#918DF6"
    accentFg: "#0B0B0C"
    focusRing: "#918DF6"
    elevation: "border+surface"
gradients:
  - context: hero
    kind: radial
    value: "radial-gradient(115% 95% at 6% 80%, rgb(30, 99, 253) 0px, rgba(30, 99, 253, 0) 62%), radial-gradient(100% 85% at 94% 32%, rgb(217, 173, 230) 0px, rgba(217, 173, 230, 0) 62%), radial-gradient(130% 110% at 50% 0px, rgb(180, 164, 231) 0px, rgba(180, 164, 231, 0) 72%)"
components:
  button-outline:
    textColor: "oklch(0.145 0 0)"
    border: "1px solid oklch(0.922 0 0)"
    height: 32px
    padding: "0px 10px 0px 10px"
    fontSize: 14px
    fontFamily: Geist
    fontWeight: 500
    lineHeight: 1.43
    rounded: "{rounded.lg}"
    backgroundColor: "oklch(1 0 0)"
  button-primary:
    typography: "{typography.button-md}"
    textColor: "{colors.canvas}"
    height: 44px
    padding: "0px 20px 0px 20px"
    rounded: "{rounded.full}"
    backgroundColor: "{colors.primary}"
  button-outline-sm:
    typography: "{typography.button-sm}"
    textColor: "oklch(0.145 0 0)"
    border: "1px solid oklch(0.922 0 0)"
    height: 28px
    padding: "0px 10px 0px 10px"
    rounded: "{rounded.md}"
    backgroundColor: "oklch(1 0 0)"
  button-filled:
    typography: "{typography.button-md}"
    textColor: "{colors.body}"
    height: 44px
    padding: "0px 20px 0px 20px"
    rounded: "{rounded.full}"
    backgroundColor: "rgba(0, 0, 0, 0.03)"
  button-text:
    textColor: "oklch(0.985 0 0)"
    height: 32px
    padding: "0px 10px 0px 10px"
    fontSize: 14px
    fontFamily: Geist
    fontWeight: 500
    lineHeight: 1.43
    rounded: "{rounded.lg}"
    backgroundColor: "oklch(0.205 0 0)"
  button-primary-2:
    typography: "{typography.body-sm-tight}"
    textColor: "{colors.canvas}"
    height: 44px
    padding: "0px 20px 0px 20px"
    rounded: 999px
    backgroundColor: "{colors.primary}"
  card:
    typography: "{typography.label-sm}"
    textColor: "oklch(0.145 0 0)"
    padding: "0px 4px 0px 0px"
  card-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
  badge-filled:
    textColor: "{colors.canvas}"
    height: 30px
    padding: "0px 10px 0px 10px"
    fontSize: 22px
    fontFamily: MinecraftF
    fontWeight: 400
    lineHeight: 1
    backgroundColor: "rgba(0, 0, 0, 0.3)"
  badge-filled-sm:
    typography: "{typography.heading-xs}"
    textColor: "rgba(0, 0, 0, 0.4)"
    height: 24px
    padding: "0px 8px 0px 8px"
    rounded: "{rounded.sm}"
    backgroundColor: "rgba(0, 0, 0, 0.03)"
  navigation:
    typography: "{typography.button-md}"
    textColor: "{colors.neutral-1}"
    height: 52px
    padding: "0px 13px 0px 16px"
    boxShadow: "rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 1px"
    rounded: 24px
    backgroundColor: "{colors.ink}"
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.body}"
    padding: "64px 20px 0px 20px"
  link:
    typography: "{typography.button-md}"
    textColor: "{colors.neutral-1}"
    padding: "4px 8px 4px 8px"
  link-lg:
    typography: "{typography.button-md}"
    textColor: "{colors.ink}"
    padding: "0px 6px 0px 10px"
    boxShadow: "rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px"
    rounded: "{rounded.full}"
    backgroundColor: "{colors.canvas}"
states:
  other-hover:
    target: other
    state: hover
    opacity: 0.9
  button-hover:
    target: button
    state: hover
    opacity: 0.9
  button-active:
    target: button
    state: active
    transform: "translateY(1px)"
  button-disabled:
    target: button
    state: disabled
    opacity: 0.5
  other-disabled:
    target: other
    state: disabled
    opacity: 0.5
  card-focus-visible:
    target: card
    state: focus-visible
    rounded: "{rounded.md}"
  other-focus-visible:
    target: other
    state: focus-visible
    outline: none
  other-active:
    target: other
    state: active
    transform: "scale(0.94)"
breakpoints:
  - width: 375
    containerWidth: 343
    gridColumns: 1
    navLinksVisible: 3
    menuToggleVisible: false
    headingPx: 44
    bodyPx: 16
    sectionPaddingX: 16
  - width: 768
    containerWidth: 728
    gridColumns: 2
    navLinksVisible: 3
    menuToggleVisible: false
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1024
    containerWidth: 984
    gridColumns: 2
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1280
    containerWidth: 1024
    gridColumns: 2
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 20
  - width: 1440
    containerWidth: 1024
    gridColumns: 2
    navLinksVisible: 6
    menuToggleVisible: false
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 20
coverage:
  statesFound: 64
  gradientsFound: 1
  rolesUnassigned: 5
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Fantasy

1. Visual Theme & Atmosphere

Fantasy's design system embodies a modern, vibrant gaming aesthetic with a clean hierarchy that balances playful brand energy against highly legible content. The visual language combines sleek dark navigation elements with bright, airy content surfaces, creating a sense of elevation and clarity. The system leans into digital momentum through rounded, pill-shaped interactive elements and layered color blocking that avoids heavy shadows, instead using proximity and surface colour shifts to establish depth. Typography is generous and purposeful, with tight letter-spacing on large display sizes creating a compact, impactful presence. The overall impression is sophisticated yet approachable—designed for players who value both function and visual delight.

Key Characteristics

Bold, compact display typography with negative tracking for presence
Pill-shaped interactive elements ({rounded.full} — 9999px) suggesting movement and friendliness
Colour-blocking depth strategy over layered shadows; single-tier micro-elevations for subtle lift
High contrast between dark navigation ({colors.on-primary} — #222222) and white content surfaces
Generous whitespace and breathing room between sections
Accent purple ({colors.primary} — #918DF6) as primary visual hook and CTA signifier
Ample use of decorative gradient overlays and radial color fields in hero regions

2. Color Palette & Roles

Primary

Primary / Brand ({colors.primary} — #918DF6): Primary call-to-action fill, brand accent, active state indicator on interactive elements. Used extensively in buttons, badges, and link hovers.
Accent ({colors.accent} — #8B70EC): Secondary accent employed in hero bands and decorative overlays; slightly deeper than primary for layering.

Accent Colors (Decorative)

Accent Decorative 1 ({colors.accent-1} — #33C758): Decorative accent; no measured role in the system.
Accent Decorative 2 ({colors.accent-2} — #1E2846): Decorative accent; no measured role in the system.
Accent Decorative 3 ({colors.accent-3} — #D6409F): Decorative accent; no measured role in the system.
Accent Decorative 4 ({colors.accent-4} — #BED5FE): Decorative accent; no measured role in the system.

Neutral Scale

Canvas ({colors.canvas} — #FFFFFF): Default page background; primary content surface.
Surface ({colors.surface} — #F5F5F5): Secondary container background for cards and panels; provides subtle visual separation from canvas.
Ink ({colors.ink} — #181925): Primary heading and text colour; used for maximum contrast and readability on white backgrounds.
Body ({colors.body} — #666666): Body copy and supporting text; mid-grey for comfortable reading.
Muted ({colors.muted} — #999999): Captions, secondary text, and de-emphasized copy; lighter grey for visual hierarchy.
On Primary ({colors.on-primary} — #222222): Label and text colour on dark branded surfaces (e.g., dark navigation bars); near-black for contrast.
Neutral Utility ({colors.neutral-1} — #9192A1): Neutral grey-blue utility colour; secondary icon and text tint.

Borders & Hairlines

Hairline ({colors.hairline} — #E8E8E8): 1px dividers and subtle borders; provides visual separation without disruption.

3. Typography Rules

Font Family

Primary: Open Runde (open-source, geometric sans-serif; fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)

Secondary: Geist (UI font for smaller scales and inputs; fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif)

Display / Hero: Fraunces (serif display font for maximum visual impact; weight 640) and Impact (geometric display; weight 900). Fallback: Georgia, serif.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display XXL	Fraunces	178px	640	1.00 (178px)	-1.78px	Hero-scale typography; ultra-compact tracking. Rare, hero-only use.
Display LG	Impact	64.17px	900	1.00 (64px)	1.28px	Large hero display; high contrast, geometric letter-forms.
Display MD	Open Runde	60px	600	1.13 (68px)	-3.00px	Hero heading; strong visual presence with negative tracking.
Display SM	Open Runde	48px	500	1.00 (48px)	-0.96px	Secondary hero / section opener; compact, breathable.
Heading XL	Open Runde	36px	500	1.22 (44px)	-1.80px	Major section headings; tight spacing.
Heading XL Strong	Open Runde	36px	700	1.22 (44px)	-1.80px	Strong emphasis variant of heading XL; bolder weight.
Heading LG	Open Runde	24px	500	1.17 (28px)	-0.32px	Subsection headings.
Heading MD	Open Runde	20px	500	1.40 (28px)	-0.32px	Card titles, smaller headings.
Heading SM	Open Runde	18px	500	1.56 (28px)	-0.32px	Tight heading role; used sparingly.
Heading XS	Open Runde	14px	500	1.43 (20px)	-0.32px	Form labels, small headings.
Body LG	Open Runde	18px	500	1.33 (24px)	-0.32px / 0px	Large body copy; generous line-height.
Body MD	Open Runde	16px	400	1.50 (24px)	-0.32px	Default body text.
Body MD Strong	Open Runde	16px	500	1.50 (24px)	-0.32px	Emphasized body copy (mid-weight).
Body SM	Open Runde	14px	400	1.43 (20px)	-0.32px	Secondary body text, smaller scales.
Body SM Strong	Open Runde	14px	500	1.50 (21px)	-0.32px	Emphasized small body; used in buttons and labels.
Body SM Tight	Open Runde	14px	400	1.00 (14px)	-0.28px	Compact body; minimal line-height.
Button MD	Open Runde / Geist	14px	500	1.00 (14px)	-0.28px	Primary button label; tight line-height.
Button SM	Geist	12.8px	500	1.56 (20px)	-0.32px	Small button variant.
Button XS	Geist	12px	500	1.00 (12px)	-0.12px	Minimal button size.
Label SM	Geist	14px	400	1.43 (20px)	0px	Form input label; no tracking adjustment.
Label SM Strong	Geist	14px	500	1.00 (14px)	-0.32px	Emphasized form label.
Caption	Open Runde	12px	400	1.50 (18px)	-0.32px	Captions, fine print, metadata.

Principles

Negative Tracking on Display: Display sizes (MD, SM, and larger) employ tight negative letter-spacing (-3px to -0.96px) to create visual impact and compactness, a defining trait of the brand.
Generous Body Line-Height: Body copy uses 1.40–1.50 line-height for comfortable reading and visual breathing room.
Consistent Font-Family Nesting: Open Runde for all body, heading, and button text; Geist for form elements and utility labels; decorative fonts (Fraunces, Impact) reserved for hero displays only.
Emphasis via Weight, Not Size: Hierarchy is achieved through weight shifts (500, 600, 700) rather than size jumps, keeping the palette cohesive.
Tight Button Typography: Buttons use line-height of 1.00 to keep labels compact and punchy.

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#918DF6)
Text Color: #FFFFFF
Padding: 0px 20px
Height: 44px
Font: Open Runde, {typography.button-md} (14px, weight 500, line-height 1.00)
Border Radius: {rounded.full} (9999px)
Border: None
Box Shadow: None
Letter Spacing: -0.28px
Hover State: opacity: 0.9
Active State: transform: translateY(1px)
Focus Visible State: box-shadow: 0 0 0 4px var(--background), 0 0 0 6px var(--purple-2); outline: 0px;

Secondary Button (Outline)

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.ink} (#181925)
Padding: 0px 10px
Height: 32px
Font: Geist, {typography.button-md} (14px, weight 500, line-height 1.43)
Border Radius: {rounded.lg} (10px)
Border: 1px solid {colors.hairline} (#E8E8E8)
Box Shadow: None
Letter Spacing: -0.32px
Hover State: opacity: 0.9
Focus Visible State: box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-ring) 50%, transparent); border-color: var(--sc-ring);

Outline Small Button

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.ink} (#181925)
Padding: 0px 10px
Height: 28px
Font: Geist, {typography.button-sm} (12.8px, weight 500, line-height 1.56)
Border Radius: {rounded.md} (8px)
Border: 1px solid {colors.hairline} (#E8E8E8)
Box Shadow: None
Hover State: opacity: 0.9

Ghost Button (Text)

Background: {colors.on-primary} (#222222)
Text Color: #F9F9F9 (light, near-white)
Padding: 0px 10px
Height: 32px
Font: Geist, {typography.button-md} (14px, weight 500, line-height 1.43)
Border Radius: {rounded.lg} (10px)
Border: 1px solid rgba(0, 0, 0, 0) (no visible border)
Box Shadow: None
Hover State: opacity: 0.9

Filled Light Button

Background: rgba(0, 0, 0, 0.03) (near-transparent dark)
Text Color: {colors.body} (#666666)
Padding: 0px 20px
Height: 44px
Font: Open Runde, {typography.button-md} (14px, weight 500, line-height 1.00)
Border Radius: {rounded.full} (9999px)
Border: None
Box Shadow: None
Hover State: opacity: 0.9

Cards & Containers

Default Card

Background: Transparent (inherited or canvas)
Text Color: {colors.ink} (#181925)
Padding: 0px
Border Radius: {rounded.none} (0px) — measured as sharp on primary card role
Border: None
Box Shadow: None
Font: Geist, {typography.body-sm} (14px, weight 400)
Hover State: color: var(--fg-3) (lighter text)
Focus Visible State: outline: 2px solid var(--purple-4); border-radius: 8px;

Small Card Container

Background: Transparent
Text Color: {colors.body} (#666666)
Padding: 0px
Border Radius: {rounded.none} (0px)
Border: None
Box Shadow: None
Font: Open Runde, {typography.body-md} (16px, weight 400, line-height 1.50)
Min Height: 164px

Card with Surface Background

Background: {colors.surface} (#F5F5F5)
Border Radius: {rounded.xl} (12px)
Box Shadow: oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px (hairline border via shadow)

Inputs & Forms

Text Input (Base)

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.ink} (#181925)
Border: 1px solid {colors.hairline} (#E8E8E8)
Border Radius: {rounded.md} (8px)
Padding: {spacing.md} (16px)
Font: Geist, {typography.label-sm} (14px, weight 400)
Focus Visible State: border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-ring) 50%, transparent);
Hover State: background-color: var(--muted); background-color: color-mix(in oklab, var(--muted) 50%, transparent);
Disabled State: opacity: 0.5; background-color: color-mix(in oklab, var(--input) 50%, transparent);

Form Label

Font: Geist, {typography.label-sm-strong} (14px, weight 500, line-height 1.00)
Text Color: {colors.ink} (#181925)
Letter Spacing: -0.32px

Navigation

Primary Navigation Bar

Background: {colors.on-primary} (#222222)
Text Color: {colors.neutral-1} (#9192A1)
Height: 52px
Padding: 0px 16px
Font: Open Runde, {typography.button-md} (14px, weight 500)
Border Radius: {rounded.lg} (24px) — pill-shaped on horizontal navigation
Box Shadow: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 1px
Link Hover State: color: var(--inverse-fg) (lighter text, typically white)
Active Link: Implied via brand colour or underline (exact state not extracted)

Navigation Link (White Background Variant)

Background: {colors.canvas} (#FFFFFF)
Text Color: {colors.on-primary} (#222222)
Padding: 0px 6px
Height: 32px
Font: Open Runde, {typography.button-md} (14px, weight 500)
Border Radius: {rounded.full} (9999px)
Box Shadow: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;

Badges

Filled Badge (Large)

Background: rgba(0, 0, 0, 0.3) (dark overlay)
Text Color: #FFFFFF
Padding: 0px 10px
Height: 30px
Font: MinecraftF (custom font), 22px, weight 400
Border Radius: {rounded.none} (0px)

Filled Badge (Small)

Background: rgba(0, 0, 0, 0.03) (near-white dark tint)
Text Color: rgba(0, 0, 0, 0.4) (dark grey)
Padding: 0px 8px
Height: 24px
Font: Open Runde, {typography.heading-xs} (14px, weight 500)
Border Radius: {rounded.sm} (6px)

5. Layout Principles

Spacing System

The system follows a base unit of 4px with an 8-step scale:

{spacing.xxs} = 4px — Minimal internal gutters, micro-spacing within components
{spacing.xs} = 8px — Tight element spacing, compact form fields
{spacing.sm} = 12px — Small section gaps, badge padding
{spacing.md} = 16px — Default padding inside cards and buttons; standard form field padding
{spacing.lg} = 20px — Moderate spacing; section padding on smaller viewports
{spacing.xl} = 24px — Larger gaps between major content blocks; footer spacing
{spacing.xxl} = 32px — Feature section separation
{spacing.xxxl} = 40px — Large feature block separation
{spacing.section} = 48px — Primary section vertical spacing
{spacing.band} = 64px — Major hero/band section vertical gaps

Usage Context:

Buttons use {spacing.md} (16px) horizontal padding.
Cards use {spacing.md} to {spacing.lg} internal padding.
Section vertical gaps use {spacing.section} (48px) to {spacing.band} (64px).
Navigation elements use {spacing.md} for internal layout.

Grid & Container

Max Content Width: 1024px at 1024px+ viewports (non-fluid at larger sizes; remains 1024px at 1280px and 1440px).
Section Padding (Horizontal): {spacing.lg} (20px) on most viewports; {spacing.md} (16px) on mobile (375px).
Column Strategy: Single-column on mobile (375px); 2-column grid on tablet and desktop.
Column Count: Measured as 1 column at 375px, 2 columns at 768px+. Multi-column layouts for blog posts and feature grids.

Whitespace Philosophy

The system prioritizes generous whitespace to prevent visual clutter. Spacing between sections is substantial ({spacing.section} / {spacing.band}), allowing content to breathe. Internal element spacing uses smaller increments ({spacing.sm} to {spacing.md}) to keep related items visually grouped. This creates a calm, purposeful visual rhythm that guides the eye without overwhelming it.

Border Radius Scale

{rounded.none} = 0px — Cards, images, hero sections; sharp, geometric feel
{rounded.xs} = 4px — Minimal rounding; subtle softness
{rounded.sm} = 6px — Small badges, compact containers
{rounded.md} = 8px — Form inputs, medium containers
{rounded.lg} = 10px — Outline buttons, secondary containers
{rounded.xl} = 12px — Primary card containers, major surfaces
{rounded.xxl} = 14px — Larger rounded surfaces
{rounded.r-18} = 18px — Specialized rounded containers
{rounded.full} = 9999px — Pills, full-width rounded buttons, navigation bars

Border Widths

Thin (1px) — Used on button outlines, input borders, and subtle card dividers (e.g., card box-shadow hairlines).

6. Depth & Elevation

The system employs a layered-micro elevation strategy: depth comes primarily from colour blocking (surface colour changes) rather than layered shadows. Where shadows exist, they are barely-perceptible, single-tier lifts using near-transparent blacks and oklab colour models.

Level	Treatment	Use
Flat (Base)	No shadow; colour blocking only	Canvas, body copy, flat cards
Hairline	`oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px`	Subtle card borders; visual separation without lift
Small (SM)	`rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 1px`	Navigation bars; buttons; minimal elevation
Medium (MD)	`rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px`	Buttons hover state; compact cards
Large (LG)	`oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px`	Card containers; explicit border via shadow
Extra Large (XL)	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`	Complex card elevation; stacked layers

Shadow Philosophy: Shadows are used sparingly and minimally. The oklab colour model preserves perceptual lightness while casting near-invisible depth cues. The system favours surface colour shifts over drop shadows, creating a modern, flat-forward aesthetic with minimal visual noise.

Opacity Levels

The system uses opacity for state and emphasis:

16% (0.16) — Minimal transparency; near-opaque disabled states
48% (0.48) — Medium opacity; secondary UI layers
50% (0.50) — Standard transparency; overlay or hover states
55% (0.55) — Mid-range opacity; subtle emphasis
60% (0.60) — Higher opacity; visible state change or overlay

Z-index / Layering

The system defines layering for stacked content:

Base (Z=1–5): Main content, cards, default layers
Dropdown (Z=99): Popovers, dropdowns, overlays above base content

Specific z-index values measured: 1, 2, 3, 4, 5 (base stack), 99 (dropdown/modal level).

7. Do's and Don'ts

Do

Use pill-shaped buttons ({rounded.full} — 9999px) for primary CTAs and interactive elements. The full border-radius is a core brand signature.
Apply negative letter-spacing on display text. Heading sizes (24px and above) should use tight tracking (-1.80px to -3px) to create impact and visual presence.
Layer colour, not shadows. Establish depth through surface colour shifts ({colors.canvas} to {colors.surface}) rather than heavy drop shadows.
Maintain generous section spacing. Use {spacing.section} (48px) and {spacing.band} (64px) between major content blocks to keep layouts breathing.
Bold headings with weight shifts, not size. Use weight (500, 600, 700) to create hierarchy within similar sizes rather than relying on dramatic size jumps.
Use the primary purple ({colors.primary} — #918DF6) for all CTAs, active states, and brand moments.
Ensure 1px hairline borders ({colors.hairline} — #E8E8E8) on secondary and outline components for subtle definition.
Set button heights to either 44px or 32px. Maintain consistency in button sizing; avoid intermediate heights.
Apply Open Runde for all body and heading copy. Reserve Geist for form labels and utility text only.

Don't

Avoid heavy drop shadows. Multi-layer box-shadows are rarely used; stick to single-tier, barely-perceptible elevations (SM, MD levels).
Don't round button corners less than 9999px for primary CTAs. Pill shapes are non-negotiable for brand recognition.
Avoid mid-grey text on white. Use {colors.ink} (#181925) for high contrast on body copy; {colors.body} (#666666) only for secondary text.
Don't use semantic colours for status states. The site declares no error/success/warning palette. Colour status changes via opacity or background tint only.
Avoid tight line-heights on body text. Body copy uses 1.40–1.50 line-height for legibility; never drop below 1.33.
Don't invent new radii. Only use values from the published scale ({rounded.xs} through {rounded.full}).
Avoid asymmetric padding on buttons. Horizontal padding should be {spacing.md} (16px) or {spacing.sm} (12px) consistently.
Don't use the Minecraft or specialty fonts outside of hero displays or badges. They are decorative only.
Avoid colour-blocking without clear semantic intent. Every surface colour should map to a role (canvas, surface, card, etc.).
Don't apply focus styles without a ring outline. Use 0 0 0 4px ring with brand purple for all focus-visible states.

8. Responsive Behavior

Breakpoints

Breakpoint	Width	Content Column	Grid Cols	Nav Links Visible	Primary Heading	Body Size	Section Padding X
Mobile	375px	343px	1	3 links	44px	16px	`{spacing.md}` (16px)
Tablet	768px	728px	2	3 links	60px	16px	`{spacing.lg}` (20px)
Desktop	1024px	984px	2	6 links	60px	16px	`{spacing.lg}` (20px)
HD / Large	1280px	1024px	2	6 links	60px	16px	`{spacing.lg}` (20px)
UHD / Ultra	1440px	1024px	2	6 links	60px	16px	`{spacing.lg}` (20px)

Key Breakpoint Transitions:

375px → 768px: Content column widens from 343px to 728px; grid changes from 1 to 2 columns; section padding increases from 16px to 20px; primary heading size increases from 44px to 60px.
768px → 1024px: Minor refinements; content column grows to 984px; nav links expand from 3 to 6 visible items; heading remains at 60px.
1024px → 1280px+: Content column caps at 1024px (no longer grows); layout stabilizes.

Touch Targets

Minimum Interactive Element Height: 44px (buttons, links, form fields)
Minimum Interactive Element Width: 44px (icon buttons, small controls)
Minimum Touch Padding: {spacing.md} (16px) around interactive elements to prevent accidental mis-taps
Recommended Link / Button Padding: 0px {spacing.md} (0px 16px) horizontal; 44px height vertical

Collapsing Strategy

Mobile (375px): Single-column layout; all grid-based content stacks vertically; full-width cards and sections; navigation collapses to icon-only or hamburger (if needed).
Tablet (768px): Two-column grid activated; section padding increases to {spacing.lg} (20px); card layouts remain 2-column or full-width stacked.
Desktop (1024px+): Content column caps at 1024px; 2-column grid maintained; heading size stabilizes at 60px; navigation shows all 6 links.
Typography Scaling: Display heading ({typography.display-md} — 60px) remains constant from 768px onward. Smaller displays (375px) use compressed 44px variant.

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Brand Purple ({colors.primary} — #918DF6)
Page Background: Canvas ({colors.canvas} — #FFFFFF)
Card / Surface Background: Surface ({colors.surface} — #F5F5F5)
Heading Text: Ink ({colors.ink} — #181925)
Body Text: Body ({colors.body} — #666666)
Secondary / Muted Text: Muted ({colors.muted} — #999999)
Dark Navigation Background: On Primary ({colors.on-primary} — #222222)
Subtle Borders: Hairline ({colors.hairline} — #E8E8E8)

Iteration Guide

All primary buttons use {rounded.full} (9999px pill shape) with {colors.primary} background and white text. No other button style should be pill-shaped; secondary buttons use {rounded.lg} (10px).
Display headings (60px+) must apply negative letter-spacing: -3.00px (60px), -1.80px (36px–48px). This is a core brand signature; never set letter-spacing to 0 or positive on large text.
Colour depth comes from surface swaps ({colors.canvas} → {colors.surface}), not shadows. Use rgba(0, 0, 0, 0.08) or oklab hairline shadows only for navigation and small cards; no drop shadows on hero or major content.
Buttons are either 44px or 32px tall; form fields are 40px (implied from 44px pattern). Padding is always {spacing.md} (16px) horizontal on 44px buttons; {spacing.sm} (12px) on 32px variants.
Open Runde is the default font for all body, heading, and button copy. Geist is for form labels and utility text only. Hero displays use Fraunces (display XXL) or Impact (display LG).
Focus-visible states always include a 4px ring of var(--purple-2) (brand purple derivative) with a background layer. Never use the browser default outline.
Navigation bars use {colors.on-primary} background (#222222) with {rounded.lg} (24px pill-shaped) border-radius and a SM-level shadow for subtle lift.
Hairline (1px) borders appear only on secondary buttons, input fields, and card dividers—always {colors.hairline} (#E8E8E8). Primary buttons have no border.
Spacing between major sections is {spacing.section} (48px) or {spacing.band} (64px) vertically. Internal element spacing (padding, gaps) uses {spacing.md} (16px) to {spacing.lg} (20px).
All opacity-based states (hover, disabled, overlay) use values from the extracted scale: 16%, 48%, 50%, 55%, 60%. Never invent intermediate opacity values.

10. Known Gaps

Semantic colour ramp (error/success/warning states) is not defined. The site's extracted markup shows no error, success, or warning colours. Status indication (if needed) must be implemented via opacity changes, text labels, or icon variants—not colour.
Interaction states on interactive elements are partially extracted but may be incomplete. Visited link states, active badge variants, and state-specific text colours were not observed across all component types. Implementers should refer to the "Interaction States" section above and extrapolate conservatively for unmeasured states.
Five decorative accent colours ({colors.accent-1} through {colors.accent-4}) lack measurable roles. These appear in hero gradients and promotional graphics but have no assigned semantic function. Use them only for decorative overlays and brand flourishes, never as functional indicators.
Dark mode / light mode variants are not defined. Only the light theme was extracted. The design system does not expose a production dark-mode palette or toggle strategy.
Advanced form states (validation messages, inline error indicators, success checkmarks) are not specified. Implement these via standard conventions or request explicit guidance.
Animation and transition timing is not documented. The extraction covers static styles only. Hover transforms (translateY(-1px), scale(1.08), translate(0px, -50%)) are recorded but without duration or easing values.
Surfaces behind authentication (logged-in dashboard, user account pages) were not visited during extraction. The design system reflects the public-facing site only.
Micro-interactions and component animation states (loading spinners, animated transitions, skeleton screens) are not covered.
Responsive image strategy is not specified. Images are measured at {rounded.none} (0px sharp corners) but breakpoint-specific image sizing and srcset patterns are not documented.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from fantasyvisuals.cc

Primary

#918DF6

Primary CTA, brand accent, active state

#8B70EC

Secondary accent / hero band

#33C758

Accent / decorative

#1E2846

Accent / decorative

#D6409F

Accent / decorative

#BED5FE

Accent / decorative

Neutral

#FFFFFF

Default page background

#F5F5F5

Card / panel background

#181925

Headings / primary text

#666666

Body copy

#999999

Captions, secondary text

#222222

Label colour on brand surfaces

#E8E8E8

1px borders and dividers

#9192A1

Neutral

Typography · Open Runde

body16px · 400 · 24px

h614px · 500 · 20px

body14px · 400 · 20px

body16px · 500 · 24px

body14px · 500 · 21px

button14px · 500 · 14px

h236px · 700 · 44px

heading20px · 500 · 28px

body14px · 400 · 14px

caption12px · 400 · 18px

h160px · 600 · 68px

h236px · 500 · 44px

h324px · 500 · 28px

h418px · 500 · 28px

nav-link14px · 500 · 14px

body18px · 500 · 24px

heading36px · 700 · 44px

body18px · 500 · 24px

button14px · 500 · 21px

display48px · 500 · 48px

h136px · 500 · 40px

h216px · 500 · 24px

button16px · 400 · 24px

list-item14px · 500 · 14px

h168px · 400 · 71.4px

list-item15px · 400 · 21.75px

body18px · 400 · 27.9px

Typography · Geist

body14px · 400 · 21px

link14px · 500 · 20px

label14px · 500 · 14px

input14px · 400 · 20px

heading16px · 500 · 16px

button12.8px · 500 · 20px

button12px · 500 · 12px

Typography · Inter

body13.5px · 400 · 20.25px

Typography · Geist Variable

link14px · 500 · 20px

body14px · 400 · 22.75px

body14px · 500 · 20px

Typography · Fraunces

hero-display178px · 640 · 167.32px

Typography · Impact

hero-display64.17px · 900 · 64.17px

Spacing

8px

16px

20px

4px

12px

32px

24px

64px

Elevation

rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 1px

rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px

oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.145 0 0 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px

Components · 6

Remixes of fantasyvisuals.cc

Latest remixes

No public remixes yet. Be the first to make one.

Remix it

DESIGN.md for fantasyvisuals.cc

Preview

Design System Inspired by Fantasy

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors (Decorative)

Neutral Scale

Borders & Hairlines

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button

Secondary Button (Outline)

Outline Small Button

Ghost Button (Text)

Filled Light Button

Cards & Containers

Default Card

Small Card Container

Card with Surface Background

Inputs & Forms

Text Input (Base)

Form Label

Navigation

Primary Navigation Bar

Navigation Link (White Background Variant)

Badges

Filled Badge (Large)

Filled Badge (Small)

Links

Default Link

Link in Light Context (Default LG)

5. Layout Principles

Spacing System

Grid & Container

Whitespace Philosophy

Border Radius Scale

Border Widths

6. Depth & Elevation

Opacity Levels

Z-index / Layering

7. Do's and Don'ts

Do

Don't

8. Responsive Behavior

Breakpoints

Touch Targets

Collapsing Strategy

9. Agent Prompt Guide

Quick Color Reference

Iteration Guide

10. Known Gaps

Remixes of fantasyvisuals.cc

Preview

Design System Inspired by Fantasy

1. Visual Theme & Atmosphere

2. Color Palette & Roles

Primary

Accent Colors (Decorative)

Neutral Scale

Borders & Hairlines

3. Typography Rules

Font Family

Hierarchy

Principles

4. Component Stylings

Buttons

Primary Button

Secondary Button (Outline)

Outline Small Button

Ghost Button (Text)

Filled Light Button

Cards & Containers

Default Card

Small Card Container

Card with Surface Background