Skip to content

Unforged house identity, tokens v3.1.1

Style guide

"We build the business around you, so you can stay in your craft." The one line pitch, brand-core.md section 3. This site renders the component library under 06_COMPONENTS: every component with its demo, snippet and rules, every token with its value.

The grounds

Paper reads. The flood is the ink at full coverage, a place on the page and never a theme, at most 2 per surface. The raised step and the trough are element grounds, never the ground of a section (two-grounds.md).

ground.paper --u-color-ground-paper #F5F4F1 The reading ground of every surface: web, PDF, and the stock reference in print.
ground.paper-raised --u-color-ground-paper-raised #EBE9E4 The one step inside paper: table zebra, quote figure, hover.
ground.trough --u-color-ground-trough #E2E0DD The track a bar is drawn in, full width, so the unfilled remainder reads as remainder.
ground.flood --u-color-ground-flood #191512 The only dark ground: a full bleed block of the ink at full coverage, at most two per surface, and the ground for the chrome wordmark.

Contents

57 entries in 5 layers, every one rendered, gated and documented in its own folder. The tokens page shows every value the identity declares; the guide renders the web guidelines.

00 shared

The ground every component stands on: the reset and body voice in base.css, the flush block device, the demo frame. Stylesheets, not markup. 1 entry.

  • 00_SHAREDThe ground every component in 06_COMPONENTS stands on: the reset and the body voice (base.css), the flush block device (flush.css, flush.html) and the frame around a component demo (demo.css).

01 atoms

The smallest parts: type steps, controls, marks, lines, fields. One job each. 19 components.

  • actionThe one primary action: an ink block, squared, uppercase label in paper, a 2px ink edge, at most once per viewport, inverting to paper on ink the frame the pointer or the focus enters and reverting the frame it leaves.
  • bandThe signal field: a full bleed band carrying display type in the signal's own ink, one per viewport, never taller than a quarter of it, never beside a flood, never under a mark.
  • buttonThe secondary controls: an ink outline and a ghost, two line boxes tall, the label step, a 2px edge, squared, inverting on a state change.
  • checkboxThe stamp: a squared box with a 2px edge in the ground's ink that fills with the same ink when checked, instantly.
  • floodThe ink block: the ink at full coverage, a full bleed place on the page, at most twice per surface, never a theme, never beside a signal.
  • frameThe chrome hairline frame: the ten stop gradient measured off the mark as a border image on a 1px transparent border, 96 degrees, paper only.
  • hairlineThe one line: 1px in the rule of the ground it sits on.
  • icon-uThe U lifted from the wordmark, as an image.
  • inputThe single line text field: the body voice inside a hairline in the ground's ink, two line boxes tall, squared, the ground showing through.
  • labelThe label step as an element: Big Shoulders Display 600, 12px at 390 and 13 at 1280, uppercase, 0.14em tracking, leading 1.3, in the faint ink of the ground.
  • linkThe link: blue on paper, the one place a signal is type; the ground's ink on the flood and on the audit; a hairline underline that thickens to the 2px edge on hover; visited the same.
  • numberA proof figure with its receipt: the figure in the display voice at the title step, what it measures in the body voice, where it comes from at the caption step in the faint ink.
  • radioOne of several: the checkbox's squared box with a 2px edge, and a dot instead of a fill when chosen, three edges of air around it.
  • selectThe single choice list: the input's box with the browser's control stripped and one triangle drawn in the ground's ink.
  • swatchA colour token shown: the chip painted from the token, the name, the value printed as text, the role in one line.
  • tagA category marker: the label step inside a hairline, squared, in the faint ink of the ground.
  • textareaThe multi line field: the input's box grown to at least four line boxes, the body voice on the body line box, resizable downwards only.
  • typeThe nine steps of the scale as classes, one per step, and nothing else: a step sets family, weight, size, leading, case and tracking; the ground's ink, the measure and the rhythm come from 00_SHARED/base.css.
  • wordmarkThe mark as an image, never live type.

02 molecules

