Brand
The GSS marks.
Everything you need to show GSS: the mark, the wordmark, the icon and the social cards. Every file is a vector SVG with its text outlined, so it needs no font. The braces and the dot share their geometry with the logo scene, so the flat mark and the 3D one are the same drawing.
01The mark
{ ● }: bone braces and a signal dot. A style sheet around the one thing it
draws. On signal, everything turns void; there are no other colourways.
02Wordmark and lockup
gss. in Martian Mono 800, lowercase, the period in signal. The lockup puts the
mark before gss in Martian Mono 600, its x-height centred on the dot: it is
the header of every page.
03App icon and favicons
The dot alone, on a raised square with rounded corners (22%). From 64 px up it
keeps two faint isolines; at 16 px, the dot only.
12864
32
1632 px20 px · minbelow: the icon24 px16 px · min04Colour
A ladder of near-blacks, three greys for text and one accent. Signal is scarce: one filled signal element per view, text on it is void.
- void
- #0A0A0C
- page, render
- surface
- #111114
- editor, code
- raised
- #16161B
- active, selected, icon
- line
- #202026
- hairlines
- bone
- #E8E6E1
- text, the braces
- ash
- #A09E99
- secondary text
- dim
- #807F88
- labels, metadata
- signal
- #FF5A36
- the one accent, the dot
05Type
Three faces, three jobs: Martian Mono speaks, Geist explains, JetBrains Mono does the work. All free.
Style sheets for the GPU.
GSS compiles selectors, the cascade and @keyframes into a single raymarching shader. If you can write CSS, you can already read GSS.
@scene { sphere#ball; } #ball { material: jelly(0.6); }
07Don't
The mark is a piece of code: it is drawn once, in two colours, and left alone.
noteThe rules behind this page live in DESIGN.md. A mark that changes there
changes here, and in src/playground/logo.gss.
06Social cards
1200 × 630, for links and posts. The renders are real: GSS drew them.