Design foundations

Typography & Colors

FG UI uses self-hosted Manrope by default and a complete token palette for brand, neutral, semantic, surface and action colors. This page shows the system directly from the stable 1.1.0 tokens.

Built entirely with FG UI.

Every layout, component, interaction, icon and interface pattern on this website is powered by FG UI itself. No Bootstrap, Tailwind or external UI framework is used.

Typography

Manrope, locally hosted.

The stable package includes the variable Manrope font from weight 200 through 800, with six local WOFF2 subsets and system-font fallbacks.

No Google Fonts required

Heading 1

Build better interfaces.

Heading 2

One consistent UI system.

Heading 3

Ready for real products.

Lead

Clear, readable text with comfortable line height for introductions and important supporting copy.

Body

FG UI keeps typography consistent across websites, applications, admin screens and product interfaces.

Eyebrow

Section label

Variable font weights

200 through 800

The same local variable font file family supplies the full supported weight range.

200 Extra Light

ForGoodTools Interface System

300 Light

ForGoodTools Interface System

400 Regular

ForGoodTools Interface System

500 Medium

ForGoodTools Interface System

600 Semi Bold

ForGoodTools Interface System

700 Bold

ForGoodTools Interface System

800 Extra Bold

ForGoodTools Interface System

font-family: var(--fgui-font);

Make it yours

Change FG UI to match your brand with one variable.

You do not need to edit FG UI's component CSS. Load fgui.css, then override a design token afterwards. Every component that uses that token updates with it.

No component rewrites

Default

FG UI blue

These are real example controls: “Save changes” triggers a toast and “Email updates” is a selectable chip. Only the brand colour changes.

--fgui-primary: #0F79CC;

Your brand

The same components in purple

These are real example controls: “Save changes” triggers a toast and “Email updates” is a selectable chip. Only the brand colour changes.

--fgui-primary: #790fcc;

The simplest change

Add this after the FG UI stylesheet. This changes the main primary colour used by buttons, active states and many highlights.

Your CSSOne line

.fgui {
  --fgui-primary: #790fcc;
}

For a complete brand colour family

Set the related states as well so hover, active, soft backgrounds and borders all match your chosen colour.

Your CSSRecommended

.fgui {
  --fgui-primary: #790fcc;
  --fgui-primary-hover: #680db0;
  --fgui-primary-active: #570b94;
  --fgui-primary-soft: #f5eafd;
  --fgui-primary-border: #d9b8ef;
}

Keep the FG UI core untouched.

Put your overrides in your own stylesheet, or in a style block loaded after fgui.css. That way you can update FG UI later without losing your brand colours.

Brand palette

FG blue.

The primary brand family is built around #0F79CC.

--fgui-blue-50

#f4faff

--fgui-blue-100

#eaf6ff

--fgui-blue-200

#cfeaff

--fgui-blue-300

#9dd6fb

--fgui-blue-400

#5db9f5

--fgui-blue-500

#0F79CC

--fgui-blue-600

#0D6DB8

--fgui-blue-700

#0B61A5

--fgui-blue-800

#115785

--fgui-blue-900

#14496d

Neutral palette

Slate.

Neutral tokens handle text, borders, backgrounds, surfaces and dark UI areas.

--fgui-slate-0

#ffffff

--fgui-slate-25

#fcfdff

--fgui-slate-50

#f7f9fb

--fgui-slate-75

#f3f6f9

--fgui-slate-100

#edf2f6

--fgui-slate-150

#e7edf2

--fgui-slate-200

#dce5ec

--fgui-slate-300

#c8d5df

--fgui-slate-400

#91a3b1

--fgui-slate-500

#6f8392

--fgui-slate-550

#607583

--fgui-slate-600

#526978

--fgui-slate-700

#344c5d

--fgui-slate-800

#233b4b

--fgui-slate-900

#172b3a

--fgui-slate-950

#102330

Semantic palette

Success, warning, danger and information states.

Each state has supporting ink, soft-background and border tokens where applicable.

--fgui-success

#19eea5

--fgui-success-ink

#07573d

--fgui-success-soft

#eafff7

--fgui-success-border

#9df5d6

--fgui-warning

#ffcd19

--fgui-warning-ink

#6b5100

--fgui-warning-soft

#fff9df

--fgui-warning-border

#ffe47a

--fgui-danger

#ff4352

--fgui-danger-ink

#9d1f2a

--fgui-danger-soft

#fff0f2

--fgui-danger-border

#ffb4bb

--fgui-info

#1675b7

--fgui-info-soft

#eef8ff

--fgui-info-border

#c8e5f8

System aliases

Use meaning, not random hex values.

Semantic aliases let components refer to roles such as primary, surface, text and action instead of hard-coding color values throughout a project.

--fgui-text

var(--fgui-slate-700) → #344c5d

--fgui-text-strong

var(--fgui-slate-900) → #172b3a

--fgui-text-soft

var(--fgui-slate-600) → #526978

--fgui-muted

var(--fgui-slate-550) → #607583

--fgui-page

#f5f8fb

--fgui-surface

#ffffff

--fgui-surface-soft

#f9fbfd

--fgui-surface-inset

#f1f6fa

--fgui-surface-raised

var(--fgui-surface) → #ffffff

--fgui-surface-overlay

var(--fgui-surface) → #ffffff

--fgui-surface-selected

var(--fgui-blue-100) → #eaf6ff

--fgui-control-bg

var(--fgui-surface) → #ffffff

--fgui-control-bg-hover

var(--fgui-surface-soft) → #f9fbfd

--fgui-text-inverse

#ffffff

--fgui-text-on-accent

#ffffff

--fgui-static-white

#ffffff

--fgui-overlay-backdrop

rgba(16,35,48,.46)

--fgui-border

var(--fgui-slate-200) → #dce5ec

--fgui-border-strong

var(--fgui-slate-300) → #c8d5df

--fgui-brand

var(--fgui-blue-500) → #0F79CC

--fgui-brand-hover

var(--fgui-blue-600) → #0D6DB8

--fgui-brand-active

var(--fgui-blue-700) → #0B61A5

--fgui-accent

var(--fgui-brand) → #0F79CC

--fgui-accent-hover

var(--fgui-brand-hover) → #0D6DB8

--fgui-accent-active

var(--fgui-brand-active) → #0B61A5

--fgui-accent-soft

var(--fgui-blue-100) → #eaf6ff

--fgui-accent-border

var(--fgui-blue-200) → #cfeaff

--fgui-primary

var(--fgui-accent) → #0F79CC

--fgui-primary-hover

var(--fgui-accent-hover) → #0D6DB8

--fgui-primary-active

var(--fgui-accent-active) → #0B61A5

--fgui-primary-soft

var(--fgui-accent-soft) → #eaf6ff

--fgui-primary-border

var(--fgui-accent-border) → #cfeaff

--fgui-action

var(--fgui-primary) → #0F79CC

--fgui-action-hover

var(--fgui-primary-hover) → #0D6DB8

--fgui-action-active

var(--fgui-primary-active) → #0B61A5

--fgui-action-soft

var(--fgui-primary-soft) → #eaf6ff

--fgui-action-border

var(--fgui-blue-300) → #9dd6fb

One foundation

The same type and color system runs through every FG UI component.

That is what lets Basic components and Combined patterns feel like parts of the same product.

See it in components