Atoms composed into one device: a form row, a card, a quote, a table, a figure. 15 components.

  • bar-chartTwo people, two bars: person.a and person.b in the trough, the baseline in rule.axis under the marks, every value written beside its bar.
  • cardA bounded panel on paper: one hairline or the chrome hairline frame around a head, a body, an optional kicker and, at most once per viewport, the action.
  • explainer-objectOne chrome object, gear, engine or anvil, from 02_ASSETS/03_CHROME-OBJECTS/, as a figure on paper with its caption: the name at the label step, a note at the caption step.
  • faq-itemA question and its answer in a details element: the question at the body step in Barlow 700 with the word Show or Hide at its end, the answer in secondary ink under it.
  • figureAn image and its caption in faint ink, under the evidence rule: the image is the client's work, it is here because a claim rests on it, and the caption names the client and the claim.
  • footer-colOne column of a footer: a head at the label step in faint ink and a list of links in the ground's ink, underlined at the hairline, the edge on hover.
  • form-rowA label, one control, an optional help line, and when needed an error line in ink on the raised step.
  • method-stepOne step of the method: the numeral 01 to 05 at the title step, the name at the head step, one line under it, a hairline above each row.
  • nav-itemOne navigation link in the text voice: Barlow 500 at the body step in the ground's ink, no underline until it is the current page, which carries a 2px underline in ink.
  • noticeWords in ink on the raised step.
  • price-lineA price in figures and in words on one baseline, its receipt under it in faint ink.
  • proof-tileA number at the title step, what it is, and its receipt in faint ink; optionally a data bar in signal blue under the number on a brand surface.
  • quoteA verbatim quotation as a figure on the raised step with a 2px ink edge: the quoted line in the display voice at the title step, or at the display step through the flush block, and the attribution at the label step.
  • tableHairline rows, the head at the label step closed by an ink hairline, cells at the caption step, numbers right aligned in tabular figures, and the raised step as zebra.
  • testimonialA client's words at the head size in Barlow 500, their name, and a row with two marks where the client's is larger than ours: our U icon is one space.block wide, the client's slot takes the rest of the row.

03 organisms

Full width blocks a surface is built from: nav, plate, section, pricing, footer. 16 components.

  • audit-bandThe conversion module on heat, the one job heat has: the label START WITH THE AUDIT in the second voice, the statement as one flush line in heat ink, the handle input with an ink hairline, the ink block action with its paper label, as one full bleed band.
  • colophonThe flood close: the mark small, the companion line, the legal line in the legal variant.
  • ctaA band plus the action: the signal field carries one flush line in its own ink, the action sits on paper under the band, never on it.
  • document-frameThe reading page: a running head, a section label, the title, running text on the 56ch measure with a quotation, a table, a figure and section labels in it, and the page numbering line at the foot; the audit subset is marked with one modifier and two guards.
  • faqQuestions stacked between hairlines on the prose measure, each a faq-item disclosure the browser owns, under an optional head; the cue word and the layout say open or closed, no colour and no motion does.
  • footerThe page foot: a companion line, footer columns, a foot line.
  • form-sectionThe form on a surface: a head, one input and the one action with the privacy line in faint ink under them, or a longer form of four rows; controls are hairlines in ink, the action an ink block, and nothing is coloured, the words say what.
  • method-indexThe five steps of the method, 01 Audit to 05 Hub, as numerals at the title step and names at the head step between hairlines, with the chrome gear beside them as the one place an explainer object may stand.
  • navThe page header on paper: the dark wordmark small, up to five items, one action.
  • plateThe hero: the light wordmark alone in the header with air, the slogan as a three line flush block, the one vermilion band carrying the companion line, then body copy and the one action on paper.
  • pricingThe offer block: the tier name, the price in words and figures with its receipt, what is included as a hairline list, and the one action; the one vermilion band a surface may show sits above it.
  • proof-rowThree numbers at the title step, each with the claim it measures and the source under it, on paper or on the flood; every number is brand-core.md section 9 and none is invented.
  • sectionA section of a page on paper: label, head, prose, an optional figure.
  • signal-pairFor the rare page that needs two signals: the vermilion band first, the blue field second, and at least one viewport of paper between them, so the rule "one signal field per viewport" is spacing, not discipline.
  • statementThe flood block: the light wordmark and one flush statement in inverse ink.
  • testimonialsThree testimonial molecules in a row, one under the other on a phone: the client's own words in Barlow 500, the name with its source, and the client's mark slot.

04 templates

Whole surfaces composed from the library and nothing else. 6 components.

  • app-shellThe frame of app.unforged.me: paper ground, the nav, one content column on the measure, a table, a form row, and no signal anywhere.
  • audit-openingThe achromatic subset per 03_SURFACES/audit.md: paper, ink, the person pair, and nothing else.
  • deck-slideThe 16:9 slide at 1920 x 1080: the label rail on the left, the takeaway as a flush block at the title cap on the right (Broadside concept section 8).
  • documentThe proposal frame per 03_SURFACES/proposal.md: the fixed page document a prospect reads, composed from the library and nothing else.
  • landing-pageThe public brand page, composed from the library and nothing else.
  • social-frameThe 1080 x 1350 feed artboard: a flush block plus the vermilion band, no new rules (Broadside concept, criterion 20).

Written by 05_TOOLS/build-styleguide.mjs from the component folders and tokens.json v3.1.1. Rerun the builder after any component or token change.