Open desk
A seat in the shared floor, and the whole community with it.
v0.1 — internal, not indexed
Black and white do the work. Colour is punctuation.
A working stylesheet for Talent Garden Vilnius. Everything here is a token — change a value once and it moves everywhere. This page is the documentation and the test surface at the same time: if something looks wrong here, it is wrong in the stylesheet.
View tag.css
Drop it in with
<link rel="stylesheet" href="/tag.css">
01
Three rules
Monochrome first
Ink, paper and grey carry the layout. A page should still read correctly with every accent removed. If it collapses without coral, the hierarchy was doing no work.
One accent per view
Coral marks the single most important action. Lime highlights or fills. Two coral buttons on one screen means neither is primary.
Weight, not colour
Emphasis comes from switching weight mid-sentence — the house headline device. Reach for bold before reaching for a colour.
02
Logo
Four variations, taken from the official artwork as outlined vector. Every fill is currentColor, so a mark takes the colour of whatever it sits in.
.tg-logo--mark
Mark only — avatars, favicons, tight spaces.
.tg-logo--stacked
Stacked lockup — square-ish spaces.
.tg-logo--horizontal
Horizontal lockup — headers, footers.
.tg-logo--wordmark
Wordmark — where the mark already appears.
On any ground
The counters and the speech bubble are knockouts, not white shapes, so the background shows through. The same file works on paper, on ink, and on an accent.
Rules
- Clear space of one bubble-height on every side — .tg-logo-frame.
- Minimum widths are built into the classes; below them the bubble dots close up.
- Never stretch. The classes set aspect-ratio from the viewBox, so setting width alone is safe.
- One colour only. The mark is monochrome by design — it takes the surrounding color.
- The original artwork is print rich-black #231F20, not #000. On screen it renders as ink-900.
03
Colour
The ink ramp is the system. Coral is Talent Garden’s, taken from the live site. Lime comes from the campus illustrations. Contrast against white is computed live below — nothing here is guessed.
Ink & paper
Coral — Talent Garden
Lime — campus illustration
Why coral-900 and lime-900 exist
Each swatch is measured twice. As text is the colour set on white; as fill is ink set on the colour. The two tell very different stories: lime-500 is unusable as text (about 1.4:1) but excellent as a background under ink. coral-500 fails as text too. Both are fills — buttons, highlights, edges, bursts. When an accent must be readable as text, use the 900 step. This is the single most common way a palette like this quietly fails.
04
Typography
Plus Jakarta Sans, variable, self-hosted. Geometric enough to sit in the Talent Garden family, but drawn for screens rather than posters.
Ag
Seven floors. Zero neighbours.
A big place for explorers
Membership & spaces
Seven floors of studios, desks and meeting rooms in the centre of Vilnius. Ąžuolas, ėglis, įlanka, šešėlis, ūkas, žvaigždė — Lithuanian diacritics are covered by the latin-ext subset.
Caption — metadata, footnotes, image credits.
Overline — section labels
The headline device
Talent Garden headlines are sentence case and change weight mid-sentence. It is the most recognisable thing in the brand, and it does the job colour would otherwise be asked to do.
Yep. Team would love to work here.
Seven floors. Zero neighbours. 100% community.
<h2 class="tg-h2 tg-mixed">… <strong>…</strong></h2>
Highlight
A lime highlight for one phrase.
Or a coral tint, softer.
05
Buttons
Ink is the default. Coral is reserved for the one action that matters most on a given screen.
06
Components
Badges
Default
Outline
Ink
Coral
Lime
Cards
Studio
A room of your own, from two people to twenty.
The inverse panel
Where black is used as a field rather than as ink.
Form
We reply within a working day.
Error state — coral-900 for the text, coral-500 on the border. The fill tint is never used to carry the message.
Table
| Plan | Access | From |
|---|---|---|
| Open desk | Mon–Fri, 9–18 | €149 / mo |
| Fixed desk | 24/7 | €229 / mo |
| Studio | 24/7, private | On request |
07
Icons
Twenty-four icons on a single 24-unit grid. Uniform 1.5 stroke, round caps and joins, nothing decorative. Drawn for this system rather than borrowed, so the curves match the mark.
arrow-right
arrow-up-right
chevron-right
plus
close
check
search
menu
bell
calendar
clock
globe
users
chat
mail
phone
pin
building
leaf
wifi
coffee
lock
star
monitor
Sizes
The stroke is nudged as the icon scales — a hairline reads heavier small and thinner large, so holding it constant would make the set drift.
20 · 24 · 32 · 48 px — strokes 1.65 / 1.5 / 1.35 / 1.15
In context
Fibre
Community
One accent icon, used once.
Garden
The rest stay in ink.
Seven floors
Same weight, same grid.
Rules
- Icons are decorative — keep aria-hidden and let the text label the control.
- An icon alone in a button needs an aria-label on the button.
- Never mix this set with another. Differing stroke weights are the fastest way to look unfinished.
- Colour an icon only to make one point per view, with .tg-icon--accent.
- Do not scale below 20px; the chat dots and wifi arcs close up.
08
Motifs
The starburst is from the Vilnius campaign work. One per layout, never two — it is a shout, and two shouts is noise.
Call
New
Open
.tg-rule and .tg-rule--bold
09
Tokens
Space — 4px base
Radius
--tg-radius-sm 4px
--tg-radius 8px
--tg-radius-lg 16px
--tg-radius-pill 980px
Motion
--tg-dur-fast 120ms
--tg-dur 200ms
--tg-dur-slow 360ms
--tg-ease cubic-bezier(.2,.7,.2,1)
10
Do & don’t
The brief was explicit: monochrome with accents, not a coral-branded page. Here is the difference.
Do
Seven floors. Zero neighbours.
Weight carries the emphasis. One coral button. Nothing else shouts.
Don’t
Seven floors of coral
A coral field with competing buttons. The accent has become the brand, and no single action is primary.