{ "id": "v1-fl-1667", "long_id": "v1.flat-design.landing.s01.p06.t06.u07", "name": "Flat design landing", "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": "Flat design is the product-marketing look of 2013 to 2016: full-width bands of solid colour, light-weight sans-serif headings, thin 1px rules and no gloss, bevel, gradient or drop shadow anywhere. Pages are a white header bar, a single-colour hero with white text and two buttons, then alternating white and off-white bands holding a centred fixed column, ending in a dark multi-column footer. Colour does the work that depth did before: one blue for every action, and a few saturated block colours used as flat tiles.", "url": "https://chrono.skin/s/v1-fl-1667", "preview_url": "https://chrono.skin/s/v1-fl-1667/specimen.html", "files": { "STYLE.md": "# Flat design landing\n\n## Summary\n\nFlat design is the product-marketing look of 2013 to 2016: full-width bands of solid colour, light-weight sans-serif headings, thin 1px rules and no gloss, bevel, gradient or drop shadow anywhere. Pages are a white header bar, a single-colour hero with white text and two buttons, then alternating white and off-white bands holding a centred fixed column, ending in a dark multi-column footer. Colour does the work that depth did before: one blue for every action, and a few saturated block colours used as flat tiles.\n\n## Layout\n\n- The page is fluid: every band (`.ds-nav`, `.ds-hero`, `.ds-band`, `.ds-footer`) spans the full viewport and paints its own background. Content sits in a centred column of `--size-page` (960px), designed for a 1280px viewport. Never box the whole page in a frame.\n- Navigation is one white bar at the top, `--size-nav` (64px) tall, with a 1px bottom rule: wordmark left, links next to it, sign-in and a small outlined button on the right.\n- Sections are stacked bands. Alternate `--color-canvas` (white) and `--color-surface-alt` (#f8f8f8); use one `--color-fill-1` band per page for emphasis. Bands touch each other: the gap between them is 0, the space is inside.\n- Columns inside a band: `.ds-band__split` with a main column and a `--size-sidebar` (240px) side column, or two equal halves. Feature rows are 3 or 4 equal columns (`.ds-grid`).\n- Inner pages have no hero. Under the nav comes an off-white (`--color-surface-alt`) head made of two touching pieces: a `.ds-band--tight` strip with the `.ds-breadcrumb`, then `.ds-page-header` (title, one line of description, actions on the right), closed by a 1px rule. The working content follows in white and off-white bands in the same 960px column. A list page puts `.ds-tabs` first in the band directly under the page header, then `.ds-stat`, then the table with its pagination in `.ds-table__foot`. A detail page and a settings page use `.ds-band__split`: the work (table, action row, form) in the main column, small panels and section links in the 240px side column. The dark footer is unchanged.\n- Views. The specimen is an invoicing product with five views. `home` is the landing page: hero, the four feature tiles, running text beside a guide list and a plan panel, the emphasis band and the news list. `pricing` is an inner page with three plan panels and four answered questions. `invoices` is the list page: tabs, the month's figures, the invoice table with pagination and the status legend, and an empty estimates box. `invoice` is one invoice: its line items, the action row, the open send dialog, and amount, history and client in the side column. `settings` is the invoice defaults form with its notices beside the settings links, the last changes and a note. 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.\n- Spacing scale: `--space-1` 4px (inside pills, between a label and its field), `--space-2` 8px (between adjacent controls, button vertical padding), `--space-3` 16px (paragraph gap, cell padding, list row padding), `--space-4` 24px (grid gutter, button horizontal padding, panel padding, page side padding), `--space-5` 32px (between tab items, inset panel padding), `--space-6` 48px (column gap, gap between stacked blocks, footer padding), `--space-7` 80px (top and bottom padding of a band and of the hero).\n- Other sizes: `--size-tile` 160px (height of a colour tile), `--size-icon` 48px, `--size-dialog` 480px.\n- On a phone (760px and below) there is no menu button: `.ds-nav__links` takes a row of its own under the brand, its links spread over the full width and wrapping if they must, and the current link keeps its underline. A drop-down in that row opens under the row, aligned to its right edge, instead of under its own link. 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 white page. Holds bands directly; it has no width of its own.\n- `.ds-band`: full-width section with a `.ds-band__inner` column. Variants `--alt` (off-white), `--strong` (light grey), `--fill` (deep blue, white text), `--tight` (16px padding, for a breadcrumb strip). `.ds-band__title` and `.ds-band__lead` head a band. `.ds-band__split` makes columns from `.ds-band__main`, `.ds-band__side`, `.ds-band__half`; with `--level` the columns end on one line and the last `.ds-panel` of a stacked side column grows to take up the difference; `.ds-band__inset` is the darker flat panel inside a `--fill` band. `.ds-stack` stacks blocks 48px apart (`--tight`: 24px).\n- `.ds-brand`: the site's mark and name, first in the top bar, at the left. `.ds-brand__mark` is a 28px 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-h3` 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 on `--fill-bar`: the `.ds-brand`, `.ds-nav__links` with `.ds-nav__link` (current item: `is-current`, blue with a 2px underline), `.ds-nav__aside` for sign-in and a small button. In the specimen the current item is marked by the view that is showing, with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-hero`: single-colour band under the nav. `.ds-hero__title` (38px, weight 300), `.ds-hero__lead`, `.ds-hero__actions` with one `.ds-button--inverse` and one `.ds-button--ghost`. `.ds-hero__art` is an optional arrangement of flat `.ds-hero__block` rectangles standing in for a product picture. The hero runs edge to edge and has no corners; `--radius-page` rounds its blocks and the grid tiles.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. A full-width off-white strip with a 1px bottom rule; `.ds-page-header__inner` is the 960px column, `.ds-page-header__copy` holds `.ds-page-header__title` (32px, weight 300) and one `.ds-page-header__text` line (18px, weight 300), `.ds-page-header__actions` sits on the right with at most one primary and one `--secondary` button. Place it directly after the breadcrumb strip.\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 and navigation inside content; `--more` appends a small chevron for \"Learn more\" links. `.ds-linkrow` lays links in a row.\n- `.ds-button`: flat blue button, 5px radius, 14px weight 600. Variants: `--secondary` (white with a 1px blue outline), `--danger` (flat `--color-danger` red with white text, for delete and other destructive actions only; one per view), `--inverse` (white, for use on a fill), `--ghost` (transparent with a 1px white outline, on a fill only), `--large`, `--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons 16px apart.\n- `.ds-form`: vertical form. `.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`, `.ds-form__submit` (full-width button).\n- `.ds-table`: data table with horizontal rules only: a 2px rule under the head, 1px between rows, alternate rows off-white, no outer border. `.ds-table__num` right-aligns numbers; `.ds-table__caption` is a small note below. Wrap it in `.ds-table__wrap` so that it scrolls on its own in a narrow window; `.ds-table__foot` is the row under it with the pagination at the left and a legend or count at the right.\n- `.ds-list`: news or post list separated by faint 1px rules. `.ds-list__item` holds `.ds-list__title`, `.ds-list__text`, `.ds-list__meta`.\n- `.ds-panel`: white box with a 1px border and `--radius-panel` corners (square here), a grey `.ds-panel__title` strip and `.ds-panel__body`. `.ds-panel__figure` is a large light numeral (a price or a count). `.ds-plans` sets three panels side by side on a pricing page.\n- `.ds-stat`: row of summary figures on an inner page, three to five across. Each `.ds-stat__item` is a `.ds-stat__figure` (38px, weight 300, the same light numeral as `.ds-panel__figure`) over a small grey `.ds-stat__label`. Items share the width equally and are divided by 1px vertical rules; there is no box, fill or icon around them.\n- `.ds-grid`: four equal columns (`--3` for three). Each `.ds-grid__cell` is a flat colour `.ds-grid__tile` (`--2`, `--3`, `--4` for the other fills) holding a line icon `.ds-grid__icon` on its darker round plate, then `.ds-grid__title`, `.ds-grid__text` and a link below the tile. The cell itself has no border or background.\n- `.ds-tabs`: row of text tabs on a 1px rule; `.ds-tabs__tab` with `is-current` gets a 2px blue underline. No boxes around tabs.\n- `.ds-badge`: fully rounded pill, 12px weight 600. Coral 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 for table rows and record heads: `--success` (green: paid, done, online), `--warning` (amber: due soon, pending), `--danger` (red: overdue, failed), all with white text. `.ds-badgerow` for several.\n- `.ds-sidebar`: unboxed block with `.ds-sidebar__title`, `.ds-sidebar__list` of `.ds-sidebar__item` links and optional `.ds-sidebar__count`; the current row is `is-current`, plain bold text instead of a link.\n- `.ds-notice`: flat pale-blue message strip; `--error` is pale red with a 1px red border. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: row of `.ds-pagination__link`; `is-current` is a filled blue square with 5px corners, `is-disabled` is grey.\n- `.ds-breadcrumb`: 12px grey trail of `.ds-breadcrumb__item` separated by chevrons; the last item is `.ds-breadcrumb__current`.\n- `.ds-dialog`: dimmed block (`--color-overlay`) centring a flat white `.ds-dialog__box` with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body` and right-aligned `.ds-dialog__actions`. Corners are `--radius-panel`, its shadow `--shadow-dialog` (none here).\n- `.ds-empty`: centred message in a 1px bordered box on `--fill-panel`: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button. It stands where a list would be.\n- `.ds-footer`: dark band with `.ds-footer__cols` (four columns of `.ds-footer__title` and `.ds-footer__list` / `.ds-footer__item` / `.ds-footer__link`) and a `.ds-footer__base` row with the copyright and `.ds-footer__legal` links.\n- `.ds-menu`: a drop-down under a navigation item, written as `
`: `.ds-menu__toggle` (the ``, set like a `.ds-nav__link` with a small chevron) and `.ds-menu__list` of `.ds-menu__item` links in a flat `--fill-panel` box with a 1px border, `--radius-panel` corners and `--shadow-dialog` (none here). Use it for the secondary pages a top bar has no room for (help, resources, account). In a narrow window the list spans the bar's width under the wrapped links.\n- `.ds-accordion`: questions that open and close, each a `
` with `.ds-accordion__head` (the ``, `--text-h3`, weight 300, a plus in `--color-link` at the right that becomes a minus when open) and `.ds-accordion__body`. Items are divided by 1px rules, with no boxes or fills. Use it for the questions under a pricing table and for help pages.\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. 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 figure or label in a sentence; never put it inside `.ds-table__wrap`, which would clip it.\n- `.ds-switch`: an on/off control drawn over a checkbox: a `