Bevel Desktop
Grey panels with raised and sunken bevels — light comes from the top left, always.
Construction · Hard bevel
Depth is drawn, not blurred: one light line on the top and left, one dark line on the bottom and right, and a light source that never moves.
Every style renders this same screen, so the only thing changing between two of them is the style. The component above is the file below, running.
Prompt
Design this interface in the Bevel Desktop style. Every panel is grey with a two-tone bevel: light on the top and left, dark on the bottom and right. Corners are square and the light source never moves. Build every
The numbers in this prompt are printed from the tokens below, so it cannot drift from what the specimen renders.
What carries the look
- two-tone bevels
- fixed top-left light source
- square corners
- system grey panels
What this style refuses
- rounded corners
- soft blurred shadows
- flat borderless surfaces
- modern accent colors
The refusals are the half that keeps generated interfaces from converging — a prompt that only says what to add gets the default look.
Tokens
Palette
#c8c8c0#2b2b28#d7d7d0#38352d#87877f#6a6a62#0d0d0b#f0f0e8#4a4a44#a8a89e#000080#8fa8ff#ffffff#050538Shape and type
Measured contrast — body 11.56:1 light, 12.4:1 dark; secondary text 5.3:1 and 5.92:1. Every pair clears WCAG AA in both themes, checked on each build.
Specimen · Specimen.tsx
import type { CSSProperties } from "react";
/**
* Vibary · Bevel Desktop
*
* Grey panels with raised and sunken bevels — light comes from the top left, always.
*
* One complete product screen, rendered from the token object below —