ZeroFy

Demo Site 7 — Maximalism

Everything, all at once.

Maximalism refuses the empty space. Colour on colour, shadow behind shadow, a gradient that runs three ways at once, and no gap left unfilled. It is the opposite of the quiet themes here, and it is a legitimate choice when the work is the point.

  • Dense colour
  • Stacked shadows
  • Diagonal ground
  • Big radii
  • Light and dark
Start your project See the next demo

What this theme does

Four habits that keep an extremely dense page from becoming unreadable.

Stack, do not replace

Each panel carries a shadow and a second shadow behind it, so depth accumulates across the page instead of resetting.

Colour as structure

Three saturated colours on a deep violet ground, used to separate sections rather than to decorate them.

Fill the gaps

Tighter spacing and a diagonal ground behind the hero leave almost no empty surface, which is the whole idea.

Still one scale

Five type sizes, the same as every other theme here, so the density comes from colour and shadow rather than from chaos in the type.

The theme in numbers

The measurements behind a page that looks like it has none.

  • 2 Shadow layers

    A pink offset and a teal offset behind it, on every panel.

  • 3 Saturated colours

    Yellow, pink and teal, on a deep violet ground.

  • 26px Largest radius

    The corner treatment scales up with the rest of the page.

  • 320px Narrowest layout

    Fluid rules hold all the way down to 320px.

Typography and spacing

One heavy sans at four weights, set tight with a double offset shadow. The specimen on the left uses the same tokens as the page.

  • Display 68px

    Louder still

  • Heading 36px

    Loud with a straight face

  • Title 22px

    Loud, briefly

  • Body 17px

    The reading size, which never changes no matter how busy the page around it gets.

  • Caption 13px

    Labels, notes and metadata

Display
Inter 800, -0.05em tracking, double offset shadow.
Body
Inter 400 at 17px on a 1.6 line height.
Scale
68 / 36 / 22 / 17 / 13 px, five sizes and no more.
Spacing
Tightened one step from the shared rhythm, on purpose.
Measure
58ch for ledes, 64ch for running text.
Grid
12 columns, 1200px maximum, 24px gutter.
Corners
6px to 26px, scaling with the size of the block.
Borders
A 2px rule in the yellow accent, never a neutral grey.
Shadows
Two stacked hard offsets, no blur.
Motion
150ms on transform and colour only.
Icons
1.05rem, 1.8px outline stroke, no fills.
Files
3 HTML, 2 CSS, 2 JS. No build step, no framework.

What you get in the box

Six things that are already solved, so the work that remains is your own content.

  • Design tokens

    Every colour, radius and shadow is a CSS variable, so the light and dark palettes live in a single block of overrides.

  • Semantic markup

    Landmarks, one h1, ordered headings and real lists, so assistive technology reads the page in the order you wrote it.

  • Keyboard support

    Every control is reachable with Tab and shows a visible 2px focus ring that is never removed.

  • Responsive by default

    Fluid type and grid rules hold from 320px. Breakpoints only handle the navigation and the mode switcher.

  • Reduced motion

    When the operating system asks for less movement, every transition on the page collapses to nothing.

  • No dependencies

    No framework and no bundler. Open the file in a browser and it runs.

How a build with this theme goes

Four steps, usually two or three days for a small business site from brief to handover.

  1. 1

    Agree on the volume

    We confirm that a dense page is the goal and not an accident, because it is hard to dial back once a client has seen it.

  2. 2

    Pick three colours

    Yellow, pink and teal on violet, with every fourth colour refused, which is what keeps the density from turning to mud.

  3. 3

    Layer the depth

    Two stacked offsets on every panel and a diagonal ground behind the hero, so nothing on the page sits flat.

  4. 4

    Prove it

    We check contrast, keyboard order and a 320px viewport before the theme goes anywhere near production.

Is this the right theme for you?

Maximalism is a deliberate excess, so it is worth being honest about where it works and where it will fight you.

Use it when

  • Studios, agencies and makers whose work is the product and should fill the frame.
  • Events, festivals and community projects with a real visual identity to run.
  • Portfolio pages where the visitor arrived to look, not to decide quickly.
  • Brands whose competitors all look the same and would rather not.

Skip it when

  • Dashboards, admin panels and anything where a user has to find a control quickly.
  • Medical, legal or financial services, where density reads as pressure.
  • Long articles and reference material, where the eye needs somewhere to rest.
  • Buyers comparing on price alone, who tend to read loud as risky.

Questions people ask

The things clients usually want to know before committing to an extremely dense page.

Can I copy this demo as a starting point?

Yes. The eight demos share css/styles.css and css/demo-themes.css. Each theme is one token block plus one character block, so copying a page and its theme gives you a working site with no wiring to redo.

How do you stop dense becoming unreadable?

With the type scale. The page uses the same five sizes as every other theme here, and the reading size is never changed to make room for more colour or more shadow.

Is it still accessible?

The light palette is checked token by token against the 4.5:1 ratio WCAG asks for, and dark mode is checked the same way. Focus rings are never suppressed, the FAQ uses real disclosure widgets, and every list on the page is a real list.

Does the dark mode hold up?

Both modes are dark-on-colour by design here, because that is the theme. The only real difference is depth, and the accents are lifted in the darker mode so they still read against the ground.

What fonts can I swap in?

Anything with a similar range of weights. The theme uses --display-font and --body-font, so you can point both at one family or run a second family for headings without touching the markup.

Can I tone it down later?

Yes, and it is easier than adding density back. Each layer is a separate declaration, so you can drop the second shadow, then the diagonal ground, then tighten the palette, without touching the layout.

People assume the site is busy until they use it, and then they stop noticing. That is the highest compliment I have had on a build.

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

Live colour palette

Ten tokens, two palettes. The chips are painted with the same custom properties the page uses, and the code under each one is read live from the computed style, 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 deep violet with yellow, pink and teal. Dark mode drops the ground further and lifts the accents, so the layers stay separate instead of merging. The value under each chip is read live from the computed style.

Try the other themes

The same content, seven other personalities. The mode you pick follows you between them.

Want a page that gives it everything?

Tell us what you do and what you would rather stop saying. We will send back a stripped-down first pass, a fixed price, and an honest note on anything we think should be cut.

Start your project Read about ZeroFy

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