Foundations
Panels over the world
A game draws its menus over the city: translucent panels with soft corners, lit along the top, the world blurred behind them. The surfaces here do the same.
Corners
--radius: 0.5rem, and a scale around it. Small things get small corners; a window gets the largest. Pills only for what slides or blinks.rounded-sm4px · Badges, chips
rounded-md6px · Buttons, fields, tiles
rounded-lg8px · Menus, popovers, cards
rounded-xl12px · Panels, dialogs
rounded-full∞ · Toggles, dots, avatars
Panel and glass
.panel is the menu surface: a cool dark at 82%, a blur and a lift of saturation from what is behind, a hairline frame, a light along the top edge. .glass is lighter, for pills over footage. In the FiveM NUI both turn solid — toggle NUI in the toolbar..panel
Envanter
Menus, sheets, cards.
.glass
Los Santos
Pills and chips over footage.
Selection
The focused thing gets
select-frame: a white frame, and the accent rising from its foot — the way GTA VI marks the slot under the stick. It pops on arrival.Textures
Background images, so they sit over any background colour. Faint by design: they should be felt, not seen.
tex-scanlines
A screen in the world: phones, monitors, TV.
tex-grain
Film grain over a flat panel.
tex-hatch
A button’s or a bar’s base on a busy surface.
bg-grid
The web site’s backdrop texture.
bg-dots
A fine matrix behind a hero.
Corner ticks
The brand’s frame for a heading:
CornerTicks in a positioned parent, or Bracketed around a title. Sized by --tick-size, so the NUI scales them.Şehirler açık
Öne çıkan
<section className="panel p-6">…</section>
<button className="select-frame">…</button>
<div className="tex-scanlines">…</div>No square corners, no 20px either
v1 was square, and next to real game menus it read as a web page. Aboverounded-xl things turn into bubbles — the other way to stop looking like a game.