Swiss Minimal demo

Compo­nents

Every component in the kit on one page, in the order of the component guide. The ones that frame the page are listed at the end.

01–03

Buttons

  • 01

    Button

    .btn

    The one filled button, for the single main action of a view. Hover brightens it.

  • 02

    Outlined button

    .topbar-btn, .topbar-btn--text

    The quiet button: a 1px outline that fills on hover. The top bar uses it for Recent, the menu and the theme.

  • 03

    Hover label

    data-tip

    A short label under an outlined button saying what it does. Hover or tab to it.

04–07

Forms

  • 04

    Field

    .field, .field-label

    An underline in large type, no box. A required field gets the flower mark after its label.

    Required

  • 05

    Select

    .select-wrap, .select

    A field that picks one item from a list, with a chevron at its end.

  • 06

    Switch

    .choice, .switch

    On or off for a setting. On fills with the accent.

  • 07

    Radio

    .choice-group, .radio

    One choice from two to five, all in view. The arrow keys move the choice.

    Format

08–13

Lists

  • 08

    List row

    .row

    Numbered rows that fill on hover. The active one stays filled, with an edge on its left.

    • 01One typefaceWeights 400, 500 and 700 only
    • 02Flat colorCream, ink and one accent
    • 03Thick rulesA 2px line opens every section
  • 09

    Filter chips

    .chip-group, .chip

    Outlined buttons that narrow a list to one category. The pressed one fills.

  • 10

    Favorite star

    .fav-btn

    Saves an item on this device. This star and the one beside Field notes on the Work page are the same.

    Field notes

  • 11

    Page accordion

    .page-acc

    Folds a filter row away, with a line saying what it shows. Open it and pick a chip.

    Filter by categoryAll items
  • 12

    Dated list

    .dated-list

    What a site can do and when each part arrived, newest first. These are the latest three.

    1. Agents

      How to build or restyle a site with the kit using an AI coding agent, with a starting AGENTS.md for your own site. Agents that read the web can start at /llms.txt. In the menu.

    2. Components

      Every component in the kit on one page, from buttons to oval badges, with the pieces that frame the page listed at the end. In the menu.

    3. Oval badges

      Short codes like CH sit in an oval, like the sticker on a Swiss car, plain or solid, in light and dark. See the About page.

  • 13

    Closing note

    .closing-note

    A bold rule that ends a list, over one quiet line about it.

    Kept on this device only.

14–16

Text and images

  • 14

    Code block

    pre, .pre--bar

    Code in Source Code Pro. Terminal output and logs go on the dark block, the same in both themes.

    @import "../design/kit/tailwind.css";
    $ npm test
52 passed (15.7s)
1 failed: tests/forms.spec.ts
  • 15

    Oval badge

    .ellipse, .ellipse--solid

    Abbreviations in an oval, after international car decals. Plain or solid, at any text size.

    SwitzerlandSwitzerlandGermanUnited States
  • 16

    Image

    .media, .figure

    A plain rectangle on the grid, cropped to a fixed shape, with the caption below.

    Abstract composition of black, grey and red circles and rectangles divided by black rules
    The home page artwork, cropped to 4:3.

17–19

Feedback

  • 17

    Toast

    .toast

    A one-line confirmation at the bottom left, gone after a few seconds.

  • 18

    Activity indicators

    .eq, .spinner

    The equalizer marks what is playing now; the spinner says something is loading.

    Now playing

  • 19

    Icon actions

    .icon-row, .icon-btn

    Icon-only links and buttons under a list item, one color, the accent on hover.

    Work

20–21

Titles and menus

  • 20

    Page title

    .page-title, .page-title--bar

    One big title in place of a hero, as on Forms. The dark version, on Work, ends in a thick accent rule.

    All work

    All work

  • 21

    Menu

    .menu-list, .acc, .submenu

    The big lines in the panel. An item with sub-items opens as an accordion, with a plus that turns to a minus. Open Work, then Projects.

22–29

Page frame

  • 22

    Top bar

    .topbar

    The bar at the top of this page, with the site name and the outlined buttons.

  • 23

    Slide-down panel

    .panel

    The dark block behind the menu button. Open it.

  • 24

    Panel tabs

    .panel-tabs, .panel-tab

    Menu, Contact and Features across the top of the panel. Open Contact.

  • 25

    New dot

    .new-dot

    The dot on the menu button when something was added since your last visit.

  • 26

    Drawer

    .drawer

    The Recent button in the top bar: the pages you have opened here.

  • 27

    Jump to current

    .jump-btn

    The triangle in the bottom bar on the Work page once Field notes scrolls out of view.

  • 28

    Scrolling title

    .marquee

    The long title in the bottom bar. It scrolls three times, then rests.

  • 29

    Hero

    .hero

    The top of this page. Home has the square image beside it, About the wide one under it.

Now

Field notes: twelve months of small projects set in a single typeface, and what that taught me about restraint