This page shows every token and every component in the file dist/levelwork.css, in every state, on black and on cream. It links that one file and nothing else. If something looks wrong here, it is wrong in the system.
The look is not new. It is what the current website and the current product pages do, written down once. Where pages disagreed, one variant was picked. Each such choice is listed in docs/decisions.md, so it can be overruled.
The button top right switches the whole page between black and cream. Components are also shown on both grounds side by side.
The bar starts inside the frame and breaks out on the right. The part that breaks out is the part nobody wrote down, and it is the only element in colour.
Eight SVG files ship in dist/logos/. The wordmark is converted to outlines, so no font is needed.
In a header the mark is inline SVG with the class .mark. Frame and bar take the text colour and flip with the ground. The short bar is always the brand accent. Next to it the name is set as a mono label, not as the kit wordmark.
.nav__brand › .mark · 26px
.mark.mark--sm · 20px
At least one mark height on all four sides, for the mark and for the lockup. The dashed line is that distance.
Mark 64px high, 64px of space around it.
On screen the mark is never smaller than 16px and the lockup never narrower than 120px. In print: 8 mm and 30 mm.
Mark · 16px
Lockup · 120px
Six ways to break the logo. Four of them need an inline style to do it. Apart from the lengths set on bars, those are the only inline styles on this page.
Constat · Loop · PricingThree brand colours come from the logo kit: Ink, Cream and Accent. The ramps below hold the values the pages already use around them. Each swatch prints the value the browser resolved, so the page cannot disagree with the stylesheet.
Grounds, surfaces and lines on dark, text on cream. Utilities: bg-ink-700, text-ink-300, border-ink-600. Variables: var(--color-ink-700).
black
Dark ground
ink-900
Surface on dark, field ground
ink-800
Second surface on dark, bar tracks
ink-700 · Ink
Brand Ink. Text on cream, the mark
ink-600
Hairline on dark
ink-500
Field border on dark
ink-400
Secondary text on cream
ink-300
Muted text on cream
ink-200
Muted text on dark
ink-100
Secondary text on dark
The light ground and its two surfaces. White is used for input fields on cream and nowhere else.
white
Field ground on cream
cream-100 · Cream
Brand Cream. Light ground, text on dark
cream-200
Surface on cream
cream-300
Second surface on cream, bar tracks
The brand orange is 500. 400 and 600 are its hover and pressed steps. 600 and 700 exist because the brand orange on cream has a contrast of 2.77 to 1 and cannot carry text there.
accent-300
Reserve: accent text on a dark tint
accent-400
Hover of the primary button
accent-500 · Accent
Brand Accent. Button, bars, dots, the mark
accent-600
Pressed. Large accent text and focus ring on cream
accent-700
Small accent text on cream
accent-900
Resting underline of the mail link
The current pages have no error colour. Orange means brand, action, selected, success and critical at once. These three pairs are proposed for errors, confirmations and warnings only. The 700 step is for cream, the 300 step for black.
danger-700
Error on cream
danger-300
Error on dark
success-700
Confirmation on cream
success-300
Confirmation on dark
warning-700
Warning on cream
warning-300
Warning on dark
Components never name a ramp step. They name a role, and the role points at a different step on each ground. Utilities: bg-surface, text-muted, border-line. Variables: var(--lw-surface).
ground
Page and band ground
surface
Raised cards, panels, the answer block
surface-2
Bar tracks, badges
field
Input ground
text
Running text, headlines
text-2
Secondary text
muted
Labels, captions, help
line
Hairlines, card borders
line-strong
Field and tag borders
accent
Fills: button, bar, dot
accent-strong
Large accent text, icons, accent borders
accent-text
Small accent text, links
accent-tint
Fill of accent boxes, 5 %
focus
Focus ring
danger
Errors
success
Confirmations
warning
Warnings
Every pair the system offers for text, with the contrast ratio measured in this browser from the rendered colours. WCAG AA asks for 4.5 to 1 for text and 3 to 1 for large text (24px and up) and for graphic parts.
Not offered as text: the brand orange (accent) on cream, 2.77 to 1. On cream it fills buttons, bars and dots only. Hairlines and field borders are below 3 to 1 on both grounds by design of the look; see Open points.
Space Grotesk carries headlines, figures, quotes and product text. Fragment Mono carries labels and, on the website, running text. Both are served from dist/fonts/. Emphasis is a change of colour, never of weight or slant, because neither file has a bold or an italic.
Space Grotesk
font-display · var(--font-display) · one variable file, weights 300 to 500 · in use: 300 and 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ÄÖÜ äöü ß é è ñ ç
. , : ; ! ? “ ” ‘ ’ ( ) [ ] / & @ % € § → · –
Light 300. Every role exists twice: on paper, and in reality.
Regular 400. Every role exists twice: on paper, and in reality.
Fragment Mono
font-mono · var(--font-mono) · one weight, 400
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ÄÖÜ äöü ß é è ñ ç
. , : ; ! ? “ ” ‘ ’ ( ) [ ] / & @ % € § → · –
Regular 400. No evidence, no finding.
Regular 400, as a label. No evidence, no finding.
Sizes are fluid: the token is a clamp, and the line under each sample prints what it resolves to at this window width. A heading tag has no size of its own. Pick the tag for the outline and the class for the look.
.displayWebsiteSpace Grotesk 400 · clamp(42px, 11vw, 124px) · line 0.98 · tracking 0.055em · the wordmark size, capitals typedCONSTAT
.h1WebsiteSpace Grotesk 400 · clamp(34px, 6vw, 64px) · line 1.04 · tracking -0.02em · page headline.h2WebsiteSpace Grotesk 400 · clamp(30px, 5.2vw, 58px) · line 1.04 · tracking -0.02em · section headline.h3WebsiteSpace Grotesk 400 · clamp(20px, 2.4vw, 27px) · line 1.18 · tracking -0.02em · sub headline.h4ProductSpace Grotesk 400 · 16px · line 1.3 · card and finding headline.claimWebsiteSpace Grotesk 400 · clamp(23px, 3.6vw, 42px) · line 1.14 · max 20ch · the sentence under the wordmarkA finding that changes nothing was just a well-written report.
.quoteWebsiteSpace Grotesk 300 · clamp(21px, 3.1vw, 34px) · line 1.26 · tracking -0.015em · max 24ch · quotation marks typed“You cannot put an assessment in front of someone with forty years in the house and four months to go. You can only come with curiosity.”A managing director, in the first conversation
.leadWebsiteFragment Mono 400 · 13.5px · line 1.72 · muted · max 64ch · the website lead: body text in muted, not largerTwo products, one arc. The first tells you where you actually stand. The second keeps that answer from going stale.
.lead-sansProductSpace Grotesk 300 · clamp(17px, 2.1vw, 22px) · line 1.42 · max 56ch · the larger lead of the product landing pageTwo products, one arc. The first tells you where you actually stand. The second keeps that answer from going stale.
.bodyWebsiteFragment Mono 400 · 13.5px · line 1.72 · running text on the websiteOrg charts, role descriptions, job profiles. Written at one moment, then filed. Meanwhile the work moves. Someone quietly takes on the thing nobody else will.
.body.body--mutedWebsiteThe same in muted · most paragraphs on the websiteWithin two years the document and the work have little left in common. And every decision about people is still made from the document.
.body-sansProductSpace Grotesk 300 · 16px · line 1.5 · running text in the product, also the default of the body elementThink of last week. Which task took the most time that nobody would find in your job description?
.smallWebsiteFragment Mono 400 · 12px · line 1.5 · muted · form notes, help text, valuesOr simply write to get@levelwork.ai.
.captionWebsiteFragment Mono 400 · 10.5px · line 1.5 · tracking 0.04em · muted · source notesDeloitte, A skills-based model for work, 8 September 2022. 1,021 employees and 225 executives across ten countries.
.lblWebsiteFragment Mono 400 · 11px · line 1.5 · tracking 0.14em · capitals · muted · eyebrow, nav, form label, figure captionScroll through the week
.lbl.lbl--accentWebsiteThe same in accent text · section numbers, the current item01 · Available now
.lbl.lbl--smProduct10.5px · tracking 0.12em · keys and small headings inside cardsSignal after 90 days
.codeProductFragment Mono 400 · 12px · breaks anywhere · share linkshttps://levelwork.ai/m/7f3a-91c2-4be0
.scene-capWebsiteSpace Grotesk 300 · clamp(17px, 2.2vw, 25px) · line 1.25 · tracking -0.015em · max 26ch · the sentence next to a scroll-driven scene · one word may be marked with <b>Wednesday. The calendar fills with work that is written down nowhere.
And the work the role exists for did not happen. Again.
Every finding stays linked to its source. Hover: its source.
.link · inline text link, underlined
.link-display · the mail link that closes a page, at rest and on hover · 21px on a phone, so it takes the small-text orange
.link-go · foot of a card, quiet secondary action, at rest and on hover
Long documents such as the legal notice. Wrap the text in .prose and write plain tags.
This page explains which data the site processes when you visit it. The site sets no cookies and loads no fonts from a third party. Questions go to get@levelwork.ai.
IBM Carbon glyphs, 32 by 32 view box, inline SVG, one colour. Five are in use: clock, arrow, group, chart, building.
.ico · 22px, accent.ico.ico--muted.ico.ico--sm · 14px.ico.ico--current · takes the colour of the text around itThe rhythm of a page. These are fluid and replace the fifteen different inline margins on the current website. The orange block is the step at this window width.
guttersectionblockbreakstackfieldTailwind's scale, one unit is 4px. For gaps and padding between components: gap-4, mt-6, p-3.5.
1 · 4px2 · 8px3 · 12px4 · 16px5 · 20px6 · 24px8 · 32px10 · 40px12 · 48px16 · 64px20 · 80px24 · 96px| Token | Value | Used for |
|---|---|---|
| max-w-page | 1180px | .wrap, the page container |
| max-w-app | 900px | .wrap--app, a report or a form page in the product |
| max-w-prose | 74ch | .prose, legal text |
| max-w-lead | 64ch | .lead |
| max-w-turn | 60ch | .turn, one turn in the interview |
| max-w-form | 520px | .form |
| sm: | 560px and up | two-column details: four-field grid, marker rows |
| md: | 860px and up | page layout: grids, the interview side panel |
| lg: | 1180px and up | free for pages, no component uses it |
Cards, boxes, pictures and tables are square. Only controls get 2px. Round is for dots.
rounded-none · 0 · cards, boxes, imagesrounded-control · 2px · buttons, fields, chipsrounded-full · dots, the switchThe look has no shadows. Depth is a hairline, a fill, or a picture under a gradient. One token exists for a box that stays put while content scrolls under it.
shadow-none · everythingshadow-sticky · .coverage--sticky only.rule · 1px hairline between sections.levelline · the one drawn orange line, fading at both endsTwo durations and one curve. Things change colour in 180ms. Things that enter or fill take 400ms on the curve cubic-bezier(.2,.8,.3,1). With reduced motion set in the system, all of it stops.
--duration-fast · 180ms · hover, focus
--duration-scene · 400ms · ease-brand
--animate-spin · 0.9s · --animate-typing · 1.2s
Team coordination
--animate-pop · 350ms · a card that was just captured
The drifting field
.glow · three blurred orange shapes behind a band, 26 to 33 seconds per pass
The drifting field on cream
.band--light › .glow · multiplies instead of screens, 20 % instead of 30 %
The website's button has a black label, the product's a white one. White on the brand orange is 3.3 to 1 and fails for an 12px label. The system takes the website's black, 6.31 to 1. The class works on <button> and on <a> alike.
.btn · primaryWebsite.btn.btn--secondaryNew.btn.btn--ghostProduct.btn.btn--dangerNew.btn.btn--textWebsitea.btn · same look, no extra class.btn--sm · 8 × 14 · 11px.btn · 14 × 22 · 12px.btn--lg · 16 × 26 · 12px.btn--block · full width of its containerHover, focus and pressed are pinned here with the helper classes .is-hover, .is-focus and .is-active, so they can be compared without a pointer. Pages never use these classes. Hover, pressed and loading did not exist in the product; pressed and loading did not exist anywhere.
| State | Primary | Secondary | Ghost | Destructive |
|---|---|---|---|---|
| Default | ||||
| Hover | ||||
| Focus | ||||
| Pressed | ||||
| Disabled | ||||
| Loading |
Disabled: the disabled attribute, or aria-disabled="true" on a link. Loading: aria-busy="true"; keep the label so the width holds.
DefaultHoverFocusPressedDisabled.btn.btn--text · hover and pressed are the same accent text; it has no fill that could go darker.
a.btna.btn · aria-disabled="true"a.btn.btn--ghost · aria-disabled="true"A link has no disabled attribute. Set aria-disabled="true" and leave out the href, so the keyboard cannot reach it either.
A button that stays pressed: role toggles, attribute pickers. Use aria-pressed. Selected is the accent with a black label. The product set it white.
.chip · aria-pressed="true" selects
.segmented › button[aria-pressed] · mode and language switch
Hover turns the label to the text colour. The focus ring sits inside the option, in the text colour, because the frame would clip a ring outside. Disabled is new.
Choose one from a grid of named options. From the event demo, where a visitor picks the role to be interviewed in. Each cell is a button with aria-pressed.
.picker › button.picker__item › .picker__name + .picker__teaser · selected: aria-pressed="true" · hover is the accent tint
Text field and text area come from the website's contact form. Select, checkbox, radio, switch, help and error text are new: today an error is written into the grey hint line and looks like help.
.form › .field › .field__label + .input | .textarea | .select + .field__help | .field__error · .form__note.form__note--ok after sending
Not sent. The connection dropped. Your text is still here, send it again.
.form__note.form__note--error · the same line when sending failed, in place of the confirmation
Focus turns the border accent and doubles it to 2px. The website only changes the 1px border colour.
Too short to work with. One full sentence is enough.
.textarea in the same six states as the text field, drawn at the height of .textarea--chat to keep the grid short.
Choose a size, so the offer fits.
.select has no read-only state, because the attribute does not exist for it. Show a fixed choice as a read-only text field.
Settings
.choice › .switch · input[role=switch]
Hover darkens the border to the text colour. Invalid turns it to the danger colour and needs an error line under the group, as for a field. The switch has no invalid state.
a.card.card--link · left: default · right: hover (accent border, 5 % orange fill)
A hairline and nothing else.
.card.card--compactThe surface colour as ground. The product's report card.
.card--raisedFor the one thing on a screen that must be seen: a share link, a result that is ready.
.card--accentThe pages had five looks for a small status marker. Two remain. A tag is an outline label on a thing. A badge is a filled marker for a count or a state.
.tag · .tag--accent · .tag--solid · .tag--danger · .tag--success · .tag--warning
.badge · .badge--accent · .badge--outline · .badge__dot
.legend › .legend__item › .legend__swatch
Only the accent notice has a precedent, the product's info banner. The status versions are new. Each carries a title in words, so colour is never the only signal.
Note
Your answers are saved after every turn. You can close this window and come back.
How this conversation is used
Nothing you say here can be used to rate you. The result describes the role, not the person.
Sent
The invitation went to three people. You will see their answers here.
Link expires in two days
Two of five invited people have not answered yet.
Not saved
The connection dropped while sending. Your text is still in the box. Send it again.
.alert · .alert--accent · .alert--success · .alert--warning · .alert--danger · .alert--dismissible · .alert__title
The product shows these as a bare line of text, different on every page. One line inside a panel stays (.empty). A block that replaces content is new (.state).
Nothing captured yet.
.empty · one line in a panel or a cellStart with one role. The first finding appears here about an hour after the conversation.
Invite the first person.state › .state__title + .state__text + .state__action
Comparing the interview with the role profile. This takes about a minute.
.state.state--loading › .spinner
It may have been closed by the person who sent it. Ask them for a new one.
Back to the start.state.state--error
.progress · 3px · style="--value:62%".progress.progress--lg · 6px.spinner · .spinner--lg.steps › .steps__item (.is-done | .is-active | .is-error) › .steps__dot · structure from the earlier admin pages, new skin
| Classic HR analytics | Constat |
|---|---|
| Self-ratings on scales. | Structured interviews, evidenced. |
| Aggregated dashboards. | Evidenced individual findings. |
| Rating people. | Analyzing roles and structures. |
.table-wrap › table.data-table.data-table--compare · the last column is ours
| Role | Status | Turns | Coverage | Findings |
|---|---|---|---|---|
| Head of customer service | Report ready | 41 | 92 % | 7 |
| Team lead, production planning | In conversation | 18 | 54 % | 0 |
| Working student, marketing | Invited | 0 | 0 % | 0 |
.data-table.data-table--dense · th.num and td.num align right with tabular numerals · td.is-muted
Two sizes existed for the same job. Both are kept as one component with a size and an accent modifier until one is chosen.
63%
of current work falls outside people's core job descriptions.
Deloitte, A skills-based model for work, 8 September 2022.
26
evidenced findings from one interview of sixty minutes.
12 : 5
task areas lived versus planned, in a single case.
.stat.stat--lg.stat--accent › .stat__n + .stat__t + .stat__src · .stat · .stat.stat--accent
.hairgrid › .kpi › .kpi__n + .kpi__l + .kpi__d
One appointment in a drawn week, from the scroll sequence on the Constat page. The sequence itself stays page code. The chip and its legend are system parts and work on cream too, which the website version did not.
.event · .event.event--core · .event.event--overhead · .event.event--dropped · legend: .legend__swatch, --tint, --outline
How a deviation is drawn: the role as designed is an outline, the week as worked is a fill, what runs past the plan is orange, and what falls short of it is a dashed orange outline. From the second scroll sequence of the Constat page.
.bars › .bars__label + .bars__row (.bars__row--short) › .bars__expected + .bars__actual + .bars__delta · lengths: --expected, --actual, --from, --size on the row · legend: .legend__swatch--outline, --accent, --dashed
Two forms of one component. On the website it sits open on the hero. In the product it is a bar with a rule and a slot on the right. Neither is sticky and neither has a mobile menu; the links wrap.
.nav › .nav__brand + .nav__links · current: aria-current="page" · last link shown in hover
.nav.nav--bar › .nav__brand + .nav__meta · here: step indicator and identity
The key badge of the interview header is a .tag in the .nav__meta slot. It says whose model key the conversation runs on. .tag--accent marks the customer's own key.
The website had four versions of the left side and the product had no legal links at all. One footer: mark and name as a link home, legal links and place on the right.
.footer › .footer__inner › .footer__brand + .footer__links (a, .footer__note) · second link shown in hover
The role as it was designed. The week as it is actually worked.
.sec-no › .lbl.lbl--accent + .lbl · .h2 › .h-muted
.h3.h-accent · .h2.h-accent · the one accent headline a page may have. On cream it is the darker small-text orange, because an .h3 is 20px on a phone.
One column on a phone, columns from 860px.
01
Two sources, never mixed. The role as it is meant to be, and the working week as it really runs.
02
The system compares tasks, competencies and accountability between role and reality.
03
Every finding stays linked to its source. Observation and hypothesis are reported separately.
.grid-3 › .step › .step__n + .h3 + .body
Every statement stays linked to where it came from. Observation and interpretation are reported separately, never blended. No source, no finding.
We analyze how work is distributed across an organization. We do not measure how well a person performs, and we build no instrument that could.
Nobody is ever asked to rate themselves, and nothing we produce can be used against the person who said it.
.step.step--ruled › .h3 + .body · a hairline on top in place of the number, for principles
“Everyone somehow knew he was the hub. But only once it was written down did it become clear: this is too much.”
Cross-team coordination absorbs a substantial share of the working week. It appears in no role profile, and only the person carrying it can see it.
.grid-2 · 1.05 to 0.95, centred · .grid-2--top aligns to the top · .grid-cards for two cards
A year or a stage name in a narrow column, a hairline on top. Three column widths existed for the same pattern; they are modifiers now.
Role. Everyone knows their role or roles: the specific tasks and the bounded scope.
Our own agency was the first organisation we mapped with the framework.
Success is recorded against things that actually happened: objectives reached, methods newly put into practice.
.mrow.mrow--sm (44px) · .mrow (96px) · .mrow.mrow--lg (150px) › .mrow__marker
The five steps of Loop in one row, each with a bar that shows how much of the gap is left. Five across from 860px, wrapping below. On the website the caption is the original German term of the step.
ol.cycle › li.cycle__step › .cycle__n + .cycle__name + .cycle__sub + .progress
Under the cycle strip. The third drawn orange line next to the level line, and the only one that fades to one side.
.returns › .lbl.lbl--accent + .returns__line + .lbl
Who a product is for: an icon and a label heading, one sentence below. Three in a row.
The work they actually do becomes visible, and gets recognition and room.
Workload distribution across the team rests on facts, not gut feeling.
Role design, onboarding, and succession get an evidenced basis.
.grid-3 › .audience › .audience__head (.ico + h4.lbl) + .body.body--muted
Who is behind it, at the foot of the home page. The label is the person's name on the website. This page prints the part each one plays, because it carries no names.
Spent years inside other people's companies with the same brief under changing names: make this fit for what comes next. Every time, the work began the same way: by finding out what people actually do. Levelwork is that beginning, made repeatable.
Shapes how Levelwork looks and reads. The brochure, the visual system, and the way a finding is laid out so that it can be understood before anyone explains it.
.person › .lbl.lbl--accent + .body.body--muted · two in a .grid-2.grid-2--top
The hero without its height, for a page that opens with a headline and no wordmark, such as the legal pages. And the section that closes every page: a rule on top, a label, a headline and the mail link.
.band.band--dark.hero.hero--short › .hero__img + .wrap › .nav + .wrap.hero__body · no minimum height
The first step is smaller than you think
We take one role from your organization, capture the profile and the reality, and show you the difference. Then you decide whether the whole team should follow.
section.band.section.section--cta › .glow + .lbl + .h2 + .lead + .link-display
The page container is this column, 1180px. The product column is 900px.
You are filling six roles. Two of them are written down.
.wrap.wrap--app · 900px, centred, with the page gutter inside
Capture.
Compare.
Evidence.
.stack · 18px between children
Capture.
Compare.
Evidence.
.stack.stack--block · 34 to 62px, headline to first block
Capture.
Compare.
Evidence.
.stack.stack--break · 48 to 90px, before a figure or a second block
Two cells side by side from 560px, one above the other below. On the Loop page this holds what exists today next to what is being built.
In use today
The cycle is delivered by hand inside client engagements: role profiles, structured interviews, development plans out of measured deltas, and follow-up through learning groups.
In development
The product version: the same cycle without a consultant in the room for every step, so that a company can keep its own picture current after we leave.
.hairgrid.hairgrid--2 › cells · .hairgrid alone fits as many 150px cells as there is room for
| Class | Does |
|---|---|
| .wrap · .wrap--app | Centred container, 1180px or 900px, with the page gutter |
| .band · .band--light · .band--dark | A full-width stripe that paints its ground and re-points every role colour inside |
| .theme-light · .theme-dark | The same switch for any box. On <html> use data-theme="light" or "dark" |
| .section · .section--cta | Top and bottom rhythm of a section; the closing section with a rule on top |
| .stack · .stack--block · .stack--break | Vertical gap between children: 18px, the block step, the break step |
| .cluster | A row that wraps, 12px gap: buttons, tags, chips |
| .hairgrid · .hairgrid--2 | Cells divided by 1px lines with no gaps |
Work is a blur of people, paper and motion, and somewhere in it one conversation is sharp. Pictures are cropped to a wide band, have square corners and are never shown at full strength. The three pictures here are small previews from the image library, so they are soft at this size.
The website shows a picture at 80 % so the ground comes through: darker on black, paler on cream. Both are shown. The modifier .fig--dark keeps the room dark on cream as well.
figure.fig › .fig__frame › img + figcaption.lbl
figure.fig.fig--dark · black behind the picture on any ground
figure.fig.fig--scrim › .fig__frame › img + .fig__overlay.fig--portrait · 3 to 4, for a columnThe hero treatment (picture at 62 % under a black gradient) is shown in the first composed example below.
The product is cream. Its parts work on black as well and are shown on both. All of them come from the product pages unless marked.
There are no bubbles. The interviewer speaks as plain text on the page. The participant's answer is a block pushed to the right with an accent rail.
Think of last week. Which task took the most time that nobody would find in your job description?
Probably sorting out who does what between sales and service. Nobody asked me to, it just lands on my desk.
.turn › .turn__who + p · .turn.turn--me · .typing (new) · .turn.turn--error (new)
.chat__compose › .quick › .quick__row › .quick__name + .chip.chip--reply (.chip--gives | .chip--drains) · .textarea.textarea--chat · .chat__actions
In each row one chip is shown in hover. The character count is new; today the limit is silent.
.coverage › .lbl + .progress + .coverage__line
Keeps sales and service from working against each other.
Takes the calls nobody else wants to take.
Writes the offer once the scope is clear.
Shows working students where things are.
.coverage.coverage--sticky · stays in view while the panel scrolls, with the one shadow the system has. Scroll the box to see it.
.dist › .dist__row › .dist__label + .progress.progress--lg
Keeps sales and service from working against each other.
TasksNothing captured yet.
.role-card › .role-card__title + .role-card__purpose + .role-card__sub + .role-card__list (.role-card__pct) + .role-card__tags · .role-card--new animates in
Most of your week matches the profile. What does not is listed below, each point with the passage it comes from.
.summary › .lbl + .summary__title + .summary__text + .summary__facts
Three levels. The level is printed as a word and also shown by the rail and the ground. The quote style is new: the product had none and set evidence in grey mono or in a slanted face the fonts do not have.
“Nobody asked me to, it just lands on my desk.”Interview passage 14:22 · observation, evidenced
If this person is away for two weeks, requests wait until someone notices. The work is real and it is in no role profile.
Signal after 90 days: hand-overs on Monday take less than thirty minutes.
Both describe the same task as theirs. Neither profile mentions it.
It works today. It depends on one person's free Fridays.
.finding.finding--critical | --soon | --watch › .finding__severity + .finding__title + .finding__quote (.finding__source) + .finding__text + .finding__step + .finding__signal
.finding › dl.finding__rows › .finding__row › dt + dd · the short form shown on the website
Plan against reality, one row per difference. The structure comes from the earlier result page. The coloured round pills are replaced by tags.
Carries cross-team coordination. The profile lists none.
Recommendation: add it to the profile or move it to a named owner.
Monthly reporting is in the profile and has not been done since spring.
Recommendation: decide whether it is still needed.
Spends about a tenth of the week on quotations, planned as a fifth.
.delta-list › .delta-list__title + .delta › .tag + .delta__text + .delta__rec
Three versions existed, one with three cells. This is the hairline two by two from the event demo, with all four fields. The blind field is tinted.
No entries.
.quad › .quad__cell (.quad__cell--blind) › .quad__label + .quad__list | .empty
What to do about one finding. From the event demo. It shares the accent rail with the summary block.
F-07 · Coordination between sales and service has no owner on paper.
The Monday hand-over takes less than thirty minutes.
Ask both team leads who decides on an incoming request today.
F-11 · Quotations are written by two people who do not know of each other.
No quotation goes out twice.
Put both people in one room for twenty minutes.
.measure › .measure__finding + .measure__title + .measure__cols › .measure__key + .measure__value
The list that closes a report: every comparison number with where it comes from.
.sources › .lbl + ul.sources__list › li › .sources__claim + source text (+ .link)
One block for two jobs: the link that brings a participant back to the same conversation, and the invitation to a second person. The product set the link bare on the tint in one and in a box in the other. The system takes the box.
.share › .lbl.lbl--accent + .code.code--box + .share__actions · the link back to a conversation
After a click on Copy. The changed label is the only feedback today.
The invitation in its three states.
1 · No link yet · .share.share--lg › .share__title + .share__text + .share__actions
2 · Link created · adds .code.code--box, two .btn.btn--ghost and a .small hint
3 · Answers received · the same block around a .quad, with the open link as inline .code
The paid step at the end of a report. The button leaves for an external checkout. What the page shows after payment, while it is pending or when it fails is not designed.
Sixty minutes on what this report actually found. We read your report before the session and come with questions about your roles, not with general advice.
€25060 minutes · one founder, one report
Within 24 hours you get two or three slots and our first questions in writing. If you work with us afterwards, this comes off the price.
.offer › .offer__title + .offer__text + .offer__price (.offer__figure + .lbl) + .offer__list + .btn + .offer__small
€25060 minutes · one founder, one report
Ask for the sessionWithout a checkout link the button opens a mail to us.
The fallback: same block, the button is a mail link
Neither example has a class of its own. The only style attribute is the value of the progress bar. The first is always black and the second always cream, whatever the page switch says, because that is where each one lives.
The hero of the website, value for value, with one addition: the two buttons. The website hero has none. They are here to show the call to action in place and need a verdict.
Extra tasks. Silent overhead. Core work pushed aside. Everyone feels it. Nobody can prove it.
63%
of current work falls outside people's core job descriptions.
Deloitte, A skills-based model for work, 8 September 2022.
You said the Monday hand-over is yours. Who asked you to take it on?
Nobody asked me to, it just lands on my desk. I have done it since the two teams were merged.
That is the third task today that is in no profile. Here is what I have noted. Tell me if it is wrong.
“Nobody asked me to, it just lands on my desk.”Interview passage 14:22 · observation, evidenced
Every choice between two existing variants is in docs/decisions.md, one sentence each, numbered. These are the ones most visible on this page.