Design System

One visual language. Every surface.

The tokens and components behind valenciaservice.eu — and the same values for in-game NUI, so the HUD, Garage and every Valencia interface look like one product.

Colour

Dark, precise, one accent.

Read live from the stylesheet. Click a value to copy it.

Surfaces

Layered from the page canvas up to elevated panels.

canvas#030809
surface#060d10
panel#0a1418
elevated#0e1b20
night#04161a

Brand

Cyan carries focus, state and the brand. Used sparingly.

accent#00f8ff
accent-bright#6ffbff
accent-deep#00a3a8
accent-softrgb(0 248 255 / 0.1)

Text

Four steps of contrast. Body copy is muted, never pure white.

fg#f5f7fa
fg-muted#8fa3a8
fg-subtle#5b6d72
fg-inverse#001314

Lines

Hairlines separate, they do not decorate.

linergb(255 255 255 / 0.06)
line-strongrgb(255 255 255 / 0.1)
line-accentrgb(0 248 255 / 0.32)

Feedback

State colours with matching soft fills.

success#35c98b
success-softrgb(53 201 139 / 0.12)
warning#f2b84b
warning-softrgb(242 184 75 / 0.12)
danger#ff5263
danger-softrgb(255 82 99 / 0.12)

In-game HUD

The extended palette used by Valencia NUI interfaces.

hud#00f8ff
hud-mint#0ae9b8
hud-orange#ff842d
hud-red#ff2d31
hud-purple#a05cff
hud-green#79ff79
hud-crimson#cc1f3d
hud-amber#ffa85c

Typography

Geist for the product, Rajdhani for the game.

Tight headings, relaxed body copy, monospaced labels for data.

DisplayBuild Valencia.clamp 37–88px · 0.95
H1Premium systemsclamp 36–64px · 1.02
H2One ecosystemclamp 30–48px · 1.06
H3Server-authoritative22px · 1.25
LeadScoped, quoted and documented.17–20px · 1.6
BodyMoney, items and ownership are decided on the server.16px · 1.65
LabelExpected price11px mono · 0.12em
HUDVALENCIA RPRajdhani · in-game

Buttons

One interaction model.

Hover lifts, press settles to 0.98, focus shows the accent ring. Try them — and tab through them.

Status

States read at a glance.

Badges carry release state and feedback; live states breathe.

neutralaccentsuccesswarningdanger

AvailableEarly AccessPrivate BetaIn DevelopmentPlanned

Surfaces

Cards that respond, not decorate.

Interactive cards light up around the cursor. Static panels stay calm.

Interactive card

Spotlight follows the pointer; the edge nearest the cursor lights up.

Elevated panel

Inset top highlight
Soft drop shadow
No hover motion

Input

Focus shows the accent ring.

Select

Motion

Every movement has a reason.

Hover the tracks. Four durations, one curve family — and all of it stops for reduced motion.

fast160ms
base320ms
slow480ms
reveal700ms
cinematic1000ms

ease-out

cubic-bezier(0.16, 1, 0.3, 1)

ease-in-out

cubic-bezier(0.65, 0, 0.35, 1)

ease-snap

cubic-bezier(0.2, 0.9, 0.3, 1.15)

radius-xs4px

radius-sm6px

radius-md10px

radius-lg14px

radius-xl20px

FiveM NUI

Same tokens, in-game.

Paste into any Valencia NUI stylesheet. Generated from this page's source, so it always matches the website.

valencia-tokens.css

Copy into html/style.css

/* Valencia design tokens — generated from valenciaservice.eu/design-system */
:root {
  /* Surfaces */
  --valencia-canvas: #030809;
  --valencia-surface: #060d10;
  --valencia-panel: #0a1418;
  --valencia-elevated: #0e1b20;
  --valencia-night: #04161a;
  /* Brand */
  --valencia-accent: #00f8ff;
  --valencia-accent-bright: #6ffbff;
  --valencia-accent-deep: #00a3a8;
  --valencia-accent-soft: rgb(0 248 255 / 0.1);
  /* Text */
  --valencia-fg: #f5f7fa;
  --valencia-fg-muted: #8fa3a8;
  --valencia-fg-subtle: #5b6d72;
  --valencia-fg-inverse: #001314;
  /* Lines */
  --valencia-line: rgb(255 255 255 / 0.06);
  --valencia-line-strong: rgb(255 255 255 / 0.1);
  --valencia-line-accent: rgb(0 248 255 / 0.32);
  /* Feedback */
  --valencia-success: #35c98b;
  --valencia-success-soft: rgb(53 201 139 / 0.12);
  --valencia-warning: #f2b84b;
  --valencia-warning-soft: rgb(242 184 75 / 0.12);
  --valencia-danger: #ff5263;
  --valencia-danger-soft: rgb(255 82 99 / 0.12);
  /* In-game HUD */
  --valencia-hud: #00f8ff;
  --valencia-hud-mint: #0ae9b8;
  --valencia-hud-orange: #ff842d;
  --valencia-hud-red: #ff2d31;
  --valencia-hud-purple: #a05cff;
  --valencia-hud-green: #79ff79;
  --valencia-hud-crimson: #cc1f3d;
  --valencia-hud-amber: #ffa85c;
  /* Radius */
  --valencia-radius-xs: 4px;
  --valencia-radius-sm: 6px;
  --valencia-radius-md: 10px;
  --valencia-radius-lg: 14px;
  --valencia-radius-xl: 20px;
  /* Motion */
  --valencia-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --valencia-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --valencia-ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.15);
  --valencia-duration-fast: 160ms;
  --valencia-duration-base: 320ms;
  --valencia-duration-slow: 480ms;
  --valencia-duration-reveal: 700ms;
  --valencia-duration-cinematic: 1000ms;
  /* Type: Geist (UI), Geist Mono (data), Rajdhani (in-game HUD) */
}