# Teasim

> Components, patterns, and tools for design engineering across web and native.

## Pages

- [Introduction](https://teasim.com/index.md): A design-engineering system for coherent product experiences across platforms.
- [About](https://teasim.com/about.md): Shared foundations, independent platform packages, and the boundaries that connect them.
- [Approach](https://teasim.com/approach.md): How a change gets from an idea to master — measured, reviewed, and written down.
- [Brand](https://teasim.com/brand.md): The frame, the type, and the rules that keep the surface quiet.
- [Privacy](https://teasim.com/privacy-policy.md): How the Teasim website handles browser preferences and visitor information.
- [Services](https://teasim.com/services.md): What we do beyond publishing the packages.
- [Team](https://teasim.com/team.md): How the work is organised, and why the group stays small.

## Docs

- [Introduction](https://teasim.com/docs/index.md): Choose a product and package to start building with Teasim.
- [Project structure](https://teasim.com/docs/project-structure.md): What astrosim create writes, where the boundary with the framework falls, and how the tree becomes the site.

## Packages

- [@teasim/brands](https://teasim.com/packages/brands.md): Brand marks and logos.
- [@teasim/elements](https://teasim.com/packages/elements.md): Foundational React interface elements.
- [@teasim/icons](https://teasim.com/packages/icons.md): Interface icons for React.
- [@teasim/widgets](https://teasim.com/packages/widgets.md): Higher-level React application experiences.
- [TeaCSS](https://teasim.com/packages/teacss.md): The shared styling foundation — tokens, utilities, and the visual primitives every Teasim web surface is built on.
- [Installation](https://teasim.com/packages/teacss/installation.md): Add TeaCSS to a project and connect its source scan to the code that uses StyleSheet.
- [Foundations](https://teasim.com/packages/teacss/foundations.md): The tokens, utilities, colour model, and ownership boundary shared by Teasim web products.
- [@teasim/astro](https://teasim.com/packages/astro.md): The content layer — navigation, validation, markdown twins, and machine-readable routes.
- [createNavigation](https://teasim.com/packages/astro/create-navigation.md): Builds the sidebar tree once and binds every navigation lookup to it.
- [@teasim/astra](https://teasim.com/packages/astra.md): Accessible elements that render the markup you would have written, and carry their behaviour with them.
- [Accordion](https://teasim.com/packages/astra/accordion.md): Disclosure rows built on the native details element, with the browser owning the open state.
- [Code](https://teasim.com/packages/astra/code.md): A highlighted listing in CodeBlock's frame, with every Shiki notation drawn.
- [@teasim/aster](https://teasim.com/packages/aster.md): Page-level blocks — documentation shells, headers, footers, navigation trees, and pagers.

## Showcase

- [amkit](https://teasim.com/showcase/amkit.md)
- [reitskit](https://teasim.com/showcase/reitskit.md)
- [datumkit](https://teasim.com/showcase/datumkit.md)
- [joinskit](https://teasim.com/showcase/joinskit.md)
- [hmkit](https://teasim.com/showcase/hmkit.md)
- [rmkit](https://teasim.com/showcase/rmkit.md)
- [iteago](https://teasim.com/showcase/iteago.md)
- [tealess](https://teasim.com/showcase/tealess.md)
- [zahoupu](https://teasim.com/showcase/zahoupu.md)
- [heydayup](https://teasim.com/showcase/heydayup.md)
- [viuup](https://teasim.com/showcase/viuup.md)
- [juliakit](https://teasim.com/showcase/juliakit.md)

## Notes

- [A class the extractor never saw](https://teasim.com/notes/a-class-the-extractor-never-saw.md)
- [A hairline that vanished in high contrast](https://teasim.com/notes/a-hairline-that-vanished-in-high-contrast.md)
- [Duplication worth keeping](https://teasim.com/notes/duplication-worth-keeping.md)
- [Measure before you believe the audit](https://teasim.com/notes/measure-before-you-believe-the-audit.md)
- [Name the thing focus lands on](https://teasim.com/notes/name-the-thing-focus-lands-on.md)
- [Region or group — let the count decide](https://teasim.com/notes/region-or-group-let-the-count-decide.md)
- [The build that ran twice](https://teasim.com/notes/the-build-that-ran-twice.md)
- [The dev server that died on every build](https://teasim.com/notes/the-dev-server-that-died-on-every-build.md)
- [The gate has to actually gate](https://teasim.com/notes/the-gate-has-to-actually-gate.md)
- [Two packages, one line](https://teasim.com/notes/two-packages-one-line.md)

## Products

- [Android](https://teasim.com/products/android.md): The planned Teasim surface for Android — Kotlin and Jetpack Compose, sharing the design-engineering standards of the web surfaces.
- [Apple](https://teasim.com/products/apple.md): The planned Teasim surface for Apple platforms — Swift and SwiftUI, with the same design-engineering standards as the web.
- [Astro](https://teasim.com/products/astro.md): Accessible elements, page-level blocks and content infrastructure for Astro websites.
- [Desktop](https://teasim.com/products/desktop.md): The planned Teasim surface for native desktop applications, built on GPUI.
- [HarmonyOS](https://teasim.com/products/harmonyos.md): The planned Teasim surface for HarmonyOS — ArkTS and ArkUI, with the same interface standards as every other Teasim platform.
- [React](https://teasim.com/products/react.md): The Teasim surface for interactive application experiences — elements, icons, brands, and higher-level widgets.
- [StyleSheet](https://teasim.com/products/style.md): The shared styling foundation — tokens, utilities, and the visual primitives every Teasim web surface is built on.
- [Three](https://teasim.com/products/three.md): The planned Teasim surface for interactive 3D scenes and product visualisation, built with Three.js.