Looks
How the blocks on a door's pages look. Choose one of Kapi's three themes, make one with Kapi, or upload your own from your AI or a designer.
A door is where a company's employees, partners or customers sign in to Kapi Works. Its pages are stacks of Kapi's blocks: the welcome, the steps to start, courses, updates, resources, who to ask and the rest. A theme decides how those blocks look, in light and dark: colours, borders, corners, spacing, layout and type sizes. Kapi's own screens, such as sign-in, the menu, the course player, certificates and Account, keep the Works look in every door.
Kapi's three themes
Each comes in light and dark, fits a phone 320 pixels wide, and uses the Works font and greys. The company's colour and photo are the only colours from outside them, and tints of the colour stay light enough that every word keeps a contrast of 4.5:1, whatever the colour.
| Theme | What it does | First choice for |
|---|---|---|
| Clean | Today's Works Home: white paper, hairline rows, and the door colour on buttons and progress | Employee doors |
| Bold | A band of the door colour behind the welcome, beside the photo when the door shows one; cards and rows tinted with the colour, round corners, pill buttons and larger titles | Partner doors |
| Photo | The photo across the top with the welcome's words on a dark shade over it, white cards with a soft shadow, more room and larger titles | Customer doors |
Colour and photo
Every theme takes two things from the company.
- Colour. The company colour from Settings, Company, unless the door's Setup chooses another. Until the company picks one, it is the colour of the company's Kapi Works artwork. Kapi writes words on the colour in white or black, whichever has a contrast of 4.5:1 or more. A colour with less than 3:1 against white paper is darkened for lines, rings and progress until it reaches 3:1. Buttons and a Bold welcome use the colour deepened just enough for white words at 4.5:1, so a bright blue or coral keeps white words, and a light colour keeps black ones.
- Photo. The company's welcome image from Settings, Sign-in page, one of Kapi's twelve welcome images, or a photo uploaded for the door: PNG, JPEG or WebP, up to 1600 by 1000 pixels. Until there is one, the door uses the welcome image that matches the company's artwork.
Your own theme
In Works Studio, open an audience, then Setup. Under the three themes there are two ways to make one:
- Make one with Kapi. Say what it should feel like, such as "calm and formal, navy and gold, lots of space". Kapi's AI chooses the welcome, the cards, the corners, the spacing, the titles, the buttons and, if you name one, the colour, and Kapi writes the theme from those choices, so it is ready in seconds and passes the checks.
- Upload a theme. Choose a CSS file, or paste the CSS, from a designer or from your own AI. Copy prompt for your AI copies the prompt for ChatGPT, Claude, Gemini or any AI.
Every way ends the same. Kapi's reader keeps what the look format allows and notes what it left out, then your browser runs the checks while you preview the door. When the checks find something, Let Kapi fix adds the few rules the theme needs and keeps the rest as it was. A theme belongs to the company, so each of its doors can use it.
The look format
A look is CSS for Kapi's own block markup. Kapi puts every rule under the content area of the door's page, so a look styles the blocks and nothing around them. A rule that starts with .dark applies when the person has chosen the dark theme in Account.
THE LOOK FORMAT
- Plain CSS, at most 30 KB after Kapi reads it. It styles Kapi's blocks on a door's pages: Kapi puts every rule under the page's content area, and Kapi's own screens keep their look.
- Every block is a section with the class block and its kind's class, such as section.block.welcome.
- Block kinds: .welcome, .learning, .steps, .courses, .text, .links, .updates, .resources, .contacts, .form, .designed.
- Other classes: .page, .page-title, .block, .block-title, .block-line, .button, .button-secondary, .cards, .card, .card-title, .card-detail, .rows, .row, .row-title, .row-detail, .table-head, .date, .status, .progress, .progress-bar, .count, .welcome-photo, .welcome-body, .welcome-title, .welcome-line, .next-step, .record, .steps-list, .step, .step-title, .step-detail, .text-body, .links-list, .update, .update-title, .update-text, .contact, .contact-name, .contact-role, .contact-email, .folder, .resource, .form-purpose.
- Elements inside them: a, p, h1, h2, h3, ul, ol, li, img, span, strong, em, time, small.
- States: [data-state="done"], [data-state="next"], [data-state="open"], [data-state="locked"], [data-tone="danger"], [data-tone="warning"], [data-tone="done"], [data-tone="neutral"].
- Pseudo-classes: :hover, :focus-visible, :first-child, :last-child, :nth-child.
- Pseudo-elements: ::before, ::after, ::marker.
- Selectors use only these, joined by spaces, >, + or ~. Kapi removes rules with ids or other classes and elements, such as #main, body or div.card.
- Dark theme: start a rule with .dark, as in .dark .card { … }. It applies when the person chooses the dark theme. Don't use prefers-color-scheme.
- Properties, by group, and no others:
colour: color, background-color, border-color, border-top-color, border-right-color, border-bottom-color, border-left-color, outline-color, text-decoration-color, accent-color, fill, stroke
background: background, background-image, background-size, background-position, background-repeat
border: border, border-top, border-right, border-bottom, border-left, border-width, border-style, border-top-width, border-right-width, border-bottom-width, border-left-width, outline, outline-width, outline-style, outline-offset
radius: border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
shadow: box-shadow, text-shadow
space: padding, padding-top, padding-right, padding-bottom, padding-left, padding-inline, padding-block, margin, margin-top, margin-right, margin-bottom, margin-left, margin-inline, margin-block, gap, row-gap, column-gap
size: width, height, min-width, min-height, max-width, max-height, aspect-ratio
layout: display, position, grid-template-columns, grid-template-rows, grid-template-areas, grid-area, grid-column, grid-row, grid-auto-flow, grid-auto-columns, grid-auto-rows, flex, flex-direction, flex-wrap, flex-grow, flex-shrink, flex-basis, justify-content, justify-items, justify-self, align-items, align-content, align-self, place-items, place-content, place-self, order, object-fit, object-position
text: font-size, font-weight, font-style, line-height, letter-spacing, text-transform, text-align, text-decoration, text-decoration-line, text-underline-offset, list-style, list-style-type, list-style-position, font-variant-numeric
motion: transition, transition-property, transition-duration, transition-timing-function, transition-delay, animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode
content: content
- Door colours: var(--door-colour), var(--door-on-colour), var(--door-colour-strong), var(--door-fill), var(--door-on-fill), var(--door-paper), var(--door-ink), var(--door-muted), var(--door-line), var(--door-progress).
- The door colours have dark values when the person's theme is dark. Use --door-fill with --door-on-fill for buttons and bands, --door-on-colour for words on the door colour, and --door-colour-strong for lines, rings and progress on paper.
- var() reads only the door colours and your own variables, which start with --look-, as in --look-gap: 1rem.
- Pictures: only url(kapi-asset:photo), the door's photo, and url(kapi-asset:logo), the company's logo, in background properties.
- Type: font-size in rem from 0.75 to 3.5, font-weight from 400 to 600, line-height as a number from 1 to 3, letter-spacing in em from -0.05 to 0.3. No font-family: Kapi's blocks keep their own font.
- Layout: position only static or relative, margins of zero or more, and no display: none.
- Generated content: only an empty string, as in content: "".
- @media only for width (min-width or max-width), prefers-contrast and prefers-reduced-motion.
- Transitions, animations and @keyframes only inside @media (prefers-reduced-motion: no-preference).
- No @import, @font-face, other @ rules or !important. Kapi removes anything outside this format, with a note for each.Kapi's names, progress, dates and status words keep Kapi's own styles, so they show at a readable size and in Kapi's words in every look.
What Kapi removes
Kapi's reader is code, not AI. It removes @import, @font-face, font-family, every url() except Kapi's two pictures, position other than static or relative, transform, filter, content other than an empty string, !important, expression(), behavior and -moz-binding, with a note for each. Notes don't stop publishing. A look Kapi is unable to read, or one over the limit, does. What Kapi says lists every finding, each with how to fix it.
A look is at most 30 KB after reading, and Kapi reads nothing over 400 KB. Reading a look Kapi has read changes nothing.
The checks
While you preview a door with the look, your browser checks it: axe-core's WCAG 2.2 AA rules at 1180 and 375 pixels wide, in light and dark, and no sideways scrolling at 320 pixels. The checks see every part a look can style, not only the blocks on the page you're previewing: every kind of block, steps and courses in every state (Overdue, due soon, in progress, done) and buttons as people see them. So a rule for course cards is checked even before your door shows any. When they find something, Setup names the part and where, such as "Details on course cards are too faint against their background in dark mode, on a laptop and a phone." Publishing needs a passing result for the door's look. Kapi's three themes, and a theme Kapi makes, are written by Kapi's code and need no check.
The prompt
Copy prompt for your AI copies this prompt, with your company's name and what you described. Here it is for a made-up company:
Kapi Works look prompt · Northwind Payroll
Write a look for my company, Northwind Payroll, on Kapi Works, our learning platform. Our employees, partners and customers each sign in through their own door. A look is CSS that decides how Kapi's blocks look on a door's pages, such as the welcome, the steps to start, courses, updates and who to ask, in light and dark.
What I want: Calm navy and gold, formal.
THE LOOK FORMAT
- Plain CSS, at most 30 KB after Kapi reads it. It styles Kapi's blocks on a door's pages: Kapi puts every rule under the page's content area, and Kapi's own screens keep their look.
- Every block is a section with the class block and its kind's class, such as section.block.welcome.
- Block kinds: .welcome, .learning, .steps, .courses, .text, .links, .updates, .resources, .contacts, .form, .designed.
- Other classes: .page, .page-title, .block, .block-title, .block-line, .button, .button-secondary, .cards, .card, .card-title, .card-detail, .rows, .row, .row-title, .row-detail, .table-head, .date, .status, .progress, .progress-bar, .count, .welcome-photo, .welcome-body, .welcome-title, .welcome-line, .next-step, .record, .steps-list, .step, .step-title, .step-detail, .text-body, .links-list, .update, .update-title, .update-text, .contact, .contact-name, .contact-role, .contact-email, .folder, .resource, .form-purpose.
- Elements inside them: a, p, h1, h2, h3, ul, ol, li, img, span, strong, em, time, small.
- States: [data-state="done"], [data-state="next"], [data-state="open"], [data-state="locked"], [data-tone="danger"], [data-tone="warning"], [data-tone="done"], [data-tone="neutral"].
- Pseudo-classes: :hover, :focus-visible, :first-child, :last-child, :nth-child.
- Pseudo-elements: ::before, ::after, ::marker.
- Selectors use only these, joined by spaces, >, + or ~. Kapi removes rules with ids or other classes and elements, such as #main, body or div.card.
- Dark theme: start a rule with .dark, as in .dark .card { … }. It applies when the person chooses the dark theme. Don't use prefers-color-scheme.
- Properties, by group, and no others:
colour: color, background-color, border-color, border-top-color, border-right-color, border-bottom-color, border-left-color, outline-color, text-decoration-color, accent-color, fill, stroke
background: background, background-image, background-size, background-position, background-repeat
border: border, border-top, border-right, border-bottom, border-left, border-width, border-style, border-top-width, border-right-width, border-bottom-width, border-left-width, outline, outline-width, outline-style, outline-offset
radius: border-radius, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius
shadow: box-shadow, text-shadow
space: padding, padding-top, padding-right, padding-bottom, padding-left, padding-inline, padding-block, margin, margin-top, margin-right, margin-bottom, margin-left, margin-inline, margin-block, gap, row-gap, column-gap
size: width, height, min-width, min-height, max-width, max-height, aspect-ratio
layout: display, position, grid-template-columns, grid-template-rows, grid-template-areas, grid-area, grid-column, grid-row, grid-auto-flow, grid-auto-columns, grid-auto-rows, flex, flex-direction, flex-wrap, flex-grow, flex-shrink, flex-basis, justify-content, justify-items, justify-self, align-items, align-content, align-self, place-items, place-content, place-self, order, object-fit, object-position
text: font-size, font-weight, font-style, line-height, letter-spacing, text-transform, text-align, text-decoration, text-decoration-line, text-underline-offset, list-style, list-style-type, list-style-position, font-variant-numeric
motion: transition, transition-property, transition-duration, transition-timing-function, transition-delay, animation, animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode
content: content
- Door colours: var(--door-colour), var(--door-on-colour), var(--door-colour-strong), var(--door-fill), var(--door-on-fill), var(--door-paper), var(--door-ink), var(--door-muted), var(--door-line), var(--door-progress).
- The door colours have dark values when the person's theme is dark. Use --door-fill with --door-on-fill for buttons and bands, --door-on-colour for words on the door colour, and --door-colour-strong for lines, rings and progress on paper.
- var() reads only the door colours and your own variables, which start with --look-, as in --look-gap: 1rem.
- Pictures: only url(kapi-asset:photo), the door's photo, and url(kapi-asset:logo), the company's logo, in background properties.
- Type: font-size in rem from 0.75 to 3.5, font-weight from 400 to 600, line-height as a number from 1 to 3, letter-spacing in em from -0.05 to 0.3. No font-family: Kapi's blocks keep their own font.
- Layout: position only static or relative, margins of zero or more, and no display: none.
- Generated content: only an empty string, as in content: "".
- @media only for width (min-width or max-width), prefers-contrast and prefers-reduced-motion.
- Transitions, animations and @keyframes only inside @media (prefers-reduced-motion: no-preference).
- No @import, @font-face, other @ rules or !important. Kapi removes anything outside this format, with a note for each.
RULES
1. Style Kapi's blocks as they are: don't hide them or add words.
2. Words have a contrast of at least 4.5:1 with their background, and large words at least 3:1, in light and dark.
3. Everything fits a phone 320 pixels wide, without sideways scrolling.
4. Give the whole look. Don't shorten it or write "…".
Before I publish, Kapi checks every door page with the look: axe-core's WCAG 2.2 AA rules at 1180 and 375 pixels wide, in light and dark, and sideways scrolling at 320 pixels.
If you can open web pages, read https://docs.kapiworks.com/build/looks first.
Reply with only the CSS.Your AI replies with the CSS. Paste it into Works Studio, and Kapi reads it like any other look. For AI agents lists Kapi's other prompts.
Set it up with Kapi
Talk to Kapi beside the door's preview. It sets the door up with Setup's own controls as you talk, asks what it needs one question at a time, and leaves anything that reaches people, and Publish, to your click.
Designed blocks
A company's own HTML and CSS on a door's page, with Kapi's live parts filled in for each person. Make one with Kapi, with your own AI or from HTML.