Brand Book

(00)

How to read this

This is a record of an identity that already exists, written so that anyone — a contractor, a future collaborator, or the studio itself six months from now — can extend it without guessing.

Every asset on this page is generated from the file that ships it, not redrawn for the document. The eight seals below are live SVG, cut by the same functions the studio's own seal study uses. The banners are the exact PNGs and JPEGs that were uploaded. The colours, the filter parameters, the platform dimensions and the glyph path are read out of source at build time, and the build fails loudly if any of them has moved.

That matters because a brand book is the artefact most likely to drift. A book that is hand-written once describes the identity on the day it was written, keeps looking authoritative forever, and is wrong about six months later — with nothing anywhere to signal it. This one is rebuilt with node brand/brand-book.mjs, and if the mark ever forks between the site's nav and the seal study, the build refuses to produce a book at all.

(01)

The mark

Two identical ribbons, hooked through one another. It is a knot, not a letter.

The geometry

The whole figure is four quarter-annuli and nothing else. Each arm sweeps 90° at an inner radius of 64 and an outer radius of 128, inside a 256-unit box. That makes the stroke exactly 64 units wide — one quarter of the box — everywhere in the mark, with no thick and thin, no optical correction and no tapering.

• No curve that is not a quarter circle. Every C in the path is the standard cubic approximation of a 90° arc; the control offsets are all 0.5523 of the radius.
• No straight line that is not a radial cut. The only four line segments are where two arms butt together on the vertical centreline.
• Three pivots, not four. Two arms turn about the centre of the box; the other two turn about the midpoints of the top and bottom edges. The white dots in the figure mark them.
• 180° rotational symmetry about the centre, and the lower ribbon is the upper one translated straight down by 128 — half the box. The mark repeats as well as it rotates.

Read as two objects rather than four, it is a pair of S-ribbons of constant width, each hooking into the counter the other one leaves. Neither ribbon is on top. There is no over-and-under, no drop shadow and no third colour deciding which strand wins — the interlock is carried entirely by the fact that both hooks are the same shape and neither closes.

What it is doing

The studio's argument is range: one person taking wildly different products from nothing to shipped, across domains that have no business sitting next to each other. A knot is the figure for that. It is not a picture of software, an industry, a letterform or a category — a monogram would have said "K", and "K" says nothing about what the work is. Two identical strands doing the same job in opposite directions, holding without a fastener, is the whole thesis compressed into one shape.

Where the path lives

One string, three consumers, byte-identical in all of them — checked by this build, which refuses to emit a book if they ever diverge:

M 128 192 C 92.654 192 64 220.654 64 256 L 0 256 C 0 185.308 57.308 128 128 128 Z
M 256 128 C 256 198.692 198.692 256 128 256 L 128 192 C 163.346 192 192 163.346 192 128 Z
M 128 64 C 92.654 64 64 92.654 64 128 L 0 128 C 0 57.308 57.308 0 128 0 Z
M 256 0 C 256 70.692 198.692 128 128 128 L 128 64 C 163.346 64 192 35.346 192 0 Z

The two paints

The mark takes exactly two fills. Flat vermilion is the default and the only one used inside a seal. The aurora ramp — the three-stop gradient the studio has carried since the 2026-07 pivot — appears when the glyph is drawn bare, without a plate around it: the live site's nav mark is the canonical case.

(02)

The seal

A studio mark's only real job is to say who made this. A chop is the object that does exactly that, and has done for two thousand years.

A logo badge announces a company. A seal — a hanko, a 落款 rakkan, an artist's chop — does something narrower and more useful: it is pressed into the corner of finished work by the person who finished it. It arrives after the thing is made, not before. It is small. It sits at the edge. It never competes with what it is signing, and its whole meaning is this is mine, and it is done.

That is precisely the relationship Kynth Studios has to what it puts out. The work is a landing page, an MVP, a wire, a film, an agent lane — dozens of them, in domains with nothing in common. The studio is not the subject of any of them. It is the hand in the corner. A container that means "signed by" rather than "brought to you by" is the correct one, and the fact that it also happens to be beautiful at 24px in the corner of a photograph is what makes it practical as well as right.

The vermilion is not decoration either. Seal paste — 朱肉 shuniku — is cinnabar in oil, and its red is the reason a chop reads instantly against black ink on paper. The studio's ground is near-black and its type is cream: the same three-value problem, and the same answer.

