2026-07-22 · ROOM 049
IDK.
idkwhatimdoing — the library you enter by admitting it.
01 · Brand Overview
The place you go because you don't know.
IDK is a library of rooms, one per day, that answers your questions and then refuses to let the answer slide off you. The visitor is the I in IDK — the institution knows.
idkwhatimdoing is a recursive archive: a date-indexed record of real questions, real answers, and the vocabulary they surfaced — built to improve the reader's comprehension and to compel them to start a library of their own. Every answer ends in a gauntlet: a check that the concept actually stuck. Nobody fully knows what they're doing; the brand's whole posture is that admitting it is the way in.
Personality
- Cerebral
- Leads with mechanism, not steps. Explains why a thing is true, portioned so it lands.
- Anticipatory
- Knows what you don't know but need to — and serves it before you ask.
- Unhurried
- A library, not a feed. Nothing scrolls past you; rooms wait.
- Testing
- Answers end in gauntlets. Comprehension is verified, never assumed.
- Digestible
- Depth in portions. One concept, one entry, one room at a time.
- Humble-proud
- The name is a confession; the institution wears it with total confidence.
Audiences
- The self-taught dev — ships real software, no CS degree as armor, often learning at night.
- The bootcamp grad / career-switcher — building a foundation while standing on it.
- Potatofolk — arrivals from the Potatuhs world, learning to work with Claude as a real collaborator.
- The returning scholar — anyone circling back through their own archive to make it canon.
Construction principles
- The visitor is the I in IDK.The institution knows; the reader is never mocked for not knowing.
- Quiet in the lobby.Entry surfaces stay calm. Intensity lives inside rooms, scaled to each day's questions.
- One day, one room.Days are isolated. Each renders its own weather. The compendium wing comes later.
- Answers end in gauntlets.Nothing is complete until it has been tested.
- Pattern over picture.Imagery is abstract structure — growth, evolution, scale — never literal illustration.
- Never make anyone feel stupid.The hard refusal. It outranks every other rule in this document.
02 · Logo System
Three letters and a period.
The mark is IDK. — "I don't know," stated with total confidence. The period is the tell: the institution is certain, and the certainty is gold. No drawn logo exists yet; the mark is typographic by design.
Primary mark
IDK.
IDK.
IDK.
IDK.
The period is gold wherever color exists. In one-color contexts it takes the letter color — it is never removed, and never any third color.
Long-form wordmark
idkwhatimdoing
Lowercase, mono, one word — the mumble on the deed. Used in running text, URLs, and metadata. Never the primary mark on a surface the reader enters by.
Avatar & favicon
IDK.
.
Clear space & minimum size
unit = cap height of K, on all sides
IDK.
Partner lockups
Mark · hairline rule · partner, separated by one clear-space unit each side. IDK leads on its own surfaces, follows on the partner's.
IDK. | potatuhs
Misuse
Do
- Set the mark in the display face, weight 700
- Keep the period — always, in every context
- Use approved backgrounds: lobby, abyss, verdigris, surface
- Give it the full clear-space unit
Don't
- Add a question mark — IDK does not ask, it answers
- Expand to "I don't know" inside the mark
- Set the primary mark lowercase ("idk" is chat, not the institution)
- Stretch, outline, shadow, or gradient-fill the letters
- Recolor the period to anything but gold or the letter color
- Place on busy pattern — the plates of section 06 are grounds for art, not marks
03 · Color
Atlantean: trust at depth, growth in the patina, gold as punctuation.
Deep teal carries blue's measured trust-and-knowledge associations plus green's growth — the brand's stated axis — and is more distinctive than default navy. Verdigris is bronze that has evolved. Gold marks what is earned, and is never used as paint.
Primary palette
Structural palette
The Descent
The system's only gradient — 180°, shallows into abyss. Allowed on the cover and dark showcase surfaces. Never behind body text, never on components.
Pairing & contrast — measured, recorded honestly
| Pair | Sample | Ratio | Verdict |
|---|---|---|---|
| Ink on Lobby | The room is open. | ≈ 12.5 : 1 | AAA — body text |
| Foam on Abyss | The room is open. | ≈ 15 : 1 | AAA — body text |
| Gold on Abyss | Earned. | ≈ 7.4 : 1 | AA — any size |
| Biolume on Abyss | Live. | ≈ 11.6 : 1 | AAA — any size |
| Verdigris Deep on Lobby | A link, safely. | ≈ 5.6 : 1 | AA — body text |
| Muted on Lobby | metadata | ≈ 5.2 : 1 | AA — body text |
| Verdigris on Lobby | Large only | ≈ 3.5 : 1 | FAIL small text — graphics & ≥24px only |
| Gold on Lobby | Never text | ≈ 2.1 : 1 | FAIL — graphic accents only, never text |
Do
- Let lobby surfaces dominate — roughly 70% surface, 20% ink, ≤10% accent
- Use gold once per view — it is the period, not a theme
- Reach for verdigris-deep whenever the accent must carry text
Don't
- Set gold text on light surfaces — it measurably fails
- Put The Descent behind reading text
- Introduce new hues; the palette grows by decision, not by drift
Print values (CMYK/Pantone): cut for now — this brand does not print yet. Add at first print job.
04 · Typography
A serif that has read everything.
Serif display for the library's authority; a body serif designed for screens keeps the document bookish without the reading cost; mono for code and marginalia. Research on serif/sans is mixed for screens — the pairing keeps each face in the role the evidence supports.
display / body / mono
Not knowing is how you get in.
The archive holds every question you asked and the vocabulary it surfaced, one day per room. Spectral was drawn for long reading on screens; it makes the document a book without making it a strain.
2026-07-22 · entry 03 · vocab: intersection-observer
Hierarchy
| Level | Live | Size | Weight / LH | Usage |
|---|---|---|---|---|
| Hero | Aa | clamp(2.9–4.9rem) | 700 / 1.02 | Cover, room headers |
| H1 | Aa | clamp(2.1–3.1rem) | 600 / 1.12 | Section statements |
| H2 | Aa | clamp(1.55–2.15rem) | 600 / 1.15 | Page titles |
| H3 | Aa | 1.35rem | 600 / 1.2 | Sub-heads |
| H4 | Aa | 1.05rem | 600 / 1.3 | Card titles |
| Body large | Aa | 1.19rem | 400 / 1.6 | Ledes, statements |
| Body | Aa | 1.0625rem | 400 / 1.65 | Reading text, ≤65ch |
| Body small | Aa | 0.9375rem | 400 / 1.55 | UI copy, lists |
| Caption | Aa | 0.8125rem | 400 / 1.5 | Metadata, figcaptions |
| Label | Aa | 0.75rem mono | 500 / 1.4 / +0.08em caps | Eyebrows, tokens, dates |
Do
- All-caps only at label size, mono, +0.08em tracking
- Max two weights of one family per surface
- Keep reading text at or under 65 characters per line
Don't
- Set body text in the display face
- Fake bold or oblique — load the real weight or don't use it
- Stretch, condense, or outline any face
- All-caps the display serif — the library never shouts
05 · Iconography
Thin bronze linework.
Lucide, configured to be ours: 1.75px stroke on a 24px grid, round joins. Icons are wayfinding in the library — quiet, consistent, never decoration.
| Library | Lucide (ISC license) |
| Grid | 24 × 24 |
| Stroke | 1.75px, round caps and joins |
| Sizes | 16 (inline) · 20 (nav) · 24 (default) · 32 (feature) |
Do
- Inherit the text color; verdigris-deep when interactive
- Foam on dark surfaces
Don't
- Gold icons — gold belongs to the period and one emphasis per view
- Filled or two-tone styles; the line is the language
- Icons as decoration beside every heading
06 · Imagery — Abstract Art Direction
Pattern over picture.
IDK never illustrates literally. Its images are abstract structure — growth, evolution, pattern at scale — emerging from dark grounds the way understanding emerges from not-knowing. Quiet in the lobby: entry surfaces carry little or none of this; density belongs inside rooms.
Qualities
- Structural
- Every image is a system — spiral, strata, lattice — never a scene.
- Emergent
- Forms grow: small elements repeat into large ones. Scale is the subject.
- Deep
- Dark grounds. Light — biolume, gold — is scarce and therefore meaningful.
- Calm at the threshold
- The lobby gets stillness. A room's art density may rise with its day's weather.
Studies (CSS, standing in for commissioned plates)
Do
- Generate from the palette only — abyss ground, verdigris/biolume/gold light
- Let one structural idea govern each image
- Scale density to the room's energy — hectic day, denser plate
Don't
- Literal Atlantis kitsch — no columns, tridents, mermaids
- Stock photography of libraries, laptops, or thinking people
- Literal potatoes — the sponsor's world stays in the sponsor's rail
- Art behind reading text
08 · UI Components
The room, the gauntlet, and the door handles.
Live components, rendered from tokens. The set is small on purpose: the archive is a reading surface with a few working parts.
Buttons
The gauntlet button is the only gold component — one per view, maximum, and only for the act of being tested. Focus rings are biolume on every control; try tabbing.
Room card
Text input
Asked questions become rooms. There is no wrong door.
Gauntlet options
States are textual, never color-only: a wrong pick says "not quite" and points back at the answer. The gauntlet tests; it does not grade the person.
09 · Shadows & Borders
Light through water.
Elevation is soft, cool, and ambient — never a hard offset. Because water blurs, a shadow alone never defines an edge: raised elements always carry a hairline border to anchor them.
--sh-1 · resting
--sh-2 · raised / hover
--sh-3 · overlay / modal
Radius scale
sm · 4
md · 8
lg · 14
xl · 22
pill
| sm · 4px | Inputs' inner elements, focus rings, small chips |
| md · 8px | Inputs, quiz rows, small tiles |
| lg · 14px | Cards, panels, plates |
| xl · 22px | Feature surfaces, modals |
| pill | Buttons only |
| Border | 1px Rule (#C9D6D2) — every raised element; never as decoration on text blocks |
10 · Motion
Tidal: slow, certain, never bouncy.
Things in IDK surface and settle the way objects move through water — decisive starts, long calm finishes. Nothing springs, nothing wobbles, nothing loops for attention.
drift
cubic-bezier(.25,.6,.3,1) · 800ms
Content reveals — the long settle.
surface
cubic-bezier(.22,1,.36,1) · 420ms
Interface feedback — hover, open, select.
tide
cubic-bezier(.6,0,.3,1) · 420ms
Position swaps — panels, drawers, the nav.
| Name | Properties | Recipe |
|---|---|---|
| Surface | opacity + translateY(12px) | 800ms drift — entries, cards, section reveals |
| Settle | opacity only | 420ms surface — swaps, tab panels |
| Shimmer | outline-color | 180ms surface — focus arriving; state, never decoration |
| Stagger | delay | 70ms increments, six siblings max |
Reduced motion
Under prefers-reduced-motion: reduce:
transforms are removed, reveals render visible immediately, autonomous motion stops.
Opacity-only state changes may remain. This page obeys its own rule — toggle the OS
setting and reload.
Duration tokens: 180ms fast · 420ms normal · 800ms slow. Nothing in the brand animates longer than 800ms except a room's one-time opening.
11 · Layout
Rooms off a corridor.
A reading column with air around it. The spacing scale is deliberately non-monotonic — small steps for detail, long jumps for silence between thoughts.
Containers
narrow · 720px · reading text
default · 1180px · document surfaces
wide · 1420px · plates & showcase
Grid
12 columns, 24px gutter. Asymmetry is a feature: entry surfaces keep a generous left margin — the lobby's quiet — and let content sit off-center rather than filling the frame.
Spacing scale
4
8
14
22
36
56
88
132
Section rhythm
Vertical section padding: clamp(88px, 12vw, 160px). Sections are separated by a hairline rule carrying the gold period — the document breathes, then punctuates.
12 · Voice & Tone
IDK talks like the librarian of the akashic records.
It knows. It knows what you don't know but need to, and it hands it to you already digestible — often before you knew to ask. The visitor is the I in IDK; the institution never says "I don't know" about anything except, proudly, its own name.
Tone by context
| Context | Tone | Example |
|---|---|---|
| The lobby (entry, nav) | Calm, minimal, few words | "Today's room is open." |
| Answers | Cerebral, anticipatory, portioned | "Before this makes sense you need one term: a token. Here it is." |
| The gauntlet | Direct, testing, respectful | "You have the answer. Keep it." |
| Errors & empty states | Honest, room-metaphor, never blaming | "No questions were asked this day. The room was never opened." |
Vocabulary
- Words we use
- room · day · open · ask · gauntlet · hold / keep (for retained knowledge) · the compendium (the future wing) · vocab
- Words we never use
- "simply" · "just" · "obviously" · "as you know" · "dumb question" · gamification slang (streaks, XP, grinding) · "utilize"
Do
- Define a term the moment it's first needed
- Speak with certainty; hedge only when the truth hedges
Don't
- Make anyone feel stupid — the refusal that outranks all style
- Leave a reader hanging after an answer; the gauntlet is the follow-through
Sample copy — pending approval
Not knowing is how you get in.
You asked about closures on a Tuesday in July. The room remembers, even if you don't — yet. Step back in.
Something broke on our side. Your question is safe, and the room will reopen.
14 · Asset Naming & Governance
The spec outranks every renderer.
This document is generated from brand/DESIGN.md
and brand/tokens.css. When a surface and the spec disagree, the
surface is wrong.
Asset naming
idk-{category}-{label}-{variant}.{ext}
idk-mark-primary-reversed.svg
idk-avatar-social-512.png
idk-plate-growthspiral-01.pngFollows the Potatuhs convention ({brand}-{category}-{label}-{variant}.{type})
so assets from both worlds can share a shelf.
| Marks | SVG (source) · PNG on request |
| Avatar | PNG 512 / 192 / 32 |
| Favicon | SVG (the gold period) + 32px PNG |
| Plates | PNG 2×, generated from the palette |
| This document via Export PDF |
Governance
SSOT: brand/DESIGN.md +
brand/tokens.css, in this repo.
Consumers: the archive site (src/styles.css)
currently carries the first-draft palette; once this spec locks, its tokens are
rewritten from here. Propagation is one-way: spec → consumers, never back.
Change rule: edit the spec, update tokens.css, then propagate. A value changed in a consumer without a spec edit is a bug, not a decision.