{ "id": "v1-fl-8535", "long_id": "v1.flat-design.blog.s08.p05.t03.u05", "name": "Flat design personal sheet", "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": "blog", "mode": "mix", "viewport": { "width": 1280, "fluid": true, "responsive": true }, "summary": "This is the personal site of flat design, common from 2013 to 2016 for freelancers, small workshops and their notebooks: one band of solid colour across the top with the name and four links, and a single white sheet pulled up over its lower edge that holds the whole page. The sheet opens with a round flat picture beside a heavy headline, then a strip of figures, then a tinted side column of facts and flat skill bars beside the work and the latest notes. Running text is a serif set generously, headings and controls a heavy sans; corners are barely rounded and the only depth is a one pixel edge under a box.", "url": "https://chrono.skin/s/v1-fl-8535", "preview_url": "https://chrono.skin/s/v1-fl-8535/specimen.html", "files": { "STYLE.md": "# Flat design personal sheet\n\n## Summary\n\nThis is the personal site of flat design, common from 2013 to 2016 for freelancers, small workshops and their notebooks: one band of solid colour across the top with the name and four links, and a single white sheet pulled up over its lower edge that holds the whole page. The sheet opens with a round flat picture beside a heavy headline, then a strip of figures, then a tinted side column of facts and flat skill bars beside the work and the latest notes. Running text is a serif set generously, headings and controls a heavy sans; corners are barely rounded and the only depth is a one pixel edge under a box.\n\n## Layout\n\n- The page is fluid and designed for a 1280px viewport, but the content is one centred `.ds-sheet` of `--size-page` (940px) on the `--fill-page` background. Nothing else spans the viewport except the band at the top and the footer block at the bottom.\n- Navigation is the band: `.ds-nav` on `--color-fill-1` with `--color-inverse-text`, the `.ds-brand` at the left of the 940px column and the links at the right. The band is `--size-overlap` (112px) taller than its content, and the sheet of the showing view is pulled up by the same amount, so the sheet's head lies on colour and its body on the page. The current link is fully opaque over a `--border-width-strong` line; the others are at 70%.\n- The home sheet stacks, top to bottom: `.ds-hero` (a `--size-disc` 120px disc at the left, then a small coloured line, the title at display size, a lead and two buttons, all left-aligned), `.ds-stat` (one tinted strip of four centred figures between two rules), and `.ds-sheet__cols`: a `--size-side` (260px) side column on `--color-surface-alt` closed by a rule at its right, and the main column. The side column holds the `.ds-sidebar` facts, the `.ds-progress` bars and a `.ds-panel`; the main column holds the `.ds-grid` of work cards and the `.ds-list` of notes, each under a `.ds-sheet__title` with one link at its right.\n- Inner pages have no hero and no figure strip. The sheet opens with `.ds-page-header` on `--color-surface-alt`: the `.ds-breadcrumb` first, then the page title with one line of description at the left and the actions at the right on the same baseline, closed by a rule. Below, the same `.ds-sheet__cols`: filters, a label key or the contents of a note in the side column; in the main column `.ds-tabs` standing on the table with the pagination under it, or the list of notes, or the running text with its links and action row, or the notices, the form and the dialog. The footer is unchanged.\n- Views. The specimen is a two-person sign painting workshop with five views. `home` is the introduction: picture and headline, four figures, facts, skill bars and the day rate at the left, four pieces of recent work and three notes at the right. `work` is the list page: kinds, the label key and the next free week at the left, year tabs on the commission table with its pagination and the empty waiting list at the right. `notes` is the notebook: subjects and the most read note beside five notes and the pagination. `note` is one note: its contents, author and further reading beside the text, the links and the action row. `contact` is the enquiry page: workshop hours and a hint beside the notices, the form and the open dialog. Below 760px the side column goes under the main one, the disc stands above the headline, the figures fold to two across, the work cards to one column, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does.\n- Spacing scale: `--space-1` 3px (between a label and its field, under a title line, pagination gaps), `--space-2` 7px (button and table cell vertical padding, between badges, sidebar rows, the height of a bar), `--space-3` 14px (paragraph gap, cell horizontal padding, list row padding, between buttons), `--space-4` 21px (button horizontal padding, panel and card padding, page side padding, between cards), `--space-5` 28px (between stacked blocks, side column padding, between navigation links), `--space-6` 42px (hero and main column padding, under the sheet, the brand mark), `--space-7` 70px (least height of a text area).\n- Other sizes: `--size-date` 56px (the date block of a note), `--size-tile` 126px (the colour block of a work card), `--size-icon` 42px, `--size-dialog` 420px.\n- On a phone (760px and below) there is no menu button: `.ds-nav__links` takes the full width under the brand with its links spread over it, and the current link keeps its mark. A drop-down in the links opens under them, aligned to the left 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. Holds the band, the views and the footer.\n- `.ds-sheet`: the one box of a view, on `--color-canvas` with a border, `--radius-page` and `--shadow-panel`. `.ds-sheet__cols` splits it into `.ds-sheet__side` and `.ds-sheet__main` (`--wide`: no side column); both stack their blocks 28px apart. `.ds-sheet__title` heads a block in the main column and may hold one `.ds-link` at its right.\n- `.ds-brand`: the site's mark and name, at the left of the band. `.ds-brand__mark` is a 42px tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) inside a faint ring, holding the mark as inline SVG; `.ds-brand__name` is the name in the heading font at `--text-h2` and `--weight-bold` in `--color-inverse-text`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the band: `.ds-nav__inner` with the brand and `.ds-nav__links` of `.ds-nav__link` (current item: `is-current`). 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`: head of the home sheet. `.ds-hero__disc` with a `.ds-hero__icon`, then `.ds-hero__copy` with `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` (one primary and one `--secondary` button, both `--large`).\n- `.ds-page-header`: head of an inner sheet, used instead of `.ds-hero`. The breadcrumb, then `.ds-page-header__inner` with `.ds-page-header__copy` (`.ds-page-header__title`, one `.ds-page-header__text` line) and `.ds-page-header__actions`.\n- `.ds-prose`: running text in the serif: 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; `--more` appends a small chevron. `.ds-linkrow` lays links in a row.\n- `.ds-button`: flat button. Variants: `--secondary` (outlined), `--danger` (flat `--color-danger`, for destructive actions only; one per view), `--inverse` and `--ghost` (on a fill only), `--large`, `--small`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\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`.\n- `.ds-table`: compact data table in the UI font: a `--color-surface-strong` head over a strong rule, 1px rules between rows, alternate rows tinted. `.ds-table__num` right-aligns numbers; `.ds-table__caption` is a small note below. Wrap it in `.ds-table__wrap`; `.ds-table__foot` holds the pagination.\n- `.ds-list`: notes. Each `.ds-list__item` is a `.ds-list__date` block (`.ds-list__day` over the month) beside a `.ds-list__body` with `.ds-list__title`, `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: small box under a strong top edge in `--color-button`: `.ds-panel__title`, `.ds-panel__body`, optional `.ds-panel__figure`. It belongs in the side column.\n- `.ds-stat`: the strip of four figures across the sheet. Each `.ds-stat__item` centres a `.ds-stat__figure` over a small `.ds-stat__label`; items are divided by 1px rules.\n- `.ds-grid`: two columns of `.ds-grid__cell` cards, each a `.ds-grid__tile` block (`--2`, `--3`, `--4` for the other fills) with a `.ds-grid__icon` on its plate over `.ds-grid__copy` with `.ds-grid__title` and `.ds-grid__text`. A cell may be a link.\n- `.ds-tabs`: joined outlined cells; `.ds-tabs__tab` with `is-current` is tinted over a strong lower edge in `--color-button`. It stands directly on the table.\n- `.ds-badge`: small tag with `--radius-pill` corners. `--alt`, `--quiet`, and the status variants `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: block for the side column: `.ds-sidebar__title`, `.ds-sidebar__list` of ruled `.ds-sidebar__item` rows with optional `.ds-sidebar__count`; the current row is `is-current`.\n- `.ds-notice`: message strip with a strong left edge; `--error` is `--color-danger-surface` with a danger border. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: row of `.ds-pagination__link`; `is-current` is filled like the primary button, `is-disabled` is grey.\n- `.ds-breadcrumb`: small trail of `.ds-breadcrumb__item` separated by chevrons; the last item is `.ds-breadcrumb__current`.\n- `.ds-dialog`: dimmed block (`--color-overlay`) centring a `.ds-dialog__box` with `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body` and right-aligned `.ds-dialog__actions`.\n- `.ds-empty`: centred message in an outlined box: `.ds-empty__icon`, `.ds-empty__title`, `.ds-empty__text` and one button. It stands where a list would be.\n- `.ds-footer`: the inverted block under the page: `.ds-footer__inner` centres the `.ds-footer__name`, a row of `.ds-footer__links` with `.ds-footer__link`, and the `.ds-footer__base` line.\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 navigation on the first fill: the toggle is `--color-inverse-text` at 70% like the links, and the list hangs from its right edge. In a narrow window 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 in the side column for the questions asked before writing; the heads are bold at `--text-base`.\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 trade word in running text. Never put it inside `.ds-table__wrap`, which would clip it.\n- `.ds-switch`: an on/off control drawn over a checkbox: a `