{ "id": "v1-fl-5453", "long_id": "v1.flat-design.portal.s05.p04.t05.u03", "name": "Flat design tile start", "era": { "slug": "flat-design", "code": "fl", "name": "Flat design", "years": [ 2013, 2016 ], "description": "Product marketing, 2013 to 2016: full-width bands of solid colour, light sans-serif headings, thin one-pixel rules, and no gloss, bevel or drop shadow anywhere." }, "archetype": "portal", "mode": "mix", "viewport": { "width": 1280, "fluid": true, "responsive": true }, "summary": "This is the tile start page of flat design, common from 2013 to 2016 wherever a service followed the \"modern UI\" of touch tablets and phones: a start screen of solid colour tiles in three sizes, parted by narrow gaps and sorted into titled groups, some of them \"live\" with a figure or a line of news. Navigation is a pivot, a row of large words set directly on the page with the current one dark and the others faded, and an inner page opens with a round back button beside a very large title. Everything is square and flat; a tile is labelled on a darker strip along its foot, and the only depth is a heavy rule along the top of a panel.", "url": "https://chrono.skin/s/v1-fl-5453", "preview_url": "https://chrono.skin/s/v1-fl-5453/specimen.html", "files": { "STYLE.md": "# Flat design tile start\n\n## Summary\n\nThis is the tile start page of flat design, common from 2013 to 2016 wherever a service followed the \"modern UI\" of touch tablets and phones: a start screen of solid colour tiles in three sizes, parted by narrow gaps and sorted into titled groups, some of them \"live\" with a figure or a line of news. Navigation is a pivot, a row of large words set directly on the page with the current one dark and the others faded, and an inner page opens with a round back button beside a very large title. Everything is square and flat; a tile is labelled on a darker strip along its foot, and the only depth is a heavy rule along the top of a panel.\n\n## Layout\n\n- The page is fluid and designed for a 1280px viewport. Every strip (`.ds-nav__bar`, `.ds-nav__pivot`, `.ds-hero`, `.ds-strip`, `.ds-start`, `.ds-page-header`, `.ds-band`, `.ds-footer`) spans the viewport and pads its own sides with `--space-6` (56px); the content inside is a `.ds-wrap` of `--size-page` (1152px). There is no boxed frame and no sidebar on the start page.\n- Navigation has two parts. `.ds-nav__bar` is a thin `--fill-bar` strip, `--size-bar` (48px) tall with a 1px bottom rule: the brand at the left, the search field (`--size-search`, 220px) and the account with its square initials at the right. Under it `.ds-nav__pivot` sets the section names as words of `--text-h1` directly on the page: the current word is `--color-heading`, the others `--color-text-muted`. There is no button and no underline in the pivot.\n- The start page has no hero band. `.ds-hero` is type on the page: the title at display size, one lead line and two buttons at the left, and the `.ds-stat` figures at the right on the same baseline. Under it comes `.ds-strip`, one line of service news on `--fill-bar-alt`.\n- Then `.ds-start`: three `.ds-group` columns `--space-6` apart, each a small title over a `.ds-grid`. A grid is two columns wide with rows of `--size-tile` (150px) and a gap of `--space-2` (8px). A tile is square (one cell), wide (`--wide`, two cells) or large (`--large`, two by two). Text in a tile sits at the bottom left above the label strip; an icon sits in the middle. A `.ds-panel--tile` takes the place of a large tile when a group needs a small table.\n- Inner pages have no hero, no strip and no tiles. Under the pivot comes `.ds-page-header`: a round back button, then the `.ds-breadcrumb`, the page title at display size and one grey line, with the actions at the right on the title's baseline. The content follows in `.ds-band` strips. A hub page uses `.ds-hub`, three sections side by side (1 to 1.2 to 0.8), each under a `.ds-hub__title`. A list page uses `.ds-cols`: the `.ds-tabs` and the table with its pagination in the main column, small panels in a `--size-side` (300px) column at the right; a second `.ds-band--alt` holds two equal halves (`.ds-cols--halves`). A settings page uses `.ds-cols--side-first`: the `.ds-sidebar` section list and a panel at the left, notices, form and the button row at the right. The footer line is unchanged.\n- Views. The specimen is a city library's lending service with four views. `start` is the start page: the hero with the three figures, the news strip and the three tile groups (the reader's shelf, the catalogue, the branches with their opening hours). `catalogue` is the hub: this week's new titles, the librarians' note on borrowing, and the subject list with frequent searches. `loans` is the list page: tabs, the loan table with pagination and the status key, the card and next-return panels, then the open renew dialog beside the empty holds box. `settings` is the card and notices form with its notices and action row, beside the settings list and the card panel. Below 760px the groups, hub sections and columns stack, the search field takes a row of its own under the brand and the account, the pivot scrolls sideways on its own row with its right edge faded by a mask (on the settings view it starts at the right so the current link is in view), and a wide table scrolls inside `.ds-table__wrap` while the page itself never does.\n- Spacing scale: `--space-1` 4px (between a label and its field, tile label padding, pagination gaps), `--space-2` 8px (the gap between tiles, button vertical padding, between adjacent buttons and badges), `--space-3` 12px (tile, cell and panel padding, list row padding, paragraph gap), `--space-4` 20px (button horizontal padding, between form rows, between stacked blocks in a column, footer padding), `--space-5` 32px (strip padding top and bottom, between pivot words, between sidebar and panel), `--space-6` 56px (page side padding, between tile groups and columns, around the dialog band).\n- Other sizes: `--size-icon` 40px (tile and empty-state icons), `--size-thumb` 52px (the cover block of a list row), `--size-dialog` 520px (measure of the dialog text).\n- On a phone (760px and below) there is no menu button: `.ds-nav__inner` wraps, `.ds-nav__search` takes a full row under the brand and the account `.ds-menu`, and `.ds-nav__pivot` is one row of `.ds-nav__links` at the page edge that scrolls sideways without a scrollbar. The pivot takes that scrolling form already below 1040px, because its words are heading-sized and outrun a tablet's window. The current link keeps its mark. A tooltip is not placed beside its trigger: it opens as a full row under its line, inset by `--space-3`, without its arrow.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\n- Colour family: the warm beige page, charcoal and deep red of the 2014 tile-framework page, with that page's orange, yellow, navy and teal; the creams come from the 2014 note-taking page and the greys from the 2014 ride-app page.\n- `--color-page` and `--color-canvas` are beige `#f0e8e0`; `--color-surface` white is for panels, table rows and the current sidebar row; `--color-surface-alt` `#f8f0e8` the alternate row and band; `--color-surface-strong` `#e0d8c0` the panel title strip, the plain tile, idle page numbers and inline code. `--color-bar` white with `--color-bar-text` `#48484c` is the top bar and the table head. `--color-bar-alt` `#333333` with white `--color-bar-alt-text` is the news strip and one tile; nothing else is put on it and its text takes no other colour.\n- Text is `--color-text` `#48484c`, meta `--color-text-muted` `#848484`, headings `--color-heading` `#222222`. `--color-heading-alt` `#9a1616` (deep red) is for group, hub, panel and sidebar titles and h3.\n- `--color-button` `#9a1616` is the only action colour, and also the bar beside a figure, under the current tab and beside the current sidebar row. Links are teal `--color-link` `#008080`, hover navy `#1e347b` and underlined, active black. The secondary button is `--color-button-secondary-text` `#333333` text and edge on white; its text must contrast with the page as well as with its own fill, because a surface set may make the fill transparent. Hovered, it swaps its two colours.\n- `--color-fill-1` (deep red) and `--color-fill-4` (navy) are the tiles that carry text, with `--color-inverse-text` on them, as do the `--fill-inverse` tile, the `--fill-bar-alt` tile (with `--color-bar-alt-text`) and the plain `--color-surface-strong` tile (with `--color-text` and `--color-heading`). `--color-fill-2` (orange) and `--color-fill-3` (yellow) are icon tiles: an icon only, on a round plate of `--color-inverse` mixed in at 40%, so that the layout stays readable when a palette makes these fills pale. Every tile's label stands on a strip of the same 40% mix with `--color-inverse-text`, never on the fill itself. The cover blocks of the list use the four fills without text.\n- `--color-accent` `#fa6800` (white text) is the default badge and the account's initials, `--color-accent-alt` yellow the second badge: a 30% tint over `--color-surface` with a yellow outline and `--color-heading` text. Status: `--color-success` `#60a917`, `--color-warning` `#f0a30a`, `--color-danger` `#dd1144`, all with `--color-accent-text`.\n- `--color-notice` `#e0d8c0` with `--color-notice-text` `#333333` and a thick bar in the text colour; the error notice is `--color-danger` on `--color-danger-surface` with a 1px outline. The footer is `--fill-inverse` `#1a1a1a` with `--color-text-muted` text and a `--color-inverse-text` name.\n- Two families, after the tile-framework page, which set its sub-headings in a serif beside a humanist sans, and the 2014 agency page with its large serif titles: `--font-heading` is Cambria, PT Serif, Georgia; `--font-body` and `--font-ui` are Segoe UI, Open Sans, Helvetica Neue. `--font-mono` is Courier New.\n- `--text-base` 15px at `--line-body` 1.4, `--text-ui` 14px (controls, tables, sidebar, strip), `--text-small` 12px (meta, badges, tile labels, breadcrumb, footer), `--text-large` 20px (lead lines).\n- Headings are regular weight and large: `--text-display` 46px (hero title, page title, figures, the word in a live tile), `--text-h1` 34px (pivot words, panel figures), `--text-h2` 28px (hub titles, dialog and empty-state titles), `--text-h3` 20px (group titles, tile titles, list titles, tabs, the brand). `--weight-heading`, `--weight-display` and `--weight-ui` are 400; `--weight-bold` 700 is for labels, table heads, panel and sidebar titles, badges and the brand name. `--display-tracking` is -0.5px; nothing else is tracked and nothing is uppercase.\n- Surface: everything is square (all four radii 0, so badges are rectangular tags). `--border-width` 1px for rules and outlines; `--border-width-strong` 5px for the bar beside a figure, a notice and the current sidebar row, under the current tab and the table head, and the frame of a hovered tile. `--shadow-panel` is a hard 4px line in `--color-border-strong` along the top of a panel; `--shadow-dialog` adds a 1px ring. A hovered button gets a 2px inner ring, a pressed one 4px (`--shadow-control-hover`, `--shadow-control-pressed`). `--focus-ring` is `1px dashed`. `--transition` fades background and ring in 0.1s.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: the icon plate and the tile label strip (`--color-inverse` at 40%), the plate on the inverse tile (`--color-inverse-text` at 16%), the `--alt` badge tint (`--color-accent-alt` at 30% over `--color-surface`), the hovered and pressed destructive button (`--color-danger` at 85% over `--color-inverse-text` and over `--color-inverse`), the 2px ring of the back button (twice `--border-width`). A hovered strip link uses `opacity: 0.8`.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and page fill. Holds the strips directly.\n- `.ds-wrap`: the 1152px content column inside any strip.\n- `.ds-brand`: the site's mark and name, first in the top bar. `.ds-brand__mark` is a 28px tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG, drawn with square caps; `.ds-brand__name` is the name in the heading font at `--text-h3` and `--weight-bold` in `--color-heading`. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header. `.ds-nav__bar` with `.ds-nav__inner` holds the `.ds-brand`, `.ds-nav__search` and the account, a `.ds-menu` whose toggle holds the name and a `.ds-avatar`. `.ds-nav__pivot` holds `.ds-nav__links` of `.ds-nav__link`; the current word is `is-current`. In the specimen the showing view marks its word with one `:has()` rule per view; a project sets `is-current` itself. In a narrow window the search field takes a row of its own under the brand and the pivot scrolls sideways; under 1040px the hero's figures stand under its text.\n- `.ds-hero`: the start page's introduction, type on the page. `.ds-hero__inner` puts `.ds-hero__copy` (`.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` with one primary and one `--secondary` button) beside the `.ds-stat` row.\n- `.ds-stat`: the row of figures. Each `.ds-stat__item` stands behind a 5px bar in `--color-button` and holds a `.ds-stat__figure` at display size over a small grey `.ds-stat__label`. No box and no icon.\n- `.ds-strip`: one line of news on `--fill-bar-alt`: a badge, `.ds-strip__text` and a bold `.ds-strip__link` at the right. One per page.\n- `.ds-start`: the strip that holds `.ds-start__groups`, three `.ds-group` columns each with a `.ds-group__title`.\n- `.ds-grid`: one group of tiles. `.ds-grid__cell` is a tile and a link; fills `--2`, `--3`, `--4`, `--inverse`, `--bar`, `--plain`; sizes `--wide` and `--large`. Inside: `.ds-grid__body` with a `.ds-grid__figure`, `.ds-grid__title` and `.ds-grid__text` (text tiles), or `.ds-grid__body--icon` with one `.ds-grid__icon` on its plate (icon tiles); then `.ds-grid__foot`, the label strip, with the name at the left and an optional `.ds-badge` count at the right. A hovered tile (`is-hover`) gets a 5px inner frame.\n- `.ds-band`: a strip of an inner page; `--alt` on `--color-surface-alt` with a rule above, `--last` with more room before the footer. `.ds-cols` makes the main and side columns (`--side-first`, `--halves`); `.ds-stack` stacks blocks 32px apart (`--tight`: 20px).\n- `.ds-hub`: three `.ds-hub__section` columns, each under a `.ds-hub__title` (`--next` for a second title lower in the same column).\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. `.ds-page-header__inner` holds `.ds-page-header__back` (the round back button with an arrow), `.ds-page-header__copy` (the breadcrumb, `.ds-page-header__title` at display size, one `.ds-page-header__text` line) and `.ds-page-header__actions` with at most one primary and one `--secondary` button.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover` (underlined), `is-active`, `is-focus`. `--quiet` for meta and breadcrumb links; `--more` appends an arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: flat square button, 14px regular weight. Variants: `--secondary` (outline in its text colour on `--fill-button-secondary`), `--danger` (flat `--color-danger`, for destructive actions only; one per view), `--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons 8px apart.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table: the head on `--fill-bar` above a 5px rule, 1px rules between rows, alternate rows on `--color-surface-alt`, no vertical lines. `.ds-table__num` right-aligns numbers; `.ds-table__caption` is a small note below. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is the row under it with the pagination at the left and a key at the right.\n- `.ds-list`: rows of titles. `.ds-list__item` holds a `.ds-list__thumb` cover block (`--2`, `--3`, `--4`) and a `.ds-list__body` with `.ds-list__title`, `.ds-list__text`, `.ds-list__meta`; rows are parted by 1px rules.\n- `.ds-panel`: white box with a 1px border, the heavy top rule of `--shadow-panel`, a `.ds-panel__title` strip and `.ds-panel__body`. `.ds-panel__figure` is a large numeral; `.ds-panel__rows` with `.ds-panel__row` is a two-column list of facts. `--tile` lets it stand in a `.ds-grid` in place of a large tile.\n- `.ds-tabs`: a small pivot of `.ds-tabs__tab` words at `--text-h3`; the current one (`is-current`) is dark and stands on a 5px bar in `--color-button`. No boxes around tabs.\n- `.ds-badge`: small rectangular tag, 12px bold, on `--fill-accent`. `--alt` tinted with an outline, `--quiet` grey for neutral states and counts. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a section list: `.ds-sidebar__title`, `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows with an optional `.ds-sidebar__count`; the current row (`is-current`) is white behind a 5px bar.\n- `.ds-notice`: flat strip behind a 5px bar; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: flat squares of `.ds-pagination__link`; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: 12px grey trail of `.ds-breadcrumb__item` parted by slashes; the last is `.ds-breadcrumb__current`. It sits above the page title.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) crossed from edge to edge by `.ds-dialog__box`, a band on `--fill-panel` with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body` in a 520px measure and right-aligned `.ds-dialog__actions` with the primary button first.\n- `.ds-empty`: a panel-like box with the `.ds-empty__icon` at the left and `.ds-empty__copy` beside it: `.ds-empty__title`, `.ds-empty__text` and one button, all left-aligned.\n- `.ds-footer`: one line on `--fill-inverse`: `.ds-footer__name`, `.ds-footer__links` of `.ds-footer__link`, and the copyright at the right.\n- `.ds-menu`: a drop-down under a navigation item, written as `
`: `.ds-menu__toggle` is the ``, set like the navigation links with a small chevron after it, and `.ds-menu__list` holds `.ds-menu__item` links in a flat `--fill-panel` box with a `--border-width` border, `--radius-panel` corners and `--shadow-dialog`. Here it is the account at the right of the bar: the toggle holds the name and the `.ds-avatar`, and the list hangs from the bar's lower edge at the right.\n- `.ds-accordion`: sections that open and close, each a `
` with `.ds-accordion__head` (the ``, in the heading font, with a plus in `--color-link` at the right that becomes a minus when open) and `.ds-accordion__body`. Items are divided by rules; there are no boxes or fills. Use it for the questions asked at the desk, in a column of a band.\n- `.ds-tooltip`: a term with a dotted underline that shows `.ds-tooltip__tip` above it on hover or focus (give the trigger `tabindex=\"0\"`); `is-open` shows it statically and `--end` hangs the tip from the trigger's right edge. The tip is a small flat box on `--fill-inverse` with `--color-inverse-text` at `--text-small`, `--radius-control` corners and a square pointer. Use it to explain one label in a panel row. Never put it inside `.ds-table__wrap`, which would clip it.\n- `.ds-switch`: an on/off control drawn over a checkbox: a `