{ "id": "v1-fl-6522", "long_id": "v1.flat-design.app.s06.p05.t02.u02", "name": "Flat design dashboard", "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": "app", "mode": "mix", "viewport": { "width": 1280, "fluid": true, "responsive": true }, "summary": "This is the admin dashboard of flat design, common from 2013 to 2016 for the signed-in side of web services: a rail of one solid colour down the left edge with the brand on top and icon links below, a white top bar with search and a single action, and a grey work area filled with white cards. The first screen is a flat banner, a row of number cards each led by a solid colour block with an icon, and a bar chart drawn as plain rectangles; inner screens are a table card with tabs on its head, a report and a form. Nothing has gloss, gradient or a blurred shadow: cards are set off from the page by a hairline and a flat translucent frame.", "url": "https://chrono.skin/s/v1-fl-6522", "preview_url": "https://chrono.skin/s/v1-fl-6522/specimen.html", "files": { "STYLE.md": "# Flat design dashboard\n\n## Summary\n\nThis is the admin dashboard of flat design, common from 2013 to 2016 for the signed-in side of web services: a rail of one solid colour down the left edge with the brand on top and icon links below, a white top bar with search and a single action, and a grey work area filled with white cards. The first screen is a flat banner, a row of number cards each led by a solid colour block with an icon, and a bar chart drawn as plain rectangles; inner screens are a table card with tabs on its head, a report and a form. Nothing has gloss, gradient or a blurred shadow: cards are set off from the page by a hairline and a flat translucent frame.\n\n## Layout\n\n- The page is fluid and designed for a 1280px viewport. `.ds-page` is a grid of two columns: the rail (`.ds-nav`, `--size-rail` 220px) for the whole height, and beside it the top bar, the showing view and the footer line. The work area is not centred: `.ds-content` starts at the rail, is at most `--size-page` (1060px) wide and pads itself with `--space-5` (24px).\n- Navigation is the rail on `--fill-bar-alt`: the `.ds-brand` in a row as tall as the top bar, then groups of links under small group names, each link an icon and a label with an optional count, the current one on a lighter wash behind a 3px edge; the account sits under the links. `.ds-topbar` on `--fill-bar` is `--size-top` (56px) tall with a 1px bottom rule: the search field at the left, two text links and one small primary button at the right. No other navigation exists; the footer is one thin line.\n- Everything in the work area stands in a card (`.ds-panel`, `.ds-stat__item`, `.ds-grid__cell`, `.ds-sidebar`) and cards are `--space-5` apart in both directions. The dashboard stacks, top to bottom: `.ds-hero`, one flat `--color-fill-1` banner with the headline figure in words, two buttons and a small bar drawing; `.ds-stat`, four number cards; `.ds-cols`, a chart card two thirds wide beside a list card; and `.ds-grid`, four template cards.\n- Inner pages have no hero. `.ds-content` opens with `.ds-page-header`, which is not a strip and has no fill: the `.ds-breadcrumb`, the page title and one grey line at the left, the actions at the right on the same baseline. Below, `.ds-cols` (2 to 1) holds the work at the left and small cards at the right; with `--level` both columns end on one line and the card marked `.ds-panel--grow` takes up the difference. A list page puts `.ds-tabs` on the head of the table card and the pagination in its `.ds-table__foot`; a report puts a `.ds-stat--3` row first; a form sits in a card under its notices.\n- Views. The specimen is a newsletter service's reporting side with five views. `dashboard` is the home view: the banner, the four number cards, the chart of the last seven sends beside the latest campaigns, and the templates. `campaigns` is the list page: tabs on the table card, pagination, the lists and the label key at the right, and the empty box for automatic letters. `report` is one campaign: three number cards, the table of links with the action row, the open delete dialog, and the hourly chart with the send's details at the right. `compose` is the form for a new campaign under its notices, beside the checklist and the best sending time. `guide` is a text page in a card beside its contents list and further links. Below 1040px the side column goes under the main one and cards stand two across; below 760px the rail's brand and account avatar stand in one row across the top and its links become a tab bar fixed to the bottom of the window, cards stack, 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, between chart bars, pagination gaps), `--space-2` 8px (button and rail link vertical padding, between adjacent buttons and badges), `--space-3` 12px (card head, table cell and list row vertical padding, paragraph gap), `--space-4` 16px (card padding, button and cell horizontal padding, between form rows, between chart groups), `--space-5` 24px (between cards, work area padding, banner padding), `--space-6` 40px (banner side padding, around a dialog, empty-state padding).\n- Other sizes: `--size-chip` 72px (the colour block of a number card), `--size-icon` 28px, `--size-chart` 200px (height of a chart's plot), `--size-thumb` 104px (the colour block of a template card), `--size-search` 260px, `--size-dialog` 440px.\n- On a phone (760px and below) `.ds-nav` is a row holding only the `.ds-brand` and the account `.ds-menu` of `.ds-nav__foot` (the name and `.ds-nav__quota` are not shown, the list opens to the right edge); the group names are not shown and the links become a tab bar fixed to the bottom of the window: the first `.ds-nav__links` list on the left three quarters, the second on the right quarter, each `.ds-nav__link` an `.ds-nav__icon` over its label, the current one marked by a line along its top edge, a count badge on the corner of its icon. 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 2015 music landing page (coral, yellow, plum, green and magenta on white with a near-black inverse); the red of `--color-danger` `#e81020` is borrowed from the 2014 corporate home page, because the family has no error colour.\n- `--color-page`, `--color-canvas`, `--color-surface` and `--color-bar` are white `#ffffff`; `--color-surface-alt` `#f8f8f8` is the alternate section, `--color-surface-strong` `#efefef` the code background, the quiet badge and the empty-state disc.\n- Text is near-black `--color-text` `#2e2f33`, not grey; headings are plum `--color-heading` `#503750`; small titles (panel, sidebar, h3) are magenta `--color-heading-alt` `#f037a5`; meta text and table heads are `--color-text-muted` `#919496`.\n- `--color-fill-1` `#d65a3e` (coral) is the hero; `--color-fill-4` `#2ebd59` (green) is the closing call to action. Text on either is `--color-inverse-text`. `--color-fill-2` `#f8c433` (yellow) and `--color-fill-3` `#503750` (plum) fill feature pictures, hero blocks and grid discs and carry an icon only, never running text. An icon on a fill never lies on the fill itself: `.ds-grid__icon` and `.ds-feature__icon` carries a round plate, `--color-inverse` mixed in at 40%, so the `--color-inverse-text` icon stays legible when a token set makes the fill pale (yellow, beige).\n- `--color-button` `#2ebd59` (green, white text) is the only action colour and also the current tab segment, the current page number, the current sidebar marker and `--color-focus`. The secondary button is `--color-button-secondary-text` `#2e2f33` on white. On a fill the button is `.ds-button--inverse`: `--color-inverse-text` with `--color-fill-1` text.\n- Links are coral `--color-link` `#d65a3e`, visited the same; hover goes dark `--color-link-hover` `#2e2f33`, active `#000000`. Quiet links are `#919496`. The solid navigation bar uses `--color-bar-text` with `--color-link` for the current item; the overlay navigation uses `--color-inverse-text` only.\n- `--color-accent` `#f037a5` (magenta, white text) is the default badge; `--color-accent-alt` and `--color-notice` are yellow `#f8c433`: the `--alt` badge is a 30% tint of it over `--color-surface` with a yellow outline and `--color-heading` text, the notice is solid yellow with `--color-notice-text` `#2e2f33`. Status badges are `--color-success`, `--color-warning` and `--color-danger` with `--color-accent-text`.\n- Borders: `--color-border` `#d9dadc`, `--color-border-strong` and `--color-input-border` `#c1c3c6`, `--color-border-muted` `#efefef` (table rows, panel title rule). The footer is a light line on `--color-canvas` in `--color-text-muted` with `--color-link-quiet` links; `--color-inverse` is not used as a block in this layout, only mixed at 16% for the hero device.\n- One light geometric sans for everything, after the 2014 site-builder page: `--font-body`, `--font-heading` and `--font-ui` are Raleway, Montserrat, Avenir (the references used commercial geometric faces). `--font-mono` is Menlo.\n- Small and airy: `--text-base` 13px at `--line-body` 1.6, `--weight-body` 300; `--text-small` 10px for meta, badges, table heads and the footer; `--text-ui` 12px.\n- Headings are light and tracked, never bold: `--weight-heading` and `--weight-display` 300, `--heading-tracking` 0.5px, `--display-tracking` 1px; `--text-display` 44px (hero title, inner page title, figures), `--text-h1` 32px (section and feature titles), `--text-h2` 22px, `--text-h3` and `--text-large` 16px.\n- `--ui-transform` is `uppercase` at `--weight-ui` 500: navigation, tab segments, buttons and table heads are small capitals-by-transform. `--weight-bold` 500 is the heaviest weight. All three link decorations are `none`.\n- Buttons and inputs are pills: `--radius-control` 20px rounds a control of ordinary height completely; `--radius-pill` 500px makes badges, grid discs and the circled plus fully round. Panels, notices, dialogs and the top of the hero's device take `--radius-panel` 8px; `--radius-page` 12px rounds feature pictures and the grid box. The hero itself runs edge to edge and has no corners.\n- The secondary button is a ghost: `--fill-button-secondary` is `transparent`, drawn by its 1px outline only. The primary button is the flat `--color-button`; hovered it is the same colour mixed 20% with white.\n- `--border-width` 1px for every rule and outline; `--border-width-strong` 3px for the current navigation item and the current sidebar marker. `--focus-ring` is `2px solid` in `--color-focus`.\n- One-off shades made with `color-mix()` because the vocabulary has no token: the hero device and its blocks (`--color-inverse` at 16%), the ghost button border (`--color-inverse-text` at 50%), the icon plate (`--color-inverse` at 40%), 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 hero lead and a hovered overlay link use `opacity: 0.8`.\n- Nothing casts a shadow at rest: the panel, control, hover, dialog and text shadows are `none`; only a pressed button darkens, with `--shadow-control-pressed`, an inset 2px ring in `--color-shadow`. Every fill is a flat colour. `--transition` fades colour, background and border colour in 0.2s.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and page fill and makes the two-column grid; `.ds-nav`, `.ds-topbar`, the views and `.ds-footer` are its direct children.\n- `.ds-content`: the padded column inside a view; stacks its children 24px apart.\n- `.ds-brand`: the site's mark and name, first in the rail. `.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; `.ds-brand__name` is the name at `--text-large` and `--weight-bold` in the rail's text colour. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the rail. `.ds-nav__group` names a group; `.ds-nav__links` holds `.ds-nav__link` rows of a `.ds-nav__icon`, a `.ds-nav__label` and an optional `.ds-badge`; the current row is `is-current`. `.ds-nav__foot` is the account, a `.ds-menu` with a `.ds-avatar` and `.ds-nav__who`; `.ds-nav__quota` under it shows the plan in use. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself. In a narrow window the rail is a block on top: the brand with the account's avatar at the right, then the links in one row.\n- `.ds-topbar`: the bar above the work area: `.ds-topbar__search`, up to two `.ds-topbar__link` and one `.ds-button--small`.\n- `.ds-hero`: the dashboard's banner on `--color-fill-1`. `.ds-hero__copy` holds `.ds-hero__title` (40px bold), `.ds-hero__lead` and `.ds-hero__actions` with one `.ds-button--inverse` and one `.ds-button--ghost`; `.ds-hero__art` is a row of `.ds-hero__bar` (`--2` to `--5` for other heights, the last one white). One per site, on the home view only.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. `.ds-page-header__copy` holds the breadcrumb, `.ds-page-header__title` (28px bold) and one `.ds-page-header__text` line; `.ds-page-header__actions` at the right with at most one primary and one `--secondary` button.\n- `.ds-cols`: main and side column, 2 to 1 (`--level` to end them on one line). `.ds-stack` stacks cards 24px apart; `.ds-panel--grow` on one of them fills the column.\n- `.ds-prose`: running text inside a card: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta and breadcrumb links; `--more` appends a chevron. `.ds-linkrow` lays links in a row.\n- `.ds-button`: flat button with 2px corners, 13px medium weight. Variants: `--secondary` (outline in its text colour on `--fill-button-secondary`), `--danger` (flat `--color-danger`, for destructive actions only), `--inverse` (white, on the banner), `--ghost` (outline in white, on the banner only), `--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, inside a card. `.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 inside a card, edge to edge: an 11px bold head on `--fill-bar`, 1px rules between rows, no stripes and no vertical lines; a hovered row (`is-hover`) is `--color-surface-alt`. `.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 card's last row, with the pagination or an action row at the left and a count at the right.\n- `.ds-list`: rows inside a card. `.ds-list__item` holds a `.ds-list__head` (the bold `.ds-list__title` and a status badge at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the card: `--fill-panel`, a 1px border, 3px corners and the ring of `--shadow-panel`. `.ds-panel__head` holds the `.ds-panel__title` and an optional small action above a rule; `.ds-panel__body` is padded. `.ds-panel__figure` is a large bold numeral or phrase; `.ds-panel__rows` with `.ds-panel__row` is a two-column list of facts (`--after` when it follows other content).\n- `.ds-stat`: the row of number cards, four across (`--3` for three). Each `.ds-stat__item` is a card: `.ds-stat__chip` (`--2`, `--3`, `--4` for the other fills) with a `.ds-stat__icon` on its plate, and `.ds-stat__body` with the `.ds-stat__figure` (28px bold), the `.ds-stat__label` and a `.ds-stat__delta` line (`--down` when the change is for the worse).\n- `.ds-chart`: a bar chart in CSS. `.ds-chart__plot` holds up to four `.ds-chart__line` gridlines (`--2`, `--3`, `--4`) and one `.ds-chart__group` per step; a group holds one or two `.ds-chart__bar`, the second with `--alt`, their heights set by `--20` to `--100` in steps of ten. `.ds-chart__axis` of `.ds-chart__tick` labels the steps; `.ds-chart__legend` of `.ds-chart__key` (`--alt`) names the series. `--small` halves the plot. Use it for at most two series and twelve steps.\n- `.ds-grid`: four cards across. Each `.ds-grid__cell` is a `.ds-grid__thumb` colour block (`--2`, `--3`, `--4`) holding a `.ds-grid__sheet` of `.ds-grid__line` (`--head`, `--short`), and a `.ds-grid__body` with `.ds-grid__title`, `.ds-grid__text` and a link.\n- `.ds-tabs`: the head of a card: `.ds-tabs__tab` in a row on `--color-surface-alt`; the current tab (`is-current`) takes the card's fill under a 3px top edge in `--color-button` and joins the card below.\n- `.ds-badge`: small rounded tag, 11px bold, on `--fill-accent`. `--alt` tinted with an outline, `--quiet` grey for neutral states. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a card of links: `.ds-sidebar__title` above a rule, `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count`; the current row (`is-current`) is bold behind a 3px edge.\n- `.ds-notice`: flat message strip; `--error` in the danger colours with a 1px border. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: small outlined squares of `.ds-pagination__link`; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: 11px grey trail of `.ds-breadcrumb__item` parted by chevrons; the last is `.ds-breadcrumb__current`. It sits above the page title.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a small card in the ring of `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`) above a rule, `.ds-dialog__body`, and `.ds-dialog__actions` right-aligned on `--color-surface-alt`.\n- `.ds-empty`: a centred message in a dashed outline with no fill: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button. It stands where a card would be.\n- `.ds-footer`: one thin line on `--fill-inverse` under the work area: `.ds-footer__name`, the copyright, and `.ds-footer__links` of `.ds-footer__link` 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 foot of the rail: the toggle holds the `.ds-avatar` and `.ds-nav__account` (the name in `.ds-nav__who` and the organisation), in the rail's own text colour, and the list opens under it. In a narrow window only the avatar shows, at the right of the brand, and the list hangs from the right edge.\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 at the end of a help article for the questions that follow from it.\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 `.ds-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 `