All interface styles
Screen-native
Pro

Retro web portal

The early web's own visual language: beveled borders, dense link lists, visible dividers and a page that announces its own structure.

Also called: web 1.0, geocities, old web, table layout, netscape era

Retro web portal specimen

Everything here is authored text and CSS bevels — no browser chrome, no operating-system widgets, no reproduced logos or period site assets. The markup underneath is modern landmarks and headings; only the rendering is retro.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

What you see

The perceptual fingerprint, in the order you notice it.

  • Beveled or ridged borders around every region
  • Dense lists of underlined links rather than cards
  • Visible horizontal rules separating every section
  • System-ish type at small sizes with generous line breaks
  • Structure declared outright — sidebars, panels and headers with titles

Best for

  • Community, directory and archive projects with a deliberate old-web reference
  • Personal sites and zines where the reference is the personality
  • Link-dense pages where the era's density is genuinely the right shape

Avoid when

  • The brand needs to look current or credible to a mainstream buyer
  • The interface has modern interaction patterns that the language cannot express
  • You would be reproducing a specific historical site rather than the general grammar

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • This is the one style with no matching design kit route, and it is also the one most likely to be built with layout tables. Use real landmarks and headings; the LOOK is retro, the markup is not.
  • Underlined link lists are good for accessibility — keep the underlines, and make visited state distinguishable by more than hue.
  • Beveled `border-style: ridge/groove` renders inconsistently and can fall below 3:1; pair it with a solid 1px boundary.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

No design kit style page matches Retro web portal yet — it is a screen-native grammar with no counterpart in the kit taxonomy. Pair it with any kit whose colour and type you want, and apply the implementation bundle on top.

Implementation bundle

Pro

What an agent needs in order to actually build Retro web portal on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Loading the implementation bundle…

Agent tags

The vocabulary a coding agent can match this style on.

  • beveled-border
  • link-dense
  • divider-rules
  • declared-structure
  • web-1.0