Two ways to cut a seal

The eight carvings

Live SVG, drawn at 132px on a paper plate. These are the same eight functions the banner pipeline calls; nothing here is a picture of a seal.

Which one ships

• Baiwen is the study's default. Unless a surface has a specific reason otherwise, the seal is the baiwen square — it is what all seven platform banners in section 07 carry, and it is the cut the lockup is drawn with everywhere in this book.
• Small formats are their own problem, and they are being cut separately. A browser tab, an app icon and a social avatar are 16–40px, which is below the size at which any of this erosion survives; they get purpose-cut versions rather than a scaled-down display seal. Which cut a tab and an avatar ship is an open decision at the time of writing, so this book does not record one.
• Micro takes over below about 40px. Same carving, re-cut: wider knockout gaps and the speckle pulled back to almost nothing, because erosion that is beautiful at 132px is mush at 24px. See section 03.
• Rakkan is the signature form. The tall 2:3 artist's-signature proportion, for a corner bug on video and photography where a vertical block reads better than a square.
• The rest are vocabulary, not alternates. Disc, double frame, chamfered and heavy distress exist so that a surface with a real constraint has a considered answer instead of an improvised one. None of them replaces baiwen as the mark.

In situ

The seal doing its actual job — a corner bug at shipping size, over real ground. The warm frame is the hard case: a red seal on a warm brown subject sits close to its background in hue, which is why mono-white exists.

(03)

The erosion

The chewed edge and the lifted pigment are computed, every time the seal is drawn. Nothing about the texture is a picture.

A real chop never lands clean. The edge of the plate is irregular, the paste does not take evenly, and the impression carries voids where the pigment lifted. Faking that with a texture PNG is the obvious move and the wrong one. The erosion here is two SVG filter passes, evaluated at render:

/* Procedural ink filter.
   Two independent passes, deliberately at different scales:
     1. EDGE CHEW  — low-frequency displacement, high amplitude. Irregular perimeter.
     2. INK LIFT   — coarse fractal noise, hard-thresholded so only the bottom tail of
                     the distribution punches through. Big soft voids, solid core.
   The failure mode to avoid is a high-frequency void layer: that reads as halftone
   dither, not as pigment that didn't take. */
function inkFilter(id, {warp=3.2, freq=0.055, gain=8, bias=-2.5, seed=11}){
  return `<filter id="${id}" x="-25%" y="-25%" width="150%" height="150%" color-interpolation-filters="sRGB">
    <feTurbulence type="fractalNoise" baseFrequency="${freq}" numOctaves="4" seed="${seed}" result="n1"/>
    <feDisplacementMap in="SourceGraphic" in2="n1" scale="${warp}" xChannelSelector="R" yChannelSelector="G" result="d1"/>
    <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="${seed+4}" result="n2"/>
    <feColorMatrix in="n2" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 ${gain} ${bias}" result="holes"/>
    <feComposite in="d1" in2="holes" operator="in"/>
  </filter>`;
}

Why procedural, and not a texture PNG

• One definition covers 22px to 512px. The nav mark, the favicon, a share card and a 4200px banner are the same file with a different size. A raster would need an export per size, and the exports would drift.
• The texture is re-tuned per size rather than scaled. The seal's noise frequencies are fixed in its own 120-unit box, so what changes with size is the displacement amplitude and the void threshold — the curve in tune() below. The type filter goes further and solves its frequencies from the seal size, which is what makes the speckle on the wordmark physically the same size as the speckle on the seal beside it. A scaled PNG can do neither: it scales its noise with the image, so a large seal gets boulders and a small one gets sand.
• It stays in the DOM. The seal is selectable structure a page can recolour, animate or invert. A PNG is an opaque rectangle with a baked-in colour.
• Nothing to re-export. Changing the carving is changing one number in one file, and every surface picks it up on the next build.

What has to change as it shrinks

Two things, and neither is optional. The curve lives in the component that draws the mark, quoted here in full:

/**
 * Two things have to change as the seal gets smaller, and neither is optional:
 *
 *  1. THE GLYPH GROWS RELATIVE TO THE PLATE. At 22px a mark drawn at the large-format ratio
 *     (0.567 of the plate) leaves the four quadrant pieces about 2px apart, and they merge into
 *     a blob. Opening it to 0.63 keeps the counters legible.
 *  2. THE EROSION BACKS OFF. Displacement amplitude is in plate units, so it scales down with
 *     the seal — but the *threshold* does not, and a void that removes 30% of a 120px seal
 *     removes 30% of a 22px one too, where there is no detail to spare. Below 34px the voids
 *     are pulled back to a trace and the chew is halved.
 */
