{ "id": "v1-fl-4536", "long_id": "v1.flat-design.landing.s04.p05.t03.u06", "name": "Flat design app page", "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": "landing", "mode": "mix", "viewport": { "width": 1280, "fluid": true, "responsive": true }, "summary": "This is the app page of flat design, common from 2013 to 2016 for mobile apps and small team tools: a hero cut into two flat halves with a sign-up field on one and a long-shadow emblem on the other, a dark strip of figures, then a flat phone with feature callouts pointing at it from both sides and three plan cards with the middle one raised. Icons are white silhouettes on solid colour chips, each casting a hard 45 degree shadow to the lower right; there is no gloss, gradient or blurred drop shadow anywhere. The navigation is symmetric, with the wordmark in the middle of the bar, and the page ends in one centred dark footer.", "url": "https://chrono.skin/s/v1-fl-4536", "preview_url": "https://chrono.skin/s/v1-fl-4536/specimen.html", "files": { "STYLE.md": "# Flat design app page\n\n## Summary\n\nThis is the app page of flat design, common from 2013 to 2016 for mobile apps and small team tools: a hero cut into two flat halves with a sign-up field on one and a long-shadow emblem on the other, a dark strip of figures, then a flat phone with feature callouts pointing at it from both sides and three plan cards with the middle one raised. Icons are white silhouettes on solid colour chips, each casting a hard 45 degree shadow to the lower right; there is no gloss, gradient or blurred drop shadow anywhere. The navigation is symmetric, with the wordmark in the middle of the bar, and the page ends in one centred dark footer.\n\n## Layout\n\n- The page is fluid and designed for a 1280px viewport. Every strip (`.ds-nav`, `.ds-hero`, `.ds-stat`, `.ds-band`, `.ds-page-header`, `.ds-footer`) spans the viewport and paints its own background; content sits in a centred column of `--size-page` (1140px) with `--space-5` (30px) at each side. Never box the whole page in a frame.\n- Navigation is one `--fill-bar` bar, `--size-nav` (70px) tall, with a 1px bottom rule and three zones: section links at the left, the wordmark exactly in the middle, the sign-in link and one small button at the right. The current link carries a 2px line on the top edge of the bar.\n- The hero is one `--color-fill-1` strip split 58 to 42: the left part holds a small pill line, the title, a lead and the `.ds-signup` row (one field, one white button); the right part is a darker shade of the same fill that runs to the viewport edge and holds one round emblem of `--size-disc` (300px). Text in the hero is left-aligned.\n- Directly under the hero comes `.ds-stat`, a `--fill-bar-alt` strip of four centred figures. Then `.ds-band` sections on `--color-canvas` and `--color-surface-alt` in turn, each headed by a centred `.ds-band__head`: the feature `.ds-grid` (two cells, the phone, two cells), the three plan cards in `.ds-plans`, a 7 to 5 `.ds-cols` row with running text at the left and the `.ds-list` timeline at the right, and one centred `.ds-quote`.\n- Inner pages have no hero and no stat strip. Under the nav comes `.ds-page-header`, a `--color-fill-1` strip that holds, top to bottom, the `.ds-breadcrumb`, the page title with its one line of description and the actions at the right, and, on a list page, the `.ds-tabs` standing on its lower edge so that the current tab joins the white content below (a page without tabs adds `--plain`). The content band is `.ds-cols--tight`: a main column at the left and a `--size-sidebar` (300px) column at the right. The main column stacks the notices, the table with its pagination and note underneath, an action row, or a form inside a `.ds-panel--plain`; the right column holds the `.ds-sidebar` list group and small plain panels. A text page uses the 7 to 5 `.ds-cols` row instead. The footer is unchanged.\n- Views. The specimen is a shift-handover app with five views. `home` is the app page: the split hero, the figure strip, the phone with its four feature cells, the three plan cards and one quotation. `news` is a text page: why the app is built as it is, beside the timeline of versions. `handovers` is the list page: tabs on the page header, notices, the week's table with pagination, an empty box for templates, and the site list and label key in the right column. `handover` is one shift: its lines, the action row and the open closing dialog, with the shift's count and the last note at the right. `settings` is the site's settings form in a plain panel beside the settings links. Below 760px the columns stack, the navigation wraps under the brand, grids fold to two columns or one, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does. The split hero becomes one column and the phone leads its feature cells.\n- Spacing scale: `--space-1` 5px (between a label and its field, small button and pagination vertical padding, between tabs), `--space-2` 10px (button and input vertical padding, between adjacent buttons, table cell vertical padding), `--space-3` 15px (paragraph gap, between form rows, cell and input horizontal padding, title strips), `--space-4` 20px (button horizontal padding, plain panel padding, between a chip and its text), `--space-5` 30px (page side padding, column gutter, plan card padding, between stacked blocks), `--space-6` 60px (between text columns, between feature cells, under a band head, compact band padding, footer padding), `--space-7` 90px (band and hero padding).\n- Other sizes: `--size-measure` 480px (the sign-up row; with the sidebar width it also gives the 780px measure of a band head and the quotation), `--size-chip` 60px (icon chip), `--size-phone` 250px and `--size-screen` 400px (the device), `--size-avatar` 50px, `--size-dialog` 440px.\n- On a phone (960px and below) there is no menu button: the bar wraps, the `.ds-nav__links--end` group stays on the first row and the main `.ds-nav__links` take a row of their own, centred and then (760px and below) spread over the full width; the current link is marked by a `--color-link` line under it. A drop-down in that row opens under the row, aligned to its right edge. 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 2014 corporate home page (one blue, black text, grey bands and saturated product tiles); the purple and yellow are read from its screenshot.\n- `--color-page`, `--color-canvas` and `--color-surface` are white `#ffffff`; `--color-surface-alt` `#f0f0f0` is the alternate band and row, the plain tile, the page-header strip, the rail and the footer; `--color-surface-strong` `#e0e0e0` is the table head, the panel title strip, the idle tabs and the second plain tile. `--color-bar` `#eeeeee` with `--color-bar-text` `#1a1a1a` is the header. `--color-bar-alt` `#1570a6` with `--color-bar-alt-text` `#ffffff` is the breadcrumb toolbar; nothing else is put on it and its text takes no other colour.\n- Text and headings are near-black `#1a1a1a` (`--color-text`, `--color-heading`); `--color-heading-alt` is `#000000` (panel and sidebar titles, h3); meta text is `--color-text-muted` `#969696`.\n- `--color-button`, `--color-link`, `--color-link-visited` and `--color-focus` are the one blue `#1570a6`; hover is the darker `--color-link-hover` `#106088`, active `#1a1a1a`. Quiet links are `#1a1a1a`. The secondary button is blue text and outline on a grey block. The current tab, the current page number, the line under the tabs and the current rail marker are `--color-button`.\n- `--color-fill-1` `#108010` (green) is the first tile and the title tile of an inner page; `--color-fill-4` `#5133ab` (purple) is the other fill that carries text. Text on either, and on `--color-inverse` `#1a1a1a`, is `--color-inverse-text`. `--color-fill-2` `#e04000` (orange) and `--color-fill-3` `#1570a6` (blue) are icon tiles: an icon only, never running text, and the icon (`.ds-grid__icon`) sits on a round plate, `--color-inverse` mixed in at 40%, so that the layout stays readable when the palette is exchanged for one whose second or third fill is pale. On a fill the button is `.ds-button--inverse`: `--color-inverse-text` with `--color-fill-1` text.\n- `--color-accent` `#5133ab` (purple, white text) is the default tag, `--color-accent-alt` `#ffbb00` (yellow) the second: a 30% tint of it over `--color-surface` with a yellow outline and `--color-heading` text. Status: `--color-success` `#108010`, `--color-warning` `#e04000`, `--color-danger` `#e81020`, all with `--color-accent-text`.\n- `--color-notice` `#e8f0f0` with `--color-notice-text` `#106088`; the error notice is red on `--color-danger-surface` `#f8f8f8` with a red border.\n- Borders: `--color-border` `#d8e0e0` (table grid, panel outline, rail edge), `--color-border-muted` `#e0e0e0`; `--color-border-strong` and `--color-input-border` are the mid grey `#969696` (control outlines, the rule above a news item). The footer is light: `--color-surface-alt` with `--color-link` links and `--color-heading` titles; `--color-inverse` appears only as a tile (one mosaic tile and one stat).\n- One plain humanist sans at regular weight, after the 2014 payments page with the sizes of the corporate home page: `--font-body`, `--font-heading` and `--font-ui` are Source Sans Pro, Lucida Grande, Segoe UI (the references used Segoe UI and commercial faces). `--font-mono` is Consolas.\n- Dense: `--text-base` and `--text-ui` 14px at `--line-body` 1.5, `--text-small` 12px (meta, tags, breadcrumb, footer base), `--text-large` 16px (lead lines, news titles, footer titles).\n- Headings are regular weight and modest: `--weight-heading` and `--weight-display` 400; `--text-display` 38px (the first tile's title and the stat figures), `--text-h1` 26px (band titles, the inner page title, the dialog title), `--text-h2` 20px (tile titles, the quotation, the wordmark), `--text-h3` 16px. Hierarchy is size only.\n- `--weight-ui` is 400: buttons, tabs and navigation are not bold. `--weight-bold` 600 is for labels, table heads and row heads, news titles, panel and sidebar titles and the \"more\" link in a tile.\n- Sentence case, no tracking: `--ui-transform` and `--heading-transform` are `none`, both tracking tokens 0. All three link decorations are `none`.\n- Everything is square: `--radius-control`, `--radius-panel`, `--radius-page` and also `--radius-pill` are 0, so badges are rectangular tags. The mosaic parts its tiles by half of `--radius-page`, which is nothing here: with a rounder surface set the tiles separate just enough for their corners to read.\n- Buttons are solid: `--fill-button` is the flat `--color-button`, hovered 15% darker and ringed by `--shadow-control-hover`, a hard 1px line in `--color-border-strong`. The secondary button is a grey block: `--fill-button-secondary` is `--color-button-secondary` darkened 12%, inside a 2px outline. Panels and the dialog band are `--fill-panel`, the grey `--color-surface-alt`.\n- Lines are heavy: `--border-width` 2px for rules, the table grid and control outlines; `--border-width-strong` 4px for the current navigation item, the line under the tabs, the rule above a news item and the current rail marker.\n- One-off shades made with `color-mix()` because the vocabulary has no token: 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 lead in the first tile, the source line under the quotation and idle breadcrumb links use `opacity: 0.8`.\n- Nothing is blurred and nothing casts a shadow at rest: apart from the hover ring every shadow is `none`, every fill a flat colour. `--focus-ring` is `1px dotted` in `--color-focus`. `--transition` is `none`.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and page fill. It has no width of its own.\n- `.ds-band`: full-width section with a `.ds-band__inner` column. Variants `--alt` (off-white) and `--compact` (60px padding). `.ds-band__head` centres a `.ds-band__title` and a `.ds-band__lead` above the content. `.ds-cols` lays columns out: `.ds-cols__wide` with `.ds-cols__narrow` (7 to 5), `.ds-cols__main` with `.ds-cols__side` (300px, on the right), or two `.ds-cols__half`; `.ds-cols--tight` narrows the gutter to 30px. `.ds-stack` stacks blocks 30px apart.\n- `.ds-brand`: the site's mark and name, exactly in the middle of the top bar. `.ds-brand__mark` is a 30px tile dressed like the primary button (`--fill-button`, `--color-button-text` for the drawing, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-h2` and `--weight-bold` (not the heading weight: the light headings of several token sets are too weak beside the tile) in `--color-heading`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the top bar. `.ds-nav__links` with `.ds-nav__entry` and `.ds-nav__link` at the left (current item: `is-current`; the specimen marks it by the view that is showing, one `:has()` rule per view), the `.ds-brand` in the middle, a second `.ds-nav__links--end` list at the right for sign-in and one `.ds-button--small`. Under 960px the bar is two rows, the brand with the account links and then the navigation, and the current item is marked by a rule under its text instead of the one on the bar's upper edge; the features of `.ds-grid` stack under the phone from the same width.\n- `.ds-hero`: the split fill strip. `.ds-hero__copy` holds `.ds-hero__kicker` (optional pill line), `.ds-hero__title`, `.ds-hero__lead` and the `.ds-signup` row (`.ds-signup__input`, a `.ds-button--inverse ds-button--large`, `.ds-signup__note`). `.ds-hero__side` holds one `.ds-hero__disc` with a long-shadow drawing (`.ds-hero__art`). One hero per site, on the home page only.\n- `.ds-shade`, `.ds-tint`: colour helpers for parts of an inline SVG. `.ds-shade` is the long shadow and grey detail, `.ds-tint` a detail in `--color-fill-1`.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. `.ds-page-header__inner` is the column; put the `.ds-breadcrumb` first, then `.ds-page-header__row` with `.ds-page-header__copy` (`.ds-page-header__title`, one `.ds-page-header__text` line) and `.ds-page-header__actions` (one `--ghost` and one `--inverse` button at most), then `.ds-tabs--onfill` last.\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`, `is-active`, `is-focus`. `--quiet` for meta links. `.ds-linkrow` lays links in a row.\n- `.ds-button`: flat button, 4px radius, 15px weight 700. Variants: `--secondary` (white with a 1px outline), `--danger` (flat red, destructive actions only), `--inverse` (white, on a fill), `--ghost` (outlined, on a fill only), `--large`, `--small`, `--block`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons 10px apart.\n- `.ds-form`: stacked labels. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`, all with a 2px outline and the control lip. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, and `.ds-form__actions` (right-aligned, above a 1px rule). Place a form inside a `.ds-panel--plain`.\n- `.ds-table`: boxed data table with 4px corners, a `--color-surface-strong` head in small bold type, 1px rules between rows and alternate rows off-white. `.ds-table__num` right-aligns numbers; a row head that opens a detail page holds a `.ds-table__link`. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window. `.ds-tablefoot` sits under it with the pagination at the left and `.ds-tablefoot__note` at the right.\n- `.ds-list`: a timeline for news and changes: a 2px rule down the left and one accent dot per `.ds-list__item`, which holds `.ds-list__meta` (date first), `.ds-list__title` and `.ds-list__text`.\n- `.ds-panel`: a card with a `.ds-panel__title` strip and `.ds-panel__body`. As a plan card inside `.ds-plans` (three across, centred text) it holds `.ds-panel__figure`, `.ds-panel__unit`, a `.ds-panel__rows` list of `.ds-panel__line` and one button; `.ds-panel--featured` is the raised middle plan with an accent strip. `.ds-panel--plain` is the left-aligned working panel of inner pages.\n- `.ds-stat`: the strip of summary figures; it is the row. `.ds-stat__inner` is a list of four `.ds-stat__item`, each a `.ds-stat__figure` over a `.ds-stat__label`. Use it once, directly under the hero or directly under a page header.\n- `.ds-grid`: the feature layout: `.ds-grid__col--start` (two cells, text right-aligned), the `.ds-phone`, `.ds-grid__col` (two cells). A `.ds-grid__cell` is a `.ds-grid__chip` (`--2`, `--3`, `--4` for the other fills) with a `.ds-grid__icon`, and a `.ds-grid__body` with `.ds-grid__title` and `.ds-grid__text`.\n- `.ds-phone`: the flat device, drawn with blocks only: `.ds-phone__screen`, `.ds-phone__bar`, rows of `.ds-phone__row` with a `.ds-phone__dot` and `.ds-phone__lines` of `.ds-phone__line`, and `.ds-phone__action`.\n- `.ds-quote`: one centred testimonial: `.ds-quote__text`, then `.ds-quote__by` with a `.ds-avatar`, `.ds-quote__name` and `.ds-quote__role`.\n- `.ds-tabs`: folder tabs on a 1px rule; `.ds-tabs__tab` with `is-current` is boxed and open at the bottom. `.ds-tabs--onfill` is the form used in the page header: white text, and the current tab is a `--color-canvas` block. `.ds-tabs__count` is a faint number after the label.\n- `.ds-badge`: fully rounded pill, 13px weight 700. Accent by default, `--alt` a 30% tint of `--color-accent-alt` over `--color-surface` with a `--border-width` outline in the full colour and `--color-heading` text (the text never lies on the accent itself, so the second accent may be light or dark), `--quiet` grey for counts. Status variants `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a boxed list group in the right column: `.ds-sidebar__title` strip, `.ds-sidebar__list` of `.ds-sidebar__item` rows, each a link and an optional `.ds-badge--quiet` count; the current row is `is-current`.\n- `.ds-notice`: flat message strip with a 2px left edge; `--error` for errors. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: one joined group of bordered `.ds-pagination__item` cells holding `.ds-pagination__link`; `is-current` is filled with the button colour, `is-disabled` is grey.\n- `.ds-breadcrumb`: 13px trail of `.ds-breadcrumb__item` separated by slashes, links are `.ds-breadcrumb__link`, the last item is `.ds-breadcrumb__current`. Inside the page header it takes the header's text colour.\n- `.ds-dialog`: dimmed block (`--color-overlay`) centring a flat `.ds-dialog__box` with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`) above a 1px rule, `.ds-dialog__body` and an off-white `.ds-dialog__actions` strip with the buttons at the right.\n- `.ds-empty`: centred message in a 2px dashed outline: `.ds-empty__chip` (a grey disc with a long-shadow icon), `.ds-empty__title`, `.ds-empty__text` and one button.\n- `.ds-footer`: one centred stack on `--fill-inverse`: `.ds-footer__brand`, a `.ds-footer__links` row of `.ds-footer__link`, a `.ds-footer__social` row of round `.ds-footer__chip` outlines with a `.ds-footer__glyph`, and the `.ds-footer__base` line above a faint rule.\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 last item of the left navigation, \"More\", and holds the settings and the other secondary pages; its toggle carries the current mark (`is-current`) when one of them is showing. In a window under 960px the list spans the row of links.\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 under the plans for the questions asked before signing up; `.ds-plans + .ds-accordion` is centred at the quote's width.\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 word of a plan or a figure. Never put it inside `.ds-table__wrap`, which would clip it.\n- `.ds-switch`: an on/off control drawn over a checkbox: a `