Vizis
ES

Esta página aún no está traducida, por eso se muestra en inglés.

Start page styles

Pick a style for your start page, or make your own and share it as a file.

The start page has a Style picker at the top right. It comes with a few styles: Nord, Dracula, Matrix, Vaporwave and Paper. Your choice is kept in each browser on its own.

Click the Waypoint mark at the top left five times, quickly. You’ll find something.

Make your own style

A style is a plain .css file. To load one, choose Load a style file… in the picker. Loading a file with the same name again replaces the old version. To remove the style you’re using, click the × next to the picker.

Let an AI write it

You don’t need to know CSS. Copy this prompt into Claude, ChatGPT or any other assistant, and change the first line to the look you want:

Make a Waypoint start page style: warm autumn colours, dark, cosy.

Write one plain CSS file, nothing else. Rules:
- Begin with a comment holding a line "name: <a short name>".
- Set these variables in :root: --wp-bg (page), --wp-surface (sections),
  --wp-surface-2 (tiles, chosen tab and button), --wp-line and --wp-line-strong
  (borders; a tile's border on hover), --wp-text, --wp-text-2, --wp-text-3
  (text, strongest to quietest), --wp-muted (hints, labels), --wp-accent-line
  (the line under the chosen tab), --wp-icon-tile (chip behind site icons),
  --wp-field, --wp-field-line, --wp-field-line-hover (search field),
  --wp-font (only fonts already on a Mac), --wp-radius-card, --wp-radius,
  --wp-radius-sm (corner rounding). For a light style add color-scheme: light.
- You may also style these classes, always starting the selector with :root
  (":root .tile"): header, .brand, .tab, .tab.on, .search, .sec, .sec h2,
  .tiles, .tile, .ic, .title, .tile small.
- No url() to the internet, no @import, no web fonts: they are blocked.
  Gradients are fine.
- Keep text readable: at least 4.5:1 contrast against its background.

Save the answer as a .css file, for example autumn.css, and load it with Load a style file…. If something looks off, tell the assistant what to change and load the file again. As long as the name: line stays the same, the new version replaces the old one.

Write it yourself

Start from this one:

/*
 * name: Sunset
 * by: you
 */
:root {
  --wp-bg: #2a1a2e;          /* the page */
  --wp-surface: #3d2242;     /* sections */
  --wp-surface-2: #4a2a50;   /* tiles, the chosen tab and button */
  --wp-line: #6b3a63;        /* borders */
  --wp-line-strong: #ff8c61; /* a tile's border on hover */
  --wp-text: #ffe3d3;        /* main text */
  --wp-text-2: #f5cdb8;      /* section names, tile names */
  --wp-text-3: #d9a894;      /* quieter text */
  --wp-muted: #b98a7a;       /* hints and labels */
  --wp-accent-line: #ff8c61; /* the line under the chosen page tab */
}

/* Classes too, if you like. Begin with :root so your rule wins. */
:root .sec h2 {
  color: #ff8c61;
}

The name: line in the first comment is what the picker shows. Without it, the picker shows the file name.

The variables

Variable What it colours
--wp-bg The page background
--wp-surface, --wp-surface-2 Sections; tiles and the chosen tab or button
--wp-line, --wp-line-strong Borders; a tile’s border on hover
--wp-text, --wp-text-2, --wp-text-3 Text, from strongest to quietest
--wp-muted Hints, labels, a tile’s address
--wp-accent-line The line under the chosen page tab
--wp-icon-tile The chip behind a site’s icon
--wp-field, --wp-field-line, --wp-field-line-hover The search field and the picker
--wp-font The font (one already on your Mac, such as Georgia, serif or Menlo, monospace)
--wp-radius-card, --wp-radius, --wp-radius-sm Corner rounding: sections, tiles, buttons

For a light style, also add color-scheme: light; inside :root, so the scrollbars and the search field turn light too.

The classes

These names stay stable from one version to the next:

Class What it is
header, .brand The top bar; the Waypoint mark and name
.tabs, .tab, .tab.on The page tabs; the chosen one
.search, .ctl, .seg The search field; the Layout, Size and Style controls; their button groups
.sections, .sec, .sec h2, .loose All sections; one section; its name; the tiles above all sections
.tiles, .tile, .ic, .title, .tile small A section’s tiles; one tile; its icon; its name; its address

Start every rule with :root, as in :root .tile { … }. Without it, the page’s own styles win.

Share a style

To share a style, send the file. Whoever loads it sees exactly your style.

A style can’t load anything from the internet: no web fonts, no images by address and no @import from other sites. The start page blocks it. So trying a style someone sent you is safe: it can change how the page looks, nothing more. Images can still be built in as data: addresses, and fonts can be ones already on the Mac.

A style file can be up to 200 KB.

← AnteriorStart page