GothUI

A LITTLE LIFE, BUILT IN

Quietly expressive.

Soft entrances, tactile surfaces, and useful states. Everything here is HTML and CSS, served from the same Go binary.

Entrances run when the page loads. Follow system always respects your device’s reduced-motion setting. Save a global preference on the Appearance page.

Surfaces with character.

A fine edge

Gradient border

A quiet accent around an opaque surface. Hover or focus the link for a slight lift.

Explore the workspace →

A softer canvas

Sample tasks complete
24
A metric with room to breathe.

A clear outline

Defined by color and space. No shadow required. Each surface follows your chosen theme.

Personalize your theme

A little depth, where it belongs.

Page shadows apply to cards and overlays. These four cards use individual overrides so you can compare each level. Borders keep their shape clear even without shadows.

Flat

A simple bordered surface for dense information.

Subtle

A small shadow for quiet separation from the page.

Raised

The familiar GothUI default, with room around its edges.

Floating

A layered shadow for a surface that needs more emphasis.

Elevation is visual only; it does not change stacking order or make a card interactive. Print and forced-color modes remove the shadows.

Every state deserves care.

While something loads

Preview placeholder — no request is running

The decoration settles after three gentle cycles. The label stays readable throughout.

Room for your next idea

Empty states can explain what belongs here and offer a useful next step.

Browse sample projects

Open with a little ease.

Ordinary-page confirmation →

These panels enter once per opening and close immediately. Switch motion off to compare. Native opener support depends on your browser.

Try the motion checks
  1. Apply a theme and watch the three card entrances.
  2. Turn motion off, replay, and check that content is immediately visible.
  3. Enable reduced motion in your operating system. Follow system should remain still.
  4. Tab to the gradient card’s link. Its focus ring must remain visible.
  5. Open and close both panels, then test at a narrow phone width.

A gentle entrance

A short rise and fade, with native focus and keyboard behavior.

All content remains available with motion disabled. Escape or Close dismisses this dialog.

A small detail

A subtle scale gives the panel a sense of arrival. Click outside or press Escape to dismiss it.