Clean bones. Colorful parts.

The mark: two forms, one overlap

Two capsules lean toward each other like two people mid-conversation. Where they cross, a third shape appears. That shape is the company, and it only exists because both showed up. In v2 the forms are drawn as lines, so the overlap is the only solid part of the mark.

Logo files

Every file is an outlined SVG, so it needs no fonts. Each lockup comes in five colourways: colour (-), -dark, -mono (currentColor), -ink and -white. On the live site, the file names link straight to the SVGs.

Clear space. Keep half the mark's width free on every side of a lockup.

Don't rotate or straighten the forms. The lean is the idea.

Don't put the colour mark on teal. Use -white on brand fills and photos.

Don't recolour the forms. It's berry and teal, or one colour.

Minimum sizes: mark 16px (use mark-small up to 24px); horizontal lockup 88px wide. Always write the name in lowercase with its dot: nol.satu, even at the start of a sentence.

Palette

Semantic tokens

These switch automatically between light and dark. The Tailwind class is the token name: color.surface.subtle becomes bg-surface-subtle, and color.fg.muted becomes text-fg-muted.

Status

Status colours report what happened. They never decorate. Pair each one with an icon or a word, so colour is never the only signal.

Block categories

Every block belongs to one of six categories. Its colour appears as a tag, a dot, the drag handle and the canvas outline while it's being placed. The six hues are generated at matching lightness and chroma in OKLCH, so none shouts over the others and every tag passes 7:1.

Contrast report

The build checks every pairing below in both themes and fails if one drops under its minimum: 4.5:1 for text, 3:1 for control boundaries, focus rings and dots.

Elevation

Most surfaces are flat and use a 1px line. Shadows are for things that float above the page. In dark mode, shadows get a faint light edge so they still read.

Motion

Motion confirms what happened. It never performs. Most things take 120–180ms. snap is reserved for a block landing in place after a drag. With reduced motion on, every duration drops to 0.

Buttons

One primary button per view. Labels are verbs that say exactly what happens: "Publish site", not "Submit". Secondary is the default for everything else. Ghost is for toolbars.

<button class="inline-flex h-[34px] items-center gap-2 rounded-sm bg-brand px-3.5 text-[13.5px] font-medium text-on-brand shadow-xs hover:bg-brand-hover">Publish site</button>
<button class="inline-flex h-[34px] items-center gap-2 rounded-sm border border-line-control bg-surface px-3.5 text-[13.5px] font-medium text-fg shadow-xs hover:bg-surface-hover">Add block</button>

Form fields

Labels always sit above the field. Hints explain the format before anyone gets it wrong. Errors replace the hint and say how to fix it.

<label class="type-body-sm font-medium" for="name">Site name</label>
<input id="name" class="h-[34px] w-full rounded-sm border border-line-control bg-surface px-3 text-fg placeholder:text-fg-subtle focus:border-brand focus:outline-none focus:ring-3 focus:ring-brand/20 aria-invalid:border-danger">
<p class="type-caption text-fg-muted">Shown in browser tabs and search results.</p>

Selection

<input type="checkbox" class="size-[18px] appearance-none rounded-2xs border-[1.5px] border-line-control bg-surface checked:border-brand checked:bg-brand">
<button role="switch" class="h-5 w-9 rounded-full bg-line-strong aria-checked:bg-brand">…</button>

Tags & badges

Tags name a block's category and are always mono and lowercase. Badges report status and always include a word. new uses berry and is the only badge allowed to.

<span class="inline-flex h-[22px] items-center gap-1.5 rounded-full bg-cat-structure-subtle px-2 type-label normal-case text-cat-structure-fg">
  <span class="size-1.5 rounded-full bg-cat-structure"></span>structure
</span>

Blocks on the canvas

A block is the product's core object. At rest it's a flat card. When selected it gets a 2px teal ring. While dragging it tilts slightly and gets shadow-md, and it lands with the snap easing. The drop target uses brand-subtle with a dashed teal line.

<article class="grid rounded-md border border-line bg-surface p-3.5 shadow-xs data-selected:border-transparent data-selected:ring-2 data-selected:ring-brand data-dragging:-rotate-1 data-dragging:shadow-md transition ease-snap">…</article>

Feedback

Toasts confirm and disappear after 4 seconds. Inline alerts stay until the problem is fixed. Say what happened, then what to do.

Menus, tooltips, modals, tabs

Builder shell

The whole system at once, in both themes. The frame stays neutral, category colour appears only on blocks, and teal marks what you can act on.

Tailwind v4 in the builder app

/* apps/<app>/src/app.css — add "@nolsatu/design-system": "*" to the app's dependencies */
@import "tailwindcss";
@import "@nolsatu/design-system/tailwind.css";
/* outside the monorepo: copy https://design.nolsatu.id/tokens/tailwind.css and import that */

/* Now available: bg-canvas bg-surface text-fg text-fg-muted border-line border-line-control
   bg-brand hover:bg-brand-hover text-on-brand bg-cat-flow-subtle text-cat-flow-fg
   rounded-sm|md|lg shadow-xs..lg ease-standard|snap type-h1 type-body type-label  */

Theme switching without a flash

Semantic colours follow the OS by default. To let people choose, set data-theme on <html> before the first paint. Tailwind's dark: variant follows the same attribute.

<script>
  try {
    const t = localStorage.getItem("ns-theme"); // "light" | "dark" | null (system)
    if (t) document.documentElement.dataset.theme = t;
  } catch {}
</script>

Naming

Tailwind's default colour, radius, shadow, text-size and easing scales are switched off, so only nol.satu values can be used. The default segment is dropped from names.