function tune(size: number) {
  const t = Math.max(0, Math.min(1, (size - 24) / 40)); // 0 at <=24px, 1 at >=64px
  return {
    glyph: 0.63 - 0.063 * t,     // plate fraction the mark occupies
    warp: (1.4 + 1.6 * t),       // displacement, in plate units
    bias: -(3.5 - 0.6 * t),      // void threshold: -bias/gain. higher = fewer voids
    radius: size < 30 ? 7 : 9,
  };
}

The threshold is the subtle one. Displacement amplitude is expressed in plate units, so it scales down with the seal on its own. The void threshold does not — a setting that removes 30% of a 120px seal removes 30% of a 22px one too, where there is no detail to spare. Below 34px the voids are pulled back to a trace and the chew is halved, and the glyph's share of the plate opens up so the four quadrant hooks do not merge into a blob.

The size ladder — what actually survives

The real test. A corner watermark lands somewhere between 24px and 48px on a phone. Every carving, at every size it might ship at, live.

(04)

The type

One face does everything, and a mono does the labels. Plus the measurement that makes the wordmark and the seal read as a single object instead of two things placed near each other.

The two cuts

Both official, both shipping, and the choice between them is about the surface underneath, not about taste.

• Inked — BDO Grotesk 700, with the seal's own grain applied to the letters. The primary. For photography, video bugs, banners and anything with texture under it, where clean type would look pasted on.
• Clean — BDO Grotesk 600, no filter. For UI chrome, small sizes, print and any surface where the erosion would simply read as noise.

The grain on the letters is a separate filter from the seal's — forked deliberately, so that tuning the type can never touch an approved carving. Its frequencies are solved from the seal size, so the speckle on the wordmark is physically the same size as the speckle on the seal beside it. The type stays live, selectable DOM text throughout.

/* Ink for the TYPE. Deliberately a SEPARATE filter from the marks' inkFilter —
   forked, not shared, so tuning type never touches an approved seal.
   The frequencies are solved from the seal size so the grain on the letters is the
   same physical size as the grain on the seal beside it: the mark draws its noise in
   a 120-unit viewBox scaled to `size` px, this filter draws in CSS px. */
function inkTextFilter(id, size, strength){
  const px      = size / 120;              // one mark unit, in CSS px
  const voidF   = (0.85 / px).toFixed(3);  // matches the mark's 0.85 void field
  const edgeF   = (0.05 / px).toFixed(3);  // matches the mark's 0.05 edge field
  const warp    = (3.0 * px * strength).toFixed(2);
  const bias    = strength >= 1 ? -2.9 : -3.15;
  return `<filter id="${id}" x="-18%" y="-28%" width="136%" height="156%" color-interpolation-filters="sRGB">
    <feTurbulence type="fractalNoise" baseFrequency="${edgeF}" numOctaves="4" seed="19" result="tn"/>
    <feDisplacementMap in="SourceGraphic" in2="tn" scale="${warp}" xChannelSelector="R" yChannelSelector="G" result="td"/>
    <feTurbulence type="fractalNoise" baseFrequency="${voidF}" numOctaves="2" seed="23" result="tv"/>
    <feColorMatrix in="tv" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 9 ${bias}" result="tvoids"/>
    <feComposite in="td" in2="tvoids" operator="in"/>
  </filter>`;
}

The cap-flush, and why it matters

/* MEASURED font metrics, read from the actually-loaded face via canvas TextMetrics.
   cap  = cap height (top of "H" to baseline), as a fraction of em
   asc  = font ascent, desc = font descent — needed to strip the browser's half-leading.
   Guessing these is what made the text overshoot the seal. */
