{ "id": "v1-te-69b3", "long_id": "v1.table-era-90s.landing.s06.p09.t11.u03", "name": "Table-era software company site, 1998", "era": { "slug": "table-era-90s", "code": "te", "name": "Table-era web", "years": [ 1996, 2000 ], "description": "The first commercial web, 1996 to 2000: narrow fixed pages built from tables, blue underlined links on white or grey, Times and Arial at their default sizes, bevelled form buttons, and flat colour strips where a designer wanted emphasis." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 800, "fluid": false }, "summary": "The site of a software company or an institution as built between 1996 and 2000: a fixed 740px page with the name and a jump menu at the top, one row of equal navigation cells under a heavy rule, a product band, and link lists set in equal columns with a hairline under every link. Text is small Verdana, 11px with 10px small print, under regular-weight Georgia headings, on one saturated gold ground with white boxes, black rules and black inverted blocks; links are dark navy and underlined. It was the look of company, product and department sites in the years when a site was a brochure with a download page, before wider stylesheet layouts replaced it after 2000.", "url": "https://chrono.skin/s/v1-te-69b3", "preview_url": "https://chrono.skin/s/v1-te-69b3/specimen.html", "files": { "STYLE.md": "# Table-era software company site, 1998\n\n## Summary\n\nThe site of a software company or an institution as built between 1996 and 2000: a fixed 740px page with the name and a jump menu at the top, one row of equal navigation cells under a heavy rule, a product band, and link lists set in equal columns with a hairline under every link. Text is small Verdana, 11px with 10px small print, under regular-weight Georgia headings, on one saturated gold ground with white boxes, black rules and black inverted blocks; links are dark navy and underlined. It was the look of company, product and department sites in the years when a site was a brochure with a download page, before wider stylesheet layouts replaced it after 2000.\n\n## Layout\n\n- The page is fixed, not fluid, and centred: `--size-page` is 740px, and `.ds-page__frame` carries a `--space-3` (6px) margin above and `--space-4` (10px) at the sides inside it. Nothing is wider than 740px and nothing stretches with the window.\n- The specimen is one example site, a software company, of five views. `.ds-nav` and `.ds-footer` are written once, outside the views; each view is a `.ds-view` section and one shows at a time.\n- Order from the top: `.ds-nav`, then the view, then the `.ds-footer`. The `.ds-nav` is three rows: `.ds-nav__top` (the `.ds-brand` at the left, a 10px tagline beside it, the `.ds-nav__jump` menu at the right), the `.ds-nav__links` row of equal cells across the full width under a heavy rule, and the `.ds-nav__strip`, one line of small print with a notice at the left and the date at the right.\n- The home view, `.ds-page__main`, is a stack of full-width bands with `--space-5` (16px) between them and no side column: the `.ds-hero` (text at the left, the product's box at the right), the `.ds-grid` of four product boxes, `.ds-page__columns` (two thirds for the `.ds-list` of news under a `.ds-heading`, one third for `.ds-page__side`, a stack of `.ds-panel` boxes), and the `.ds-index`, three equal columns of ruled links.\n- Inner pages (downloads, a support answer, a form, the company page) keep the `.ds-nav` and the `.ds-footer` and drop the bands. `.ds-page__split` sets a `--size-side` (150px) `.ds-sidebar` at the left, a column of plain ruled links that belongs to that section, behind a vertical hairline, and the page itself, `.ds-page__inner`, at the right after a `--space-5` gutter. `.ds-page__inner` opens with `.ds-page__head`: the small `.ds-breadcrumb`, the `.ds-page-header` (title and one line at the left, one button at the right, a hairline under it) and the `.ds-tabs` row when the page has parts of its own. Below come `.ds-stat` when the page has figures, the `.ds-table` with its `.ds-pagination`, or running text with a `.ds-panel` of related links, or the `.ds-notices`, the `.ds-form` and a message box, with `--space-5` between blocks.\n- Views: `home` is the front page (product band, product boxes, news and boxes, link columns). `downloads` is one page of files: the platforms as tabs, the table of files with its status key, and the page links. `support` is one answer from the knowledge base as running text, with the line that shows the link states and a panel of related answers. `register` is the registration form with its notices and the message box that clearing the form opens. `company` is the page about the firm: the row of figures, the staff directory table and the empty state of the jobs list. The cell of the view that is showing takes `--fill-bar` and its label loses the underline; the home cell is marked when the address names no view.\n- Blocks are separated by hairlines, heavy rules and outlines, never by cards with shadows or wide gutters. Everything is left-aligned; only the navigation cells and the product's box are centred.\n- Spacing scale: `--space-1` 2px is the padding of strips, tabs and ruled links; `--space-2` 4px is cell padding and the gap between a title and its text; `--space-3` 6px is the page margin above, box padding, the gap between buttons and form rows; `--space-4` 10px is the side margin of the sheet, the gap between product boxes, paragraph spacing and the padding of the product band; `--space-5` 16px is the gutter between columns and the gap between neighbouring blocks; `--space-6` 24px is the list indent and the inset of a news text under its title.\n- Fixed sizes: `--size-side` 150px link column, `--size-box` 150px product box, `--size-jump` 130px jump menu, `--size-label` 130px form label column, `--size-field` 220px text input, `--size-short` 44px short input, `--size-area` 320px textarea, `--size-check` 13px checkbox, `--size-dialog` 340px message box.\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- `--font-heading` is Arial Black, the face the bookshop sets its section labels in, falling back to Arial; it is used at `--weight-heading` and `--weight-display` 900, its only weight. `--font-body` and `--font-ui` are Arial, Helvetica. `--font-mono` is Lucida Console, falling back to Monaco and Courier New.\n- `--text-base` and `--text-ui` 13px; `--text-small` 11px; `--text-h3` 13px, `--text-h2` and `--text-large` 16px, `--text-h1` 18px, `--text-display` 26px for the brand name only. Headings are heavy, not large.\n- `--weight-bold` is 700 and so is `--weight-ui`: button and tab labels are bold. Line height is set like a printed catalogue, `--line-body` 1.3 and `--line-heading` 1.15; no transform, no tracking. All three link decorations are `underline`.\n\n- Family: the 1999 guide page (olive `#cccc66`, khaki `#cccc99`, pale yellow, light grey, on white), with the red, black, link blue and navy of the 1998 community page and the dark green of the 1998 personal start page.\n- `--color-page`, `--color-canvas`, `--color-surface` are white `#ffffff`; `--color-surface-alt` `#eeeeee` is the tab strip, alternate rows and the empty state; `--color-surface-strong` `#cccc99`.\n- `--color-bar` `#cccc66` (olive, black text) is the search band, the table head and the header and footer rules. `--color-bar-alt` `#cccc99` (khaki, black text) is every title strip and the notice border.\n- `--color-inverse` `#000000` with white text is the dialog title bar only.\n- Links are `--color-link` `#0000cc`, visited `#6060a0`, active `#cc0000`; hover equals the link colour.\n- `--color-heading-alt` `#003060` (navy) is the wordmark, tagline, h3 and positive figures. `--color-accent` and `--color-accent-alt` `#cc0000` are the mark, the solid badge, the \"New!\" word and negative figures.\n- `--color-fill-1` to `--color-fill-4` are `#ffffcc`, `#eeeeee`, `#cccc99`, `#ffcc00`; `--color-fill-3` is also the khaki underline of section headings.\n- `--color-warning` `#ffcc00` is a fill only and carries black text; `--color-success` `#006600` and `--color-danger` `#cc0000` carry white. Notices sit on pale yellow `#ffffcc`; the error notice is red on white. The secondary button is khaki `#cccc99`.\n- Borders: `--color-border` `#a0a0a0`, `--color-border-strong` `#666633` (dark olive, for boxed outlines), `--color-border-muted` `#cccccc` and `--color-input-border` `#c0c0c0` for bevels. `--color-focus` is the navy `#003060`.\n\n## Components\n\n- `.ds-page`: on ``; page fill and body type. `.ds-page__frame` is the centred 740px sheet with its margin inside it; it takes `--shadow-panel`, so a surface set that outlines its boxes also outlines the sheet. `.ds-page__main` is the home stack of bands; `.ds-page__columns` its one uneven row and `.ds-page__side` the stack of boxes in it; `.ds-page__split` is the inner-page grid of link column and page, `.ds-page__inner` the page column, `.ds-page__head` the stack of path, page header and tabs.\n- `.ds-nav`: the header. `.ds-nav__top` holds the `.ds-brand`, the `.ds-nav__tagline` and `.ds-nav__jump` (a label, a select and a button). `.ds-nav__links` is the row of equal cells in `--fill-bar-alt` under a `--border-width-strong` rule, `.ds-nav__item` / `.ds-nav__link`, bold underlined links with hairlines between; the cell of the view that is showing takes `--fill-bar` and `--color-bar-text` and loses the underline (`components.css` has one selector per view for this, and `is-current` does the same by hand). `.ds-nav__strip` is the line of small print under the cells. A link to a section that has no view of its own carries `.ds-nav__link--elsewhere`: it opens the nearest fitting view and is never marked as the view that is showing.\n- `.ds-brand`: the site's mark and name, at the left of `.ds-nav__top`. `.ds-brand__mark` is a small square tile dressed like the button (`--fill-button` over `--color-button`, `--color-button-text` for the drawing, the `outset` bevel in `--color-border-muted`, `--radius-control`, `--shadow-control`), so every palette and surface reskins it; it holds the mark as inline SVG painted with `currentColor`, drawn with flat line caps and a 2.2 unit stroke. `.ds-brand__name` is the name in the heading family at `--text-display` and `--weight-display`, in `--color-heading-alt`. The name `chronoskin` and its mark are placeholders for the installing project's own name and logo.\n- `.ds-hero`: the product band, the era's page introduction: a band in `--fill-bar` inside a hairline, with a small `.ds-hero__hint` label, the `.ds-hero__title` (22px), `.ds-hero__lead` and `.ds-hero__action` (the main button, a second button and a small line) at the left, and `.ds-hero__box` at the right: a block in `--fill-inverse` standing for the product's box, with `.ds-hero__box-name` and `.ds-hero__box-note`. Never a full-height banner and never a centred headline.\n- `.ds-page-header`: the head of an inner page, used instead of `.ds-hero`. `.ds-page-header__text` holds `.ds-page-header__title` (22px) and `.ds-page-header__lead` (one line); `.ds-page-header__action` holds one button, bottom-aligned at the right. A hairline closes it.\n- `.ds-prose`: running text; styles `h1`, `h2`, `h3` (bold sans-serif in `--color-heading-alt`), `p`, `ul`, `ol`, `strong`, `code`; `.ds-prose__lead` for a 14px lead line.\n- `.ds-link`: every link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `.ds-link--quiet` is a small link, `.ds-link--strong` a bold one. `.ds-links` wraps a line of links.\n- `.ds-button`: bevelled key with an 11px bold label, on a `\n \n \n \n

\n NEW Ledger 3.1 is ready. Registered users can download the update free of charge.\n Monday, June 14, 1999\n

\n \n\n
\n
\n\n
\n
\n Product of the month\n

Do the household books in an evening

\n

Ledger 3.1 keeps your accounts, prints the forms at the end of the year and now reads the files your bank sends you. Try it for thirty days.

\n
\n Download the Free Trial\n \n 2.4 MB for Windows 95 and 98. What you need to run it\n
\n
\n
\n Ledger 3.1\n Home accounts
for Windows\n
\n
\n\n
\n
\n

Ledger

\n

Accounts for the home and the small firm.

\n

Version 3.1, $49

\n
\n
\n

Letterbox

\n

Letters, labels and a mailing list in one.

\n

Version 2.0, $39

\n
\n
\n

Planner

\n

A diary that prints to fit your binder.

\n

Version 4.2, $29

\n
\n
\n

Typing Coach

\n

Twenty lessons, ten minutes each.

\n

Version 1.5, $19

\n
\n
\n\n
\n
\n

Company News

\n \n

All press releases...

\n
\n\n
\n
\n

Find a Dealer Map

\n
\n

Type the name of your town to find the nearest shop that stocks our boxes.

\n
\n \n \n
\n
\n
\n
\n

Tip of the Week

\n
\n

In Planner, hold Shift while you drag an appointment to copy it to another day.

\n

More tips...

\n
\n
\n
\n
\n\n
\n
\n

Products

\n \n
\n
\n

Support

\n \n
\n
\n

Company

\n \n
\n
\n\n
\n
\n\n
\n
\n\n \n\n
\n
\n \n
\n
\n

Trial Versions

\n

Complete programs that run for thirty days. Nothing is left out.

\n
\n
\n Order on CD\n
\n
\n \n
\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Key: FINAL the version in the box BETA still being tested WITHDRAWN do not install NEW placed here this month\n At 28.8K allow about six minutes for each megabyte. Help with downloading\n
FileVersionStateDateSize
ledger31.exe NEW Ledger, home and small firm accounts3.1FINALJun 14, 19992,412 K
letter20.exe Letterbox, letters, labels and mailing list2.0FINALFeb 8, 19991,876 K
plan42.exe Planner, diary and address book4.2FINALNov 30, 19981,140 K
plan50b2.exe Planner 5, second test release5.0 b2BETAMay 21, 19991,398 K
coach15.exe Typing Coach, twenty lessons1.5WITHDRAWNMar 3, 1999864 K
No room on the line? We will post all four trials on one CD for the cost of the stamp.
\n\n
    \n
  1. Files 1 to 5 of 14
    2. \n
  2. Previous
    3. \n
  3. 1
    4. \n
  4. 2
    5. \n
  5. 3
    6. \n
  6. Next
    7. \n
\n
\n\n
\n
\n\n
\n
\n\n \n\n
\n
\n \n
\n
\n

Knowledge Base

\n

Answers written by the people who take the telephone calls.

\n
\n
\n Ask a Question\n
\n
\n
\n\n
\n

Reports print one line too low on continuous paper

\n

Applies to Ledger 3.0 and 3.1 with a dot matrix printer.

\n

Ledger measures a page as 66 lines. Some printers count 72 when the paper is fed by tractor, so each page starts a little lower than the last. The cure is to tell Ledger the true length in the file LEDGER.INI.

\n

What to do

\n
    \n
  1. Close Ledger and open LEDGER.INI in Notepad.
    2. \n
  2. Find the line that begins PageLines= and change the number to 72.
    3. \n
  3. Save the file, start Ledger and print one test page.
    4. \n
\n

If that does not help

\n

Check that the printer's own form length switch agrees with the paper. These pages may also be useful:

\n

\n An answer you have not read,\n one you have read,\n one under the pointer,\n one as you click it,\n a bold link and\n a small link.\n

\n

Still stuck?

\n

Send the file to us with a note of your printer's make and we will set it for you. Report a problem

\n
\n\n
\n

Related Answers Index

\n
\n \n
\n
\n
\n\n
\n
\n\n
\n
\n\n \n\n
\n
\n \n
\n
\n

Register Your Copy

\n

It takes two minutes and the card in the box can stay in the box.

\n
\n
\n Go to Downloads\n
\n
\n
\n\n
\n

Where is the serial number? On the back of the manual and on the first diskette, twelve characters beginning with a letter.

\n

Not registered. The serial number was not recognised. Please check it and send the form again.

\n
\n\n
\n \n
\n \n
\n \n
\n \n A serial number has twelve characters. This one has eleven.\n
\n \n
\n \n Bought in \n
\n Send me:\n
\n \n \n
\n \n
\n \n
\n
\n \n \n \n \n
\n
\n\n
\n

Clear the form?

\n

Everything you have typed will be removed. Your registration has not been sent.

\n
\n \n \n
\n
\n
\n\n
\n
\n\n
\n
\n\n \n\n
\n
\n \n
\n
\n

About chronoskin

\n

Thirty-one people in two offices, writing software for the kitchen table.

\n
\n
\n Write to Us\n
\n
\n
\n\n
    \n
  • 1989 the year we began
    • \n
  • 4 products in the range
    • \n
  • 31 people on the staff
    • \n
  • 640,000 boxes sold so far
    • \n
\n\n
\n

Staff Directory

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameDepartmentOfficeExtension
Adeyemi, RuthTelephone supportNorth214
Brandt, TomasProgramming, LedgerMain107
Castellan, InesManuals and help filesMain121
Doyle, FergusDealers and schoolsMain133
\n
\n\n
\n

Jobs

\n
\n

There are no vacancies this month.

\n

We read every letter all the same. Tell us what you do and we will keep it on file for a year.

\n Send Us a Letter\n
\n
\n
\n\n
\n
\n\n \n\n\n\n\n", "style.json": "{\n \"id\": \"v1.table-era-90s.landing.s06.p09.t11.u03\",\n \"library\": \"2026.10.09-1346\",\n \"era\": {\n \"slug\": \"table-era-90s\",\n \"years\": [\n 1996,\n 2000\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 800,\n \"fluid\": false\n },\n \"source\": \"https://chrono.skin/s/v1-te-69b3\",\n \"short\": \"v1-te-69b3\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #ffffff;\n --color-canvas: #ffffff;\n --color-surface: #ffffff;\n --color-surface-alt: #eeeeee;\n --color-surface-strong: #cccc99;\n --color-bar: #cccc66;\n --color-bar-text: #000000;\n --color-bar-alt: #cccc99;\n --color-bar-alt-text: #000000;\n --color-inverse: #000000;\n --color-inverse-text: #ffffff;\n --color-text: #000000;\n --color-text-muted: #666666;\n --color-heading: #000000;\n --color-heading-alt: #003060;\n --color-link: #0000cc;\n --color-link-quiet: #0000cc;\n --color-link-visited: #6060a0;\n --color-link-hover: #0000cc;\n --color-link-active: #cc0000;\n --color-border: #a0a0a0;\n --color-border-strong: #666633;\n --color-border-muted: #cccccc;\n --color-accent: #cc0000;\n --color-accent-text: #ffffff;\n --color-accent-alt: #cc0000;\n --color-fill-1: #ffffcc;\n --color-fill-2: #eeeeee;\n --color-fill-3: #cccc99;\n --color-fill-4: #ffcc00;\n --color-button: #efefef;\n --color-button-text: #000000;\n --color-button-hover-text: #000000;\n --color-button-secondary: #cccc99;\n --color-button-secondary-text: #000000;\n --color-input: #ffffff;\n --color-input-text: #000000;\n --color-input-border: #c0c0c0;\n --color-disabled: #efefef;\n --color-disabled-text: #989898;\n --color-danger: #cc0000;\n --color-danger-surface: #ffffff;\n --color-success: #006600;\n --color-warning: #ffcc00;\n --color-notice: #ffffcc;\n --color-notice-text: #000000;\n --color-focus: #003060;\n --color-shadow: #000000;\n --color-overlay: #ffffff;\n}\n\n/* @part type */\n:root {\n --font-body: Arial, Helvetica, sans-serif;\n --font-heading: \"Arial Black\", Arial, Helvetica, sans-serif;\n --font-ui: Arial, Helvetica, sans-serif;\n --font-mono: \"Lucida Console\", Monaco, \"Courier New\", monospace;\n --text-base: 13px;\n --text-small: 11px;\n --text-ui: 13px;\n --text-large: 16px;\n --text-display: 26px;\n --text-h1: 18px;\n --text-h2: 16px;\n --text-h3: 13px;\n --line-body: 1.3;\n --line-heading: 1.15;\n --line-display: 1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 900;\n --weight-display: 900;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: 0;\n --display-tracking: 0;\n --figure-shift: 0em;\n --ui-transform: none;\n --link-decoration: underline;\n --link-decoration-hover: underline;\n --link-decoration-quiet: underline;\n}\n\n/* @part surface */\n:root {\n --border-width: 2px;\n --border-width-strong: 2px;\n --border-style: solid;\n --radius-control: 0;\n --radius-panel: 0;\n --radius-pill: 0;\n --radius-page: 0;\n --shadow-panel: 0 0 0 1px var(--color-border-strong), 4px 4px 0 1px var(--color-shadow);\n --shadow-control: 1px 1px 0 var(--color-shadow);\n --shadow-control-hover: 1px 1px 0 var(--color-shadow);\n --shadow-control-pressed: none;\n --shadow-dialog: 4px 4px 0 var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: repeating-linear-gradient(0deg, var(--color-bar) 0 2px, color-mix(in srgb, var(--color-bar) 55%, white) 2px 3px);\n --fill-bar-alt: repeating-linear-gradient(0deg, var(--color-bar-alt) 0 2px, color-mix(in srgb, var(--color-bar-alt) 55%, white) 2px 3px);\n --fill-inverse: repeating-linear-gradient(0deg, var(--color-inverse) 0 2px, color-mix(in srgb, var(--color-inverse) 55%, white) 2px 3px);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: var(--color-button);\n --fill-button-hover: var(--color-button);\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: none;\n --backdrop-blur: 0px;\n}\n" } }