Design system · 14
Take the marks with you.
The materials these pages are made from, packaged for decks, documents and mock-ups. The marks are exported from the same drawings the site renders, and the tokens are the site’s own stylesheet.
The pack
Everything below in one archive: each mark in ink and reversed, as SVG and PNG; the seal; two profile images; both textures; and a short note on what each is for.
Marks
Each mark comes in ink, for paper and other light grounds, and reversed, for ink and other dark ones. Use the SVG wherever it is accepted; the PNGs have transparent backgrounds.
Wordmark
The name in Asar, outlined, for where the font cannot follow.
Seal
Not a logo. Read its rules first. Prefer the PNG: its rough edge is drawn with filters most design tools cannot reproduce from the SVG.
Profile images
The mark on a square of ink or paper, with room for a circular crop. For accounts and directories that ask for an avatar.
Textures
Paper tile
Seamless card stock. Repeat at 384px and multiply over the page colour. Shown with its contrast exaggerated.
Bookcloth
Seamless weave. Draw at 192px — half its pixel size — and multiply over a cover dye. Shown over indigo.
Tokens
The values every colour, surface and control on the site is drawn from, in two forms. The stylesheet is the site’s own, with the comments that explain each value. The JSON follows the Design Tokens format, for design tools and build pipelines that import it.
:root {
--radius: 0.625rem;
--background: oklch(0.9779 0.0042 56.38);
--foreground: oklch(0.3421 0.0379 61.15);
--card: var(--color-white);
--card-foreground: oklch(0.3421 0.0379 61.15);
--popover: var(--color-white);
--popover-foreground: oklch(0.3421 0.0379 61.15);
--primary: oklch(0.5967 0.0558 61.59);
--primary-foreground: oklch(0.1448 0 0);
--secondary: --alpha(var(--primary) / 15%);
--secondary-foreground: oklch(0.3421 0.0379 61.15);
--muted: --alpha(var(--foreground) / 6%);
--muted-solid: color-mix(in srgb, var(--foreground) 6%, var(--background));
--muted-foreground: oklch(0.4563 0.0061 48.59);
--accent: oklch(0.9068 0.0112 89.73);
--accent-foreground: oklch(0.3467 0.0231 86.12);
--destructive: var(--color-red-600);
--destructive-foreground: var(--color-white);
--border: --alpha(var(--foreground) / 11%);
--input: --alpha(var(--foreground) / 20%);
--ring: var(--primary);
--chart-1: var(--primary);
--haru-shu: oklch(0.55 0.18 35);
--ink-soft: --alpha(var(--foreground) / 78%);
--ink-faint: --alpha(var(--foreground) / 45%);
--impress-bg: --alpha(var(--foreground) / 3.2%);
--impress-edge: --alpha(var(--foreground) / 9%);
--impress-shadow:
inset 0 1px 2px --alpha(var(--foreground) / 9%),
inset 0 2px 6px --alpha(var(--foreground) / 4%),
0 1px 0 --alpha(var(--color-white) / 70%);
--stock-bg: oklch(0.99 0.003 70);
--stock-shadow:
0 1px 1px --alpha(var(--foreground) / 10%),
0 2px 4px --alpha(var(--foreground) / 6%),
0 0 0 1px --alpha(var(--foreground) / 5%);
--stock-shadow-hover:
0 2px 2px --alpha(var(--foreground) / 8%),
0 14px 28px --alpha(var(--foreground) / 12%),
0 28px 56px --alpha(var(--foreground) / 7%),
0 0 0 1px --alpha(var(--foreground) / 5%);
--cover-strategy: oklch(0.42 0.068 250);
--cover-design: oklch(0.44 0.078 320);
--cover-build: oklch(0.46 0.055 175);
--cover-scale: oklch(0.52 0.098 50);
--paper-opacity: 1;
--cover-wear: 1;
--perf-color: --alpha(var(--foreground) / 30%);
--perf-gap: 7px;
--key-face: oklch(0.29 0.033 61.15);
--key-face-hover: oklch(0.34 0.036 61.15);
--key-highlight: oklch(0.47 0.04 61.15);
--key-rim: --alpha(var(--key-highlight) / 38%);
--key-light-face: oklch(0.995 0.002 70);
--key-light-face-hover: var(--color-white);
--key-light-highlight: var(--color-white);
--key-light-shade: --alpha(var(--foreground) / 8%);
--key-light-ring: --alpha(var(--foreground) / 15%);
--press-shadow-stock-active:
inset 0 1px 3px --alpha(var(--foreground) / 16%),
0 0 0 1px --alpha(var(--foreground) / 8%);
}Typefaces
All five are open-source and free to install. Get them from their publishers rather than from here, so the copy you have is current and carries its licence.
Terms of use
The H mark, the wordmark and the seal are trade marks of Haru Assembly Pty Ltd. You may use them, as supplied, to refer to the studio: in an article, a directory, a list of partners or suppliers, or work made with us.
Do not redraw, recolour, distort or animate them, combine them with another mark, or use them in a way that suggests the studio made, endorses or is responsible for something it is not. The textures and tokens are provided for work on Haru Assembly’s behalf.
For anything not covered here — another format, a co-branded lockup, use in advertising — ask the studio first.