{ "id": "v1-fl-445a", "long_id": "v1.flat-design.landing.s04.p04.t05.u10", "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-445a", "preview_url": "https://chrono.skin/s/v1-fl-445a/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 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- Thick lines: `--border-width` 2px for every rule and outline, `--border-width-strong` 3px for the current item.\n- `--radius-control` and `--radius-panel` 6px, `--radius-pill` 4px (badges are rounded tags, not pills), `--radius-page` 0.\n- Everything that can be picked up stands on a hard lower edge, after the 2015 board-tool page: `--shadow-control` and `--shadow-control-hover` are `0 2px 0 0` in `--color-shadow` under buttons and inputs, `--shadow-panel` the same under panels, `--shadow-dialog` `0 4px 0 0` under a dialog; pressed is `none`. No shadow is blurred and text has none.\n- Buttons are solid: `--fill-button` is the flat `--color-button`, hovered mixed 20% with white; `--fill-button-secondary` is the solid `--color-button-secondary`. `--focus-ring` is `2px solid` 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 `