const MET = {};
function metrics(face, weight){

const M   = metrics(face, weight);
  /* Solve font-size so cap-top(line 1) -> baseline(line 2) == flush x seal height.
     That span is font*(lh + cap): one full line advance plus one cap height. */
  const font = (flush * size) / (lh + M.cap);
  /* Strip the half-leading the browser puts above line 1 and below line 2, so the
     element's layout box equals that span exactly.
       halfLead = (lh - (asc+desc)) / 2           air added above AND below each line
       trimTop  = halfLead + (asc - cap)          line-box top down to the cap
       trimBot  = halfLead + desc                 baseline down to line-box bottom  */
  const halfLead = (lh - (M.asc + M.desc)) / 2;
  const trimTop  = (halfLead + (M.asc - M.cap)) * font;
  const trimBot  = (halfLead + M.desc) * font;

(05)

Colour

One red, one ink, one paper, one cream — and a three-stop ramp that is the only place any other hue appears.

Which red

The house red is #E01E37, and the interesting question is not whether it is nice but whether a brand red or a traditional pigment is the right one for a seal. Both were cut and compared:

The traditional pigments are warmer, duller and objectively closer to a real shuniku impression — and that is exactly why they lose. #E01E37 is already load-bearing everywhere else in the system: it is the nav mark, the Send-the-brief button, every accent on kynth.studio and the mid stop of the aurora ramp. A seal in cinnabar would be a second red, and a second red is how an identity starts to look like two identities. The seal takes the colour the studio already has.

The full set

The aurora ramp

Three stops — #FF4D8D → #E01E37 → #FF7A29 — running pink through the house red to orange. It has exactly two jobs, and no third:

• The bare mark. When the glyph is drawn without a plate around it — the live site's nav is the canonical case — it takes the ramp.
• The ground. The three stops are the shader's colour list. Everything you see behind every banner is this ramp and nothing else.

Two rules that are already law

• Over photography the seal goes mono-white, not red. A red seal on a warm ground sits too close to its background in hue and stops reading as a stamp. The white cut exists for exactly that condition — see the in-situ frames in section 02.
• Type on ink is cream, never pure white. #f4f2ed against #0a0a0a; the contrast is ample and the page stops buzzing.

(06)

The ground

One shader, one frame, one set of parameters. It is the only ground the studio has.

The background behind every banner is a real GrainGradient from @paper-design/shaders-react, held at a fixed frame and rendered through headless Chrome with WebGL on SwiftShader. It is not a gradient mesh, not a Photoshop file, and not an export somebody once made and everyone has been re-cropping since. It regenerates.

The parameters

// The grain ground. THIS is the Kynth Studios banner — nothing else is.
const GrainGround = () => (
  <GrainGradient style={fill} speed={0} frame={6100}
    colorBack="#0B0B0C" colors={["#FF4D8D", "#E01E37", "#FF7A29"]}
    softness={0.72} intensity={0.42} noise={0.38} shape="corners" />
);

Why grain, and why only grain

The seal's own erosion is a threshold on noise. The ground is noise. They are the same idea at two scales, which is why the seal sits in this ground rather than on top of it — the texture of the mark and the texture of the field are made the same way.

Four other shader grounds were built on the identical lockup and shown side by side: dithering, perlin noise, neuro noise and dot orbit. All four were rejected. They are not kept as alternates and they are not commented out — they are gone from the banner page.

(07)

The banner system

One design, cut per platform at that platform's real upload size. Not one master, cropped seven ways.

Every frame below is authored at its native pixel size. The LinkedIn company cover is a 6:1 composition, not a 3:1 banner squeezed into a band; the YouTube channel art is composed inside its guaranteed strip, not centred in a 1440px frame and hoped for. Everything scales off the frame's usable height against the 500px the lockup was drawn at, so a 700px band and a 396px cover get the same optical weight rather than the same pixel numbers.

What is identical across all seven: the ground, the seal, the wordmark, the cap-flush, the erosion. What varies: where the block sits, the line of copy, and the platform chip. The copy varies for a reason — the first line says what that account posts, so a visitor landing on a profile learns what the feed is instead of reading the same slogan for the seventh time.

The numbers, and where they came from

Placement, and what it is dodging

The avatar or logo dead zone is bottom-left on every one of these platforms. So "left" means left of centre but well clear of it, and the block never drops into that corner. The platform chip is the other half of the problem: on the tight 3:1 headers the bottom ~60px is bleed and the avatar owns the bottom-left, so a corner chip either hides in the bleed or collides with the last line of type. On those frames the chip becomes the block's last line instead — it can never collide, and it inherits the block's alignment for free. Only the 6:1 LinkedIn band and YouTube's safe strip have the room to keep a corner mark.

The finals

These are the actual files that were uploaded, inlined at reduced resolution.

X — @kynthstudios

Upload

1500×500

Placement

c — right-biased, one line + URL

Covered

circular avatar, 200×200 at 30,270

Line

What shipped, and what it actually does

1500×500 · 3:1 · avatar eats 250×250 bottom-left · 60px top/bottom is bleed

Bluesky — kynth.studio

Upload

3000×1000

Placement

a — centred

Covered

circular avatar, 190×190 at 26,284

Line

Product notes, posted as they land

3000×1000 upload · 3:1 · same avatar overlap · ships as JPEG so Bluesky’s recompression cannot fuzz the type

LinkedIn — company page

Upload

4200×700

Placement

b — left, two lines

Covered

954×428 block at 0,272

Line

Landing in 3 days · MVP in 2 weeks · AI feature in 5 days

4200×700 · 6:1 · LinkedIn’s own spec · logo tile eats the left 23% · renders 792×134

LinkedIn — founder profile

Upload

1584×396

Placement

c — right-biased, one line + URL

Covered

470×220 block at 0,176

Line

Founder — Kynth Studios

1584×396 · 4:1 · safe zone ~1350×220 centred · avatar bottom-left

YouTube — @KynthStudios

Upload

2560×1440

Placement

c — centred, one line + URL

Guaranteed

centred 1546×423 only

Line

Product films, demos and walkthroughs

2560×1440 · only the centred 1546×423 is guaranteed on every device · everything lives inside that strip

X — @kyisaiah47 (founder)

Upload

1500×500

Placement

c — right-biased, one line + URL

Covered

circular avatar, 200×200 at 30,270

Line

Building Kynth Studios in public

1500×500 · same design language, founder line

Bluesky — kyisaiah47.kynth.studio (founder)

Upload

3000×1000

Placement

a — centred

Covered

circular avatar, 190×190 at 26,284

Line

Product decisions and production lessons

3000×1000 upload · founder line

(08)

What is law

Settled decisions. These are not preferences to weigh against convenience at the point of use.

1. The studio is "Kynth Studios". Plural, both words, every time. Not Kynth Studio, not Kynth, not KYNTH.
2. Never a vertical. Kynth Studios is never described as belonging to one industry, niche or category — not compliance, not B2B, not govtech, not "software for X". The AI runs through everything: the products, the process, the workflow, the branding, the distribution and the experiments. The range across wildly different domains is the point, and the shipped product list is a fact about history, not a definition of scope. Individual products name their own vertical loudly; the studio above them never does.
3. No decorative divider lines. Anywhere. No hairline rules flanking a label, no ornamental horizontal rules, no line—text—line lockups. A tracked mono label stands on its own. Structural borders in real UI — a table edge, a card edge — are not this.
4. The wordmark is live text beside the mark, never baked into one image. A baked-in name cannot be selected, searched, recoloured or re-weighted, and it mis-scales at every size the export did not anticipate. The seal draws the glyph only.
5. The grain gradient is the only ground. One shader, one frame, one parameter set, re-rendered per aspect ratio. Not a default — the only one.
6. Baiwen is the seal. The other seven carvings are vocabulary for surfaces with real constraints. Below ~40px the micro cut takes over. Neither is an alternate identity.
7. #E01E37 is the only accent. The aurora ramp appears in exactly two places — a bare mark and the ground. Never inside a seal, never on type, never as UI chrome.
8. Over photography the seal is mono-white. Vermilion on a warm ground stops reading as a stamp.
9. The erosion is procedural. No texture PNG, ever. If a surface cannot run an SVG filter, it gets the clean cut — not a rasterised imitation of the inked one.
10. Every product site credits Kynth Studios. The studio's name appears on the work it signs.
11. Everything published is English only. The Japanese and Chinese terms in this book name the carvings; they are not copy and they do not appear on outward surfaces.

(09)

Colophon

Every seal on this page is live SVG, drawn by the same functions that cut the studio's own artwork. Nothing here is a picture of the identity.

This document is generated. The mark's geometry, the eight carvings, the ink filters, the cap-flush measurements, the shader's parameters and the banner dimensions are all read out of the files that produce the real artwork, at build time — so the book cannot describe an identity the studio no longer has. If the mark ever forked between the site's header and the seal study, the build would refuse to produce a book at all.

The banners above are the actual uploaded files, shown at reduced resolution. The colour values are the ones this page is painted in. The type is the face you are reading.