Design system

Every EndCore interface, from the HUD to character select to the inventory, renders from one stylesheet and one small JavaScript runtime served by en-ui. Follow the rules on this page and your resource will look like it shipped with the framework.

This page covers the look and the rules. For the building blocks, see CSS tokens and components, NUI runtime and Icons.

#Using it

Load the stylesheet before your own, and the runtime before your own script:

<link rel="stylesheet" href="https://cfx-nui-en-ui/ui/encore.css">
<link rel="stylesheet" href="style.css">   <!-- layout only -->

<script src="https://cfx-nui-en-ui/ui/encore.js"></script>
<script src="app.js"></script>

-- fxmanifest.lua
dependencies { 'en-ui' }

cfx-nui-<resource> serves any file listed in that resource's files {}, which is how assets cross resource boundaries in NUI. en-ui lists both files. It has no dependencies of its own, so any resource can depend on it.

#The rule

Your resource's style.css contains layout only. No colours, no typefaces, no easing curves, no durations. If a value you need is missing, add it to encore.css instead of defining it locally.

This is what keeps a hunger bar the same colour in the HUD, character select and the consumables menu, and what lets the whole framework change its look in one place.

#Art direction: Field Equipment

Interfaces read as scavenged military hardware: warm near-black housings, hairline rules, stencil labels and amber phosphor readouts. Nothing is glossy, nothing is rounded, nothing bounces.

The game is always behind the interface. Panels are translucent and the palette stays desaturated, so the world reads as continuous rather than covered.

One piece of geometry repeats everywhere: the clipped top-left corner on buttons. It is what ties a button to a panel to a badge. Toggles are rectangular sliding blocks, not pills, and panels take corner brackets like a targeting reticle.

#Type

FiveM runs on Windows, so EndCore uses faces that ship with the operating system. There are no font downloads, no flash of unstyled text, and no content security policy problems.

Letter-spacing does most of the typographic work:

#Colour

There is one signal colour, amber (#d9a441), plus oxide red (#b33a2b) for danger. That is all the colour the chrome gets.

Survival stats have fixed hues, so a stat is the same colour everywhere it appears:

Use .enc-bar--hunger and the other stat modifiers instead of colouring a bar by hand. See Gauges.

#Fullscreen menus and persistent overlays

Menus the player opens and overlays that stay on screen during play follow different rules:

#Motion

Everything decelerates and nothing overshoots.

Any set of things that appears together (a roster, an inventory grid, a quest list) should cascade in with .enc-stagger and Encore.stagger(nodes). The cascade is what makes an interface feel authored rather than dumped on screen.

prefers-reduced-motion is honoured globally: animations and transitions collapse to almost nothing, and the grain and haze stop drifting. Motion is decoration, never information, so nothing breaks when it is off.

#Texture

Encore.mountTexture() injects the texture layers once, so you never repeat the markup:

NUI pages stay mounted over the game after their menu closes. If the texture stays visible, players see the world through grain and scanlines. So:

1. Mount the texture hidden: Encore.mountTexture({ visible: false }).
2. Call Encore.showTexture(true) when your menu opens.
3. Call Encore.showTexture(false) when it closes.

Encore.mountTexture({ visible: false });

Encore.onMessage({
    open: () => { root.hidden = false; Encore.showTexture(true); },
    close: () => { root.hidden = true; Encore.showTexture(false); },
});

Persistent overlays never mount texture.

#Security: player-authored strings

Character names, chat messages, item labels, group names and placed content are written by players. If you insert them as HTML, one player can inject markup into another player's interface.

// Safe: the label is inserted as text
row.appendChild(Encore.el('span', 'enc-label', item.label));

// Unsafe: never do this with anything from the server
row.innerHTML = `<span class="enc-label">${item.label}</span>`;

The en-ui services (notifications, prompts, progress bars, dialogs and NPC conversations) already insert text safely.

#Shared services

Don't rebuild notifications, progress bars, input dialogs or prompts in your own page. en-ui renders them for every resource. Call them from Lua through the library: encore.notify, encore.progress, encore.inputDialog, encore.showPrompt and encore.hidePrompt. Don't message en-ui's page directly. See UI services.

If your resource needs a component that doesn't exist yet, add it to en-ui as a service rather than building a one-off.

#Checklist before shipping

• style.css defines no colours, fonts, easing or durations.
• Numbers use .enc-num, or --enc-font-mono with tabular figures.
• Lists and grids cascade in with .enc-stagger and Encore.stagger.
• Every player-authored string goes through Encore.el().
• Modals use Encore.trapFocus.
• Fullscreen menus mount texture hidden and call Encore.showTexture(false) on close.
• The layout holds at both 1280×720 and 2560×1440.
• The interface leaves the centre-right of the screen clear when a ped or the world must be seen.

#Related

• CSS tokens and components
• NUI runtime
• Icons
• UI services