OGE logoOGE

Theme builder

Start from a built-in theme, change the key tokens and watch real OGE components follow. The builder checks text contrast as you go and exports plain CSS custom properties — no build step, no theme API. Every token it writes is in the token reference.

live preview WCAG contrast CSS + JSON export

Tokens

Start from
Selection, focus, primary actions, links
Component surfaces: grid body, fields, cards
Headers, toolbars, filled fields
Body text in every component
Secondary text, idle outlines, hints
Hairline frames and dividers
Success buttons, toasts and badges
Warning buttons, toasts and badges
Danger buttons, errors, validation
Density

Preview

Order
Customer
Status
Total
1041
Northwind Traders
Shipped
1280
1042
Contoso Ltd
Pending
432.5
1043
Fabrikam Inc
Delivered
2210
1044
Tailspin Toys
Cancelled
98
1045
Adventure Works
Shipped
760.25

Contrast

Every checked pair meets WCAG AA.

  • Text on background15.55:1AA
  • Text on surface15.01:1AA
  • Muted text on background5.38:1AA
  • Accent text and links on background5.17:1AA
  • Button text on accent5.17:1AA
  • Text on success fill5.02:1AA
  • Text on warning fill5.02:1AA
  • Text on danger fill4.83:1AA

Export

/* OGE UI theme "my-theme" — https://www.ogeui.com/getting-started/theme-builder */
:root {
}

Load the file after the OGE stylesheets. The :root export is self-contained — start from Dark and it needs no dark.css. The scoped export re-declares the derived tints, so it themes any subtree it is applied to: 

/* styles.css — load the exported file after the OGE stylesheets
   (and after a bridge or dark theme, if you start from one) */
@import './my-theme.css';
<!-- the scoped variant applies wherever the attribute is set:
     the whole app, or one region of it -->
<html data-oge-theme="my-theme">
<section data-oge-theme="my-theme">…</section>