jarvisluk.github.io
Interactive web style visualization tool: choose a design style, switch site UI live, fine‑tune parameters, and export CSS.
First seen 2026-11-05 · Last seen 2026-11-05 · Source: webmcp.com
Answer 4 · Act 4 · Transact 0 · Score: Not yet scored
Tool inspector
set_variables
Override CSS variables on top of the current style to create a custom look. Only listed variables change. Colors: hex/rgb()/hsl()/oklch(); sizes need units (px, em, rem, %). Invalid values are rejected and reported.
Page: /Web_Style_Visualization/
Input schema
| Property | Type | Required | Description |
|---|---|---|---|
variables |
object | yes | — |
Raw JSON schema
{
"type": "object",
"properties": {
"variables": {
"type": "object",
"properties": {
"--color-primary": {
"type": "string",
"description": "Primary brand color (buttons, links, highlights) (color)"
},
"--color-primary-hover": {
"type": "string",
"description": "Hover state for primary color (color)"
},
"--color-bg": {
"type": "string",
"description": "Page background color (color)"
},
"--color-surface": {
"type": "string",
"description": "Card / panel surface color (color)"
},
"--color-text": {
"type": "string",
"description": "Primary text color (color)"
},
"--color-text-secondary": {
"type": "string",
"description": "Secondary / muted text color (color)"
},
"--color-accent": {
"type": "string",
"description": "Accent color for badges, alerts, highlights (color)"
},
"--color-border": {
"type": "string",
"description": "Default border color (color)"
},
"--border-radius": {
"type": "string",
"description": "Corner radius (e.g. 8px, 16px) (size)"
},
"--border-width": {
"type": "string",
"description": "Border thickness (e.g. 1px, 2px) (size)"
},
"--border-color": {
"type": "string",
"description": "Explicit border color override (color)"
},
"--shadow-x": {
"type": "string",
"description": "Box-shadow horizontal offset (size)"
},
"--shadow-y": {
"type": "string",
"description": "Box-shadow vertical offset (size)"
},
"--shadow-blur": {
"type": "string",
"description": "Box-shadow blur radius (size)"
},
"--shadow-spread": {
"type": "string",
"description": "Box-shadow spread radius (size)"
},
"--shadow-color": {
"type": "string",
"description": "Box-shadow color (color)"
},
"--font-family": {
"type": "string",
"description": "Font stack (e.g. 'Inter', sans-serif) (font)"
},
"--font-weight": {
"type": "string",
"description": "Normal font weight (100–900) (number)"
},
"--font-weight-bold": {
"type": "string",
"description": "Bold font weight (100–900) (number)"
},
"--font-size-base": {
"type": "string",
"description": "Base font size (size)"
},
"--font-size-sm": {
"type": "string",
"description": "Small font size (size)"
},
"--font-size-lg": {
"type": "string",
"description": "Large font size (size)"
},
"--font-size-xl": {
"type": "string",
"description": "Extra-large font size (size)"
},
"--font-size-xxl": {
"type": "string",
"description": "2x extra-large font size (size)"
},
"--line-height": {
"type": "string",
"description": "Line height multiplier (number)"
},
"--backdrop-blur": {
"type": "string",
"description": "Backdrop blur amount (e.g. 12px) (size)"
},
"--bg-opacity": {
"type": "string",
"description": "Surface opacity (0–1); below 1 reveals the ambient backdrop (number)"
},
"--glow-intensity": {
"type": "string",
"description": "Glow / neon intensity (0–1) (number)"
},
"--glow-color": {
"type": "string",
"description": "Glow / neon color (color)"
}
},
"additionalProperties": false
}
},
"required": [
"variables"
]
}
Similar websites
morphus.myles4miles.chatgpt.site
Morphus is an AI-native workspace for designing worlds and generating playable game experiences.
damnpdfs.com
Install the DamnPDFs Codex plugin, pair a browser workspace and use PDF, image and file tools from your coding agent. Includes setup and privacy limits.
insignifi4nt.github.io
broCAD/M: local-first CAD and CAM for parametric design, wire EDM planning, simulation and controller export.
cabinet.varera.studio
The Cartographer's Cabinet