@2ndbrain/ui
Design system
Tokens, atoms, molecules, organisms and templates, each shown in Day, Mars and Dark. Showing the Human mind; pick another speed of thought in the header and every panel follows. The page itself is in Day.
Tokens
OKLCH, solved for WCAG contrast in both sRGB and Display-P3, generated by packages/ui/scripts/palette.mjs. Use the Tailwind names (bg-card, text-muted, border-line) or the CSS variables.
--creamPage background--cardCards and panels--raisedHover and inset surfaces--fieldInputs--inkBody text and primary buttons--mutedSecondary text (4.5:1 on every surface)--lineHairlines and borders--line-strongInput borders and emphasis--accentBrand accent, per speed of thought--accent-inkText on accent--accent-softTinted backgrounds--accent-2Second accent (decoration only)--focusFocus rings--successSuccess states--warnWarnings--dangerErrors and destructive actions
Accent by speed of thought
tokenThe nine minds, sRGB fallback values.
Day
Mars
Dark
Atoms
The smallest pieces. Radix primitives where behavior matters (Avatar, Switch, Tooltip), Heroicons for every icon.
Logo and wordmark
atomButton and ButtonLink
atomIconButton and Icon
atomDay
Mars
Dark
Badge and Chip
atomDay
Mars
Dark
Input, TextLink, Switch
atomDay
Mars
Dark
Avatar and Swatch
atomDay
Mars
Dark
Card
atomDay
Mars
Dark
Molecules
Atoms working together. Menus are Radix DropdownMenu: menu button, menuitemradio rows, arrow keys, typeahead and Escape.
SpeedModeMenu and DaypartMenu
moleculeMenus open in the page's own light.
Day
Mars
Dark
DaypartToggle
moleculeDay
Mars
Dark
SpeedModePicker
moleculeDay
Mars
Dark
NavLink and NavGroup
moleculeDay
Mars
Dark
EmailCapture
moleculeDay
Mars
Dark
FeaturePill and SocialLinks
moleculeIntegrationTile
moleculeUserMenu
moleculeAvatar trigger, account, app links, appearance submenus, sign out.
Day
Mars
Dark
Organisms
Page-sized parts. The live header and footer of this page are the same organisms.
SiteHeader (app variant, signed in)
organismHero over CognitiveMeshBackground
organismThe Human pattern; reduced motion shows a still frame.
Day
Never lose a
brilliant thought
A sample hero, scaled to fit.
Mars
Never lose a
brilliant thought
A sample hero, scaled to fit.
Dark
Never lose a
brilliant thought
A sample hero, scaled to fit.
SettingsSection and SettingsRow
organismDay
Sample section
A titled card with rows.
A setting
Mars
Sample section
A titled card with rows.
A setting
Dark
Sample section
A titled card with rows.
A setting
FatFooter
organismDay
Mars
Dark
PerformanceOverlay
organismTemplates: MarketingPage (the home page), AppPage (signed-in screens), LegalPage (terms) and SettingsPage (settings).