{ "id": "v1-fl-8564", "long_id": "v1.flat-design.blog.s08.p05.t06.u04", "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-8564", "preview_url": "https://chrono.skin/s/v1-fl-8564/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 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. 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 `