{ "id": "v1-fl-6263", "long_id": "v1.flat-design.app.s06.p02.t06.u03", "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-6263", "preview_url": "https://chrono.skin/s/v1-fl-6263/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 deep teal, sky blue and pale blue of the 2014 agency page on the greys of the 2014 newsletter page, with that page's vermilion as the one warm colour and the cyan and ink of the 2014 ride-app page; the green is the 2014 note-taking page's.\n- `--color-page` and `--color-canvas` are grey `#f2f2f2`; `--color-surface` white is every card; `--color-surface-alt` `#f9f9f9` the tab strip, a hovered table row and the foot of a dialog; `--color-surface-strong` `#e8e8e8` the quiet badge, inline code and the lines of a template drawing. `--color-bar` white with `--color-bar-text` `#3a3a3a` is the top bar and the table head. `--color-bar-alt` `#0b5472` (deep teal) with white `--color-bar-alt-text` is the rail; nothing else is put on it and its text takes no other colour, so rail links differ by opacity only.\n- Text is `--color-text` `#474747`, meta `--color-text-muted` `#9c9c9c`, headings and figures `--color-heading` `#070716`; card titles, sidebar titles and h3 are `--color-heading-alt` `#0b5472`.\n- `--color-button` `#1ca8c3` (cyan, white text) is the only action colour and also the top edge of the current tab, the current page number and the edge of the current sidebar row. Links are `--color-link` `#2c9ab7`, hover `#1fbad6`, active `#0b5472`; no link is underlined. The secondary button is `--color-button-secondary-text` `#0b5472` 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` (cyan) is the banner, with `--color-inverse-text` on it and the `--inverse` and `--ghost` buttons; it is the only fill that carries text. `--color-fill-1` to `--color-fill-4` are the colour blocks of number cards and template cards and the first two are the two series of a chart. A block holds an icon only, on a round plate of `--color-inverse` mixed in at 40%, or a small white sheet, never text, so a palette may make any fill pale.\n- `--color-accent` `#3ea5ce` (white text) is the default badge, the count in the rail and the account's initials; `--color-accent-alt` pale blue the second badge: a 30% tint over `--color-surface` with an outline and `--color-heading` text. Status: `--color-success` `#20c05c`, `--color-warning` `#f0a30a`, `--color-danger` `#e85c41`, all with `--color-accent-text`; the small line under a figure is `--color-success`, or `--color-danger` with `--down`.\n- `--color-notice` `#b7dded` with `--color-notice-text` `#0b5472`; the error notice is `--color-danger` on `--color-danger-surface` with a 1px border. The footer line is `--fill-inverse` `#070716` with `--color-text-muted` text.\n- One grotesque family for everything, bold for headings, after the newsletter and agency pages: `--font-body`, `--font-heading` and `--font-ui` are Helvetica Neue, Helvetica, Arial. `--font-mono` is Monaco.\n- Dense: `--text-base` 14px at `--line-body` 1.45, `--text-ui` 13px (controls, rail, tables, sidebar), `--text-small` 11px (meta, badges, table heads, labels under figures, breadcrumb, footer), `--text-large` 17px (banner lead, prose lead, the brand).\n- Headings are bold and tight: `--weight-heading` and `--weight-display` 700 with `--heading-tracking` -0.2px and `--display-tracking` -1.5px. `--text-display` 40px is the banner title only; `--text-h1` 28px page titles and figures; `--text-h2` 20px dialog and empty-state titles; `--text-h3` 15px card titles. `--weight-ui` 500 for buttons, tabs and rail links; `--weight-bold` 700 for labels, table heads, row heads and list titles. Nothing is uppercase.\n- Surface: small corners (`--radius-control` 2px, `--radius-panel` 3px, `--radius-page` 5px for the banner and template cards, `--radius-pill` 9px for badges). `--border-width` 1px; `--border-width-strong` 3px marks the current rail link, tab and sidebar row. Depth is a flat frame, never a blur: `--shadow-panel` is a 3px ring in the translucent `--color-shadow` around every card, `--shadow-control` a 1px ring around buttons and inputs that grows to 3px on hover, `--shadow-dialog` an 8px ring. `--focus-ring` is `2px dashed`. `--transition` eases ring and background in 0.15s.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: the washes behind a hovered and a current rail link and the rule above the account (`--color-bar-alt-text` at 8%, 14% and 16%), the idle bars of the banner drawing (`--color-inverse` at 18%), the icon plate (`--color-inverse` at 40%), the ghost button border (`--color-inverse-text` at 55%), the hovered inverse button (`--color-inverse-text` at 85%), 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 plot of a small chart (half of `--size-chart`). Idle rail links use `opacity` 0.75, group names 0.6, the banner lead 0.85. Bar heights are percentages. The empty state's outline is dashed.\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 `