ZeroFy

Demo Site 2 — Futuristic

Built for what comes next.

Futuristic design leans into depth and light. A deep field, luminous edges and electric accents make an interface feel like it is running slightly ahead of you.

  • Deep grid
  • Neon glow
  • Gradients
  • Motion ready
  • Light and dark
Start your project See the next demo

What this theme does

Four habits that turn a flat page into something that looks engineered.

Depth

Layered shadows and glowing outlines push surfaces apart, so panels read as floating panels rather than flat blocks.

Signal

Cool cyan and violet accents mark anything interactive, so the eye always knows where the action lives.

Grid

A faint technical grid sits behind the content, giving the page structure without adding noise.

Motion

Transitions run on a single 200ms curve, so nothing on the page ever feels laggy or restless.

The theme in numbers

A futuristic page lives or dies on its tokens, so these are the four that matter.

  • 56px Grid pitch

    A technical grid masks itself behind the hero, then stops.

  • 2 Signal colours

    Blue for action, violet for depth, cyan for the glow.

  • 0.2s Motion curve

    One duration and one easing on every transition.

  • 18px Largest radius

    Soft enough to feel machined, sharp enough to look precise.

Typography and spacing

The same specimen as the other demos, rendered in the futuristic palette so you can compare the two side by side.

  • Display 68px

    Gradient type

  • Heading 36px

    Clear at any distance

  • Title 22px

    Cards and panel heads

  • Body 17px

    Set on a wide measure, colour kept cool but readable.

  • Caption 13px

    Labels, tags and metadata

Display
Inter 800 clipped to a 120 degree gradient, text set transparent.
Body
Inter 400 at 17px on 1.6, tinted toward the blue of the canvas.
Grid
56px squares with a radial mask, faded out before the content starts.
Radii
10px small, 18px medium, 28px large. Nothing fully round.
Borders
1px cool blue, reinforced by a 1px ring in the card shadow.
Shadows
A wide 0 20px 60px drop, tinted with the accent at 12 percent.
Glow
A separate --glow token, so the neon edge is dialled independently.
Halo
A radial wash in the top left of the body. One per page.
Motion
200ms cubic-bezier(0.2, 0.7, 0.3, 1) on transform and shadow.
Focus
A 2px accent ring with a soft halo, never the browser default.
Files
3 HTML, 2 CSS, 2 JS. No animation library.

What you get in the box

Six decisions already made, so your content lands in a frame that already works.

  • Split palettes

    Light is an icy blue-white with an electric gradient. Dark is space blue-black with neon cyan, so the glow reads brighter at night.

  • Glow as a token

    The neon edge lives in --glow and the halo in --halo, so you can dial both back without hunting through the stylesheet.

  • Real depth

    Cards carry a 1px ring plus a wide accent-tinted shadow, which is what separates a panel from the canvas at a glance.

  • Motion discipline

    One duration and one curve across the page, so animation supports the content instead of competing with it.

  • Keyboard support

    Focus states carry the same accent glow, so keyboard users get the same signal as everyone else.

  • Reduced motion

    The system preference removes the lift, the slide and the arrow movement in a single media query.

How a build with this theme goes

Four steps. The tuning pass at the end is the one that decides whether the result looks premium or noisy.

  1. 1

    Map the depth

    We decide which surfaces float and which sit flat, then write the shadow tokens for exactly those levels.

  2. 2

    Light it

    One accent, one glow, one halo. If a second glow is needed, the palette is wrong rather than the spacing.

  3. 3

    Mark the signal

    Interactive elements get the accent colour. Static content never does, so the two are never confused.

  4. 4

    Tune on device

    We check the glow on a cheap phone screen in daylight, because that is where a halo usually falls apart.

Is this the right theme for you?

Glow is fun and it is not for everyone. Here is the honest split.

Use it when

  • Developer tools, infrastructure and anything that ships fast.
  • Hardware, gadgets and launch-day product pages.
  • Gaming, esports and streaming brands with a built-in audience.
  • Start-ups that want a technical edge without a cold design.

Skip it when

  • Legal, medical and government services, where flash reads as unreliable.
  • Long-form reading, where a glowing page is tiring after a screen.
  • Children and early education, where low contrast fails badly.
  • Print-led brands that have to survive being photocopied.

Questions people ask

The practical worries that come up before a theme with this much light goes live.

Does the glow work on slow phones?

Yes. The only expensive property is a blur-free shadow and a transform, both handled by the compositor. The grid behind the hero is a masked background image rather than dozens of nodes, so the page stays light on a mid-range Android.

Is the dark mode really dark?

It is #04070f, a blue-black rather than a neutral one, with neon cyan reserved for the edges. Pure black with neon usually vibrates; a blue-black gives the same energy without the shimmer.

Can I use a photograph behind the text?

Yes, with a gradient scrim between the image and the words. The hero already reserves a radial halo in the top left, which is where a photo usually goes, so place the image inside that halo rather than across the whole section.

How do I tone down the animation?

Shorten the transition or set it to none. The lift on cards and the arrow on the gallery tiles read most strongly, so they are the first two to cut.

Does it need a framework?

No. The grid is one background image, the cards are grid layout, and the switcher is a few lines of script. It ships as static files on any host.

What about accessibility?

The glow is decoration. Every text and button pair was checked against WCAG AA in both modes, the focus ring is always visible, and the mode is announced to screen readers through the button state rather than through colour alone.

The grid behind the hero sold the product before anyone read a word. We only had to explain it afterwards.

Placeholder testimonial for this demo — swap in a real client quote before launch.

Live colour palette

Ten tokens, two palettes, from icy blue-white to space blue-black. The chips are painted with the same custom properties the page uses and the code under each one is read live, so the switch in the header updates both together.

  • Background --bg
  • Surface --surface
  • Surface tint --surface-strong
  • Primary --primary
  • Primary soft --primary-soft
  • Secondary --secondary
  • Accent --accent
  • Text --text
  • Muted --muted
  • Border --border

Light mode is an icy blue-white canvas with an electric blue gradient. Dark mode drops to space blue-black with neon cyan edges, so the glow reads brighter after sunset. The value under each chip is read live from the computed style.

Try the other themes

Seven other personalities to compare against, with your colour mode carried across.

Want a sharper edge to your product?

Send a screenshot of what you have now and a link to something you admire. We will come back with the three tokens that would move the needle fastest.

Start your project Read about ZeroFy

Replies within one working day. No newsletter and no follow-up calls.