{ "id": "v1-fl-776b", "long_id": "v1.flat-design.landing.s07.p07.t06.u11", "name": "Flat design conference", "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 event site of flat design, common from 2013 to 2016 for conferences, meetups and festivals: a poster in two flat blocks with the dates set very large on one and the title on the other, then a page cut into numbered sections, each with a narrow label column at the left and its content at the right. Type is condensed, bold and uppercase for headings, labels and buttons, with plain running text beside it; buttons are pills, some of them only a 2px outline. Nothing has gloss, gradient or a blurred shadow, and colour comes as whole blocks, a ribbon of the four fills and one strong rule above every label.", "url": "https://chrono.skin/s/v1-fl-776b", "preview_url": "https://chrono.skin/s/v1-fl-776b/specimen.html", "files": { "STYLE.md": "# Flat design conference\n\n## Summary\n\nThis is the event site of flat design, common from 2013 to 2016 for conferences, meetups and festivals: a poster in two flat blocks with the dates set very large on one and the title on the other, then a page cut into numbered sections, each with a narrow label column at the left and its content at the right. Type is condensed, bold and uppercase for headings, labels and buttons, with plain running text beside it; buttons are pills, some of them only a 2px outline. Nothing has gloss, gradient or a blurred shadow, and colour comes as whole blocks, a ribbon of the four fills and one strong rule above every label.\n\n## Layout\n\n- The page is fluid and designed for a 1280px viewport. The poster (`.ds-hero`), the sections, the page header and the footer span the viewport and paint their own background; content sits in a centred column of `--size-page` (1080px) with `--space-4` (24px) at each side. There is no boxed page frame.\n- Navigation is a centred stack on `--fill-bar`: a thin `--fill-bar-alt` note strip (`.ds-nav__note`) with the dates at the left and one link at the right, then the `.ds-brand` alone in the middle, then the links in one centred row under a 1px rule. The current link is in `--color-link` and carries a line on the rule above it. There is no button in the header.\n- The home page opens with the poster: `.ds-hero` is a grid of one part to two. The left part is the inverted block (`--fill-inverse`) with the days at twice the display size, right-aligned; the right part is `--color-fill-1` with a small label, the title, a lead and two pill buttons, left-aligned. Under it lies `.ds-ribbon`, the four fills as one 12px stripe.\n- Everything below is a `.ds-section`, on `--color-canvas` and `--color-surface-alt` in turn. `.ds-section__inner` is a grid of a `--size-label` (220px) label column and the body, `--space-6` (60px) apart. The label column starts with a `--border-width-strong` rule in `--color-button` and holds a small number, the section title and one or two lines; the body holds the work. Sections touch each other; the space (`--space-7`, 96px) is inside. One `.ds-section--fill` on `--color-fill-1` closes the home page with a sentence and one button.\n- Inner pages have no poster and no ribbon. Under the navigation comes `.ds-page-header` on `--color-surface-alt`, cut into the same columns: the `.ds-breadcrumb` under its strong rule in the label column, the page title with one line of description in the body, the actions at the right on the same baseline. The sections follow. On a list page the label column holds the `.ds-sidebar` filter and the label key, and the body holds `.ds-tabs` standing on the table, with the pagination in `.ds-table__foot`. On a detail page the label column holds the neighbouring items and a small panel, the body the running text, the links, the action row and the dialog. A form page puts its plans in one section and the notices and form in the next.\n- Views. The specimen is a two-day conference on type and interface with four views. `home` is the poster, the idea with its four figures, the four themes, Thursday's programme and the two passes. `schedule` is the list page: themes and label key at the left, day tabs on the session table with its pagination, then the empty box for the visitor's own picks. `talk` is one session: the same morning and the speaker at the left, the description, links, the action row and the open workshop dialog at the right. `tickets` is the booking page: three passes, then the notices and the details form beside a short link list. Below 760px the label column lies above its body, the poster stacks with the dates first, grids and plans fold to one column, the figures to two, and a wide table scrolls sideways inside `.ds-table__wrap` while the page itself never does.\n- Spacing scale: `--space-1` 6px (between a label and its field, between tabs, sidebar rows), `--space-2` 12px (button vertical padding, between adjacent buttons and badges, the ribbon's height), `--space-3` 18px (paragraph gap, table cell and list row padding, above a label), `--space-4` 24px (page side padding, button horizontal padding, panel padding, between panels), `--space-5` 36px (between stacked blocks, between grid cells, the brand mark), `--space-6` 60px (between the label column and the body, the poster's inner padding, footer padding), `--space-7` 96px (section padding).\n- Other sizes: `--size-date` 320px (least width of the poster's date block), `--size-time` 96px (the time column of the programme), `--size-chip` 84px (colour chip of a theme), `--size-icon` 44px, `--size-dialog` 460px.\n- On a phone (760px and below) there is no menu button: `.ds-nav__links` stays a row of links with a `--space-4` gap and the current link keeps its mark, and `.ds-nav__note` has tighter padding. A drop-down in the links opens as a full row under them, inset by `--space-3` at each side. 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- `--border-width` 1px, `--border-width-strong` 2px for the current item.\n- Soft corners everywhere: `--radius-control` 4px, `--radius-panel` 6px, `--radius-pill` 500px for badges, `--radius-page` 8px for tiles, pictures and grid boxes.\n- This is the late, softened flat of 2015 and 2016: panels lift off the tinted page with `--shadow-panel` `0 1px 3px 0` in the faint `--color-shadow`, and a dialog floats on `--shadow-dialog` `0 12px 32px 0`. Controls and text stay shadowless.\n- `--fill-button` is the flat `--color-button`, hovered mixed 15% with white; `--fill-button-secondary` is `transparent`, so the secondary button is an outline on whatever it stands on. `--focus-ring` is a soft halo: `3px solid` in `--color-focus` at 40%. `--transition` fades colour, background and border colour in 0.3s.\n\n## Components\n\n- `.ds-page`: on ``. Sets the font, text colour and page fill. Holds the header, the views and the footer; it has no width of its own.\n- `.ds-section`: full-width strip with a `.ds-section__inner` grid of `.ds-section__label` (`.ds-section__number`, `.ds-section__title`, `.ds-section__text`) and `.ds-section__body`. Variants `--alt` and `--fill`. `.ds-section__lead` is the large first sentence of a body; `.ds-section__call` sets a sentence and a button on one line. `.ds-stack` stacks blocks 36px apart (`--tight`: 24px); `.ds-cols` is a two to one split inside a body.\n- `.ds-brand`: the site's mark and name, alone in the middle of the header. `.ds-brand__mark` is a 36px tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--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` in `--color-heading`. The name and the mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the header: `.ds-nav__note` with an optional `.ds-nav__note-link`, `.ds-nav__inner` with the brand, and `.ds-nav__links` with `.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`: the poster. `.ds-hero__date` holds `.ds-hero__days`, `.ds-hero__month` and `.ds-hero__place`; `.ds-hero__copy` holds `.ds-hero__kicker`, `.ds-hero__title`, `.ds-hero__lead` and `.ds-hero__actions` with one `.ds-button--inverse` and one `.ds-button--ghost`. `.ds-ribbon` with four `.ds-ribbon__part` (`--2`, `--3`, `--4`) follows it. Under 1040px the dates are set at 1.4 times `--text-display` so that they stay inside their block.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`. `.ds-page-header__inner` holds `.ds-page-header__trail` (the breadcrumb), `.ds-page-header__copy` with `.ds-page-header__title` and one `.ds-page-header__text` line, and `.ds-page-header__actions` with at most one primary and one `--secondary` button.\n- `.ds-prose`: running text in a 68ch measure: 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. `.ds-linkrow` lays links in a row.\n- `.ds-button`: pill button in the UI font. Variants: `--secondary` (outline), `--danger` (flat `--color-danger`, for destructive actions only; one per view), `--inverse` (on a fill), `--ghost` (outline 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`: data table with horizontal rules only: a strong rule under the head, alternate rows on `--color-surface-alt`. `.ds-table__num` right-aligns numbers; `.ds-table__caption` is a small note below. Wrap it in `.ds-table__wrap`; `.ds-table__foot` is the row under it with the pagination at the left.\n- `.ds-list`: the programme. Each `.ds-list__item` is a row of `.ds-list__time`, a `.ds-list__body` with `.ds-list__title`, optional `.ds-list__text` and `.ds-list__meta`, and one badge at the right.\n- `.ds-panel`: outlined box on `--fill-panel` with `--shadow-panel`; `.ds-panel__title` stands on a faint rule, `.ds-panel__body` below. `.ds-panel__figure` is a price at display size. `.ds-plans` sets three panels side by side (`--2`: two).\n- `.ds-stat`: the row of four figures. Each `.ds-stat__item` hangs from a strong rule: `.ds-stat__figure` at display size over a small `.ds-stat__label`. No boxes and no icons.\n- `.ds-grid`: two columns of `.ds-grid__cell`, each a square `.ds-grid__tile` chip (`--2`, `--3`, `--4` for the other fills) with a `.ds-grid__icon` on its plate, beside `.ds-grid__copy` with `.ds-grid__title`, `.ds-grid__text` and a link.\n- `.ds-tabs`: blocks on a strong rule in `--color-button`; `.ds-tabs__tab` is a `--color-surface-strong` block and `is-current` is filled like the primary button.\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`: unboxed block for the label 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`: flat message strip; `--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. `.ds-footer__cols` holds the `.ds-footer__name` with one `.ds-footer__text` line in the label column and three columns of `.ds-footer__title` and `.ds-footer__list` / `.ds-footer__item` / `.ds-footer__link`; `.ds-footer__base` is the last row with `.ds-footer__legal` links.\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 centred row of links, \"More\", for the pages the row has no room for. In a narrow window the list spans the row.\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 passes for refunds and other questions before booking; the heads are set in the heading style at `--text-h3`.\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 a condition in one sentence. Never put it inside `.ds-table__wrap`, which would clip it.\n- `.ds-switch`: an on/off control drawn over a checkbox: a `