creatordesign system
GitHub
Logo
Foundation · Creator Design System

Logo

The dot over a lowercase i is called a tittle. The whole identity is that the tittle is the record light — so the mark isn't a wordmark plus a dot, the dot is already part of the word and it just happens to be red and alive.

Sizes — one ladder
Degradation — Swarnıl → Sıl → S• → •
S

There is no “Sı” — a lone dotless ı is just a stick and it reads as an l. The compact mark is a capital S with the tittle moved to its top-right shoulder: the same dot, relocated, which is why it still reads as the same logo.

Responsive — the markup carries all three, CSS chooses
S

Full above 48rem · Sıl below it · S• below 26rem. No JS, no layout shift, and the accessible name never changes — only the visual form does.

Lockups
The build is the story Design system S
States & colour

.logo · .logo__i + .logo__tittle — the i is set with the dotless ı (U+0131) and the tittle is drawn, so it can be any colour and can pulse

S16 S32 S48 S64 S180 · 512

.favicon-* — the S sits centred in the tile and the dot rides at 1 o’clock; below 32px the mark gets proportionally bigger and blunter, or it turns to mush

.logo-clear clear space = one tittle diameter · .logo-dot-halo for the dot over photos

never — stretch · rotate · recolour the tittle · outline. The tittle is the only red thing on the mark, always.