Get started
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

Your Design Kit keeps

Colors, typefaces, the spacing scale, motifs, and brand voice.

Retro web portal changes

Surface material, borders, shape, depth, component layout, states, and motion.

Retro web portal specimen

Base components
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago
Retro web portal applied
Customer health

Accounts at risk

Atlas workspace

On track

Renewal is due in 18 days. Weekly use is up and two seats were added this month.

Seats
24
Usage
+18%
Renewal
18 days
Priority
Open account12 min ago

Look for: 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.

Both panels use the same sample Design Kit and account screen. Only the interface style changes on the right.

Choose what to restyle

Select a scope to create a prompt for your coding agent. Start with one component family or apply the style across the interface.

Choose what the style should change
Apply Retro web portal to cards, panels, sheets, and modals only. Keep my Design Kit's colors, typefaces, and motifs. Leave navigation, forms, actions, and page structure unchanged. Show me one representative card first, then explain the accessibility trade-offs before changing the rest.
Paste this into your coding agent, then add any product-specific constraints.

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