{"node":{"id":"803f6d6d-0ecf-4a9c-8438-26d25e3f73b7","handle":"803f","type":"note","authorName":"Vincent Yeung","intent":"learning","title":"Tool: Astryx theming","aiSummary":null,"content":"## What it does\n- Makes Astryx look like your site instead of Meta's default.\n- A theme is a set of CSS variable overrides. You don't fork or wrap components.\n\n## When to reach for it\n- You build on Astryx and need it to match your DESIGN.md.\n- You need light and dark modes, or a different look in one section.\n\n## How to use it\n- Start from one of seven themes: neutral, butter, chocolate, matcha, stone, gothic, y2k.\n- Wrap the app in `<Theme theme={...}>`. `mode` is `'system'` by default, or `'light'` or `'dark'`.\n- The main variables:\n  - `--color-background-{body,surface,card,popover,muted}`\n  - `--color-text-{primary,secondary,accent,disabled}`\n  - `--color-border`, `--color-border-emphasized`, `--color-accent`\n  - type: `--font-family-{body,heading,code}` and `--text-…-{size,weight,leading}`\n  - corners: `--radius-{inner,element,container,page,none,full}`\n  - shadows: `--shadow-{low,med,high}`\n- The default accent is #0064E0 in light and #2694FE in dark.\n- Give any value as a `[light, dark]` pair.\n- `defineTheme` builds a theme from:\n  - value overrides;\n  - scale settings that generate values from a few inputs: type (base, ratio), corners (base, multiplier), motion (fast, medium, ratio);\n  - component overrides by name (`base`, `variant:value`), not CSS selectors. A new value adds a new variant.\n- `extends` builds on another theme. Give only what changes.\n- `theme palette generate` turns seed colours into 21 shades each for light and dark.\n- `adaptations` change values by screen width, pointer, contrast or motion setting.\n- Nest themes: wrap a section in its own `<Theme>`.\n- `theme add` wires in an installed theme. `theme eject` copies its source for you to own.\n- With server rendering, use built themes. Runtime themes flash on load.\n- With Tailwind, `tailwind-theme.css` maps the values to classes such as `bg-surface` and `text-primary`.\n- A theme names its font but doesn't load it. Add the font link yourself.\n- On a no-build page, set `data-astryx-theme` on `<html>`.\n\n## What happened when we used it\n- Our build tried Astryx. It's themed through CSS variables.\n- It reads clean and systematic, so it needs a lot of theming to feel warm.\n\n## Source\n- Source: Astryx.","capturedAt":"2026-10-29T09:31:11.432Z","createdAt":"2026-10-29T09:31:11.433Z","updatedAt":"2026-10-29T09:31:11.433Z","spanId":null,"contributor":null,"audiences":[{"kind":"public","createdAt":"2026-11-06T04:27:16.651Z"}],"fingerprint":"dc9053afefddf3d2523af49f2dc7652c9ce9955adc55647354c3fbbbee347beb","revisionNo":"1","structureHash":"f8aecdf69fc5b9e2c44844d6a75246bb7995d69e7545fae9599379f4f58453e9","page":"https://lattris.com/by/b/memories/803f6d6d-0ecf-4a9c-8438-26d25e3f73b7"},"links":[{"direction":"out","verb":"references","reason":"Follow to install it, or to check its licence and cautions before relying on it.","hash":"57eb3a39f408b9bc3c5d121578e21e634c8fbc4d008c4b4587df7f67a67d1e0b","node":{"id":"2f2c0edd-25d7-48f1-8130-b1fe4c351f65","handle":"2f2c","type":"note","title":"Source: Astryx","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/2f2c0edd-25d7-48f1-8130-b1fe4c351f65?links=1","fingerprint":"d761ec49db42fdd14c0969ea58965fac3359b23f1d42679abe0f507d95208719","revisionNo":"2","structureHash":"ee089e894f5fbd9426846cab5da491a0b2750257bd73c23532be7958ca7fa3b9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/2f2c0edd-25d7-48f1-8130-b1fe4c351f65"}},{"direction":"out","verb":"references","reason":"Follow to write down the values the theme must match.","hash":"b2b7bc3eac8e3282996f459ab1e1eae629c2ce8097839a0517a5a760dffbfe02","node":{"id":"5e1fb5f2-54ab-4ad2-a5bc-f016a21ba0d7","handle":"5e1f","type":"note","title":"Tool: DESIGN.md, the look written down","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/5e1fb5f2-54ab-4ad2-a5bc-f016a21ba0d7?links=1","fingerprint":"1fddcc701e7b8ee8581304eac00f9d21309205010c6f6cf36ed613071c24efc4","revisionNo":"1","structureHash":"b776ac85e0e71758fce3ccfe1e1c7c30221b2684bf47375df56b75778c3580b7","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/5e1fb5f2-54ab-4ad2-a5bc-f016a21ba0d7"}},{"direction":"in","verb":"references","reason":"Pick it when you build on Astryx and need it to look like you, not like Meta.","hash":"5bf6fa52ef5b1999773bf7d10cd712085212714766cd22a743071f567f1360e0","node":{"id":"25a75047-6f28-4228-8728-3b212e241ed5","handle":"25a7","type":"note","title":"Drawer 2: The look","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/25a75047-6f28-4228-8728-3b212e241ed5?links=1","fingerprint":"a7e6643893360cbb761c32fe35ac2ff509b39c054c2bef570dd0f45f48ae5652","revisionNo":"2","structureHash":"6c940c1ec3e9834f903982e4a24e1fec9929335b8b1c32092d274305442e70eb","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/25a75047-6f28-4228-8728-3b212e241ed5"}},{"direction":"in","verb":"references","reason":"Follow to see how to use this capability.","hash":"d1efd48aca1153171e235c79ad6497d2c2d25fee59e4cf9cdd0057a656233c5a","node":{"id":"2f2c0edd-25d7-48f1-8130-b1fe4c351f65","handle":"2f2c","type":"note","title":"Source: Astryx","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/2f2c0edd-25d7-48f1-8130-b1fe4c351f65?links=1","fingerprint":"d761ec49db42fdd14c0969ea58965fac3359b23f1d42679abe0f507d95208719","revisionNo":"2","structureHash":"ee089e894f5fbd9426846cab5da491a0b2750257bd73c23532be7958ca7fa3b9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/2f2c0edd-25d7-48f1-8130-b1fe4c351f65"}},{"direction":"in","verb":"references","reason":"Follow to make the forms match your look.","hash":"a5daa1a64cadfc71b3cb5be62fb753758ca87e53878ace19435e511fe6768161","node":{"id":"652bb4cd-0dc8-432d-b2c5-f571a5e308d2","handle":"652b","type":"note","title":"Tool: Astryx forms","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/652bb4cd-0dc8-432d-b2c5-f571a5e308d2?links=1","fingerprint":"100abb4f344196d894688c0c46799e4f88d89b136b3ee53ff8f205f218929e35","revisionNo":"1","structureHash":"706bfddf88472bf50997bb2c0db60b9a8a8f2d11bc773b3ca071064762bd373e","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/652bb4cd-0dc8-432d-b2c5-f571a5e308d2"}},{"direction":"in","verb":"references","reason":"Pick it to make Astryx match your DESIGN.md.","hash":"ad9047432e795221220e2d18f4b37cc4ca91d18b770070d67f051fca665b83af","node":{"id":"98841826-13b8-4843-ba74-fd26981525db","handle":"9884","type":"note","title":"Drawer 5: Building it","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/98841826-13b8-4843-ba74-fd26981525db?links=1","fingerprint":"5ed8da87f333ea517c55f8b050ca46d893bb1b907cb1151fa7feef68cc0cccdf","revisionNo":"3","structureHash":"f4b3deab8497b5b9ae3a7026a8ae25e2d882e23aeece6ec80513f14acd2b4221","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/98841826-13b8-4843-ba74-fd26981525db"}}],"dictionary":{"lattris":"A personal knowledge base — how a person captures what they know as linked blocks they own and control. To understand how this knowledge base works: https://lattris.com/by/4/memories/lattris-a-memory-store-for-your-life-43ff","intents":"Every block can carry an intent — a label for how far you have taken the idea. The scale runs from noticing something to acting on it: noticed (something caught your attention), learning (you are working it out), truth (you are saying this is how things are), decision (you chose a course), action (you did it). Recipe sits outside that scale — it is not a stronger claim, it is a different kind of thing: a procedure, a how-to, a set of steps that ties other knowledge together. Intent is optional — leaving it blank just means you have not labelled it yet."},"instructions_to_ai":"This is knowledge from a personal knowledge base. Read it and consider how it's relevant to what the person you're talking to needs. Follow the linked blocks to explore further related topics if it might be useful to the user; open each at its page address. Start by letting the user know what this is about and how it may be relevant to them."}