{"name":"Skynet design system","version":"0.1.0","themes":["dark","light"],"tokenFormat":"W3C Design Tokens Community Group (DTCG) JSON, three tiers","tokens":[{"name":"color.neutral.0","cssVar":"--color-neutral-0","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.50","cssVar":"--color-neutral-50","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.100","cssVar":"--color-neutral-100","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.150","cssVar":"--color-neutral-150","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.200","cssVar":"--color-neutral-200","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.300","cssVar":"--color-neutral-300","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.400","cssVar":"--color-neutral-400","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.450","cssVar":"--color-neutral-450","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.500","cssVar":"--color-neutral-500","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.600","cssVar":"--color-neutral-600","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.700","cssVar":"--color-neutral-700","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.800","cssVar":"--color-neutral-800","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.850","cssVar":"--color-neutral-850","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.900","cssVar":"--color-neutral-900","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.950","cssVar":"--color-neutral-950","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.neutral.1000","cssVar":"--color-neutral-1000","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.green.300","cssVar":"--color-green-300","tier":"primitive","type":"color","description":"The brand accent on dark.","references":[],"themed":false},{"name":"color.green.400","cssVar":"--color-green-400","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.green.600","cssVar":"--color-green-600","tier":"primitive","type":"color","description":"The original light-theme accent. 2.8:1 on the light page, so it is no longer used for text.","references":[],"themed":false},{"name":"color.green.700","cssVar":"--color-green-700","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.green.800","cssVar":"--color-green-800","tier":"primitive","type":"color","description":"Darkened until it clears 4.5:1 on the light page and carries white text.","references":[],"themed":false},{"name":"color.red.400","cssVar":"--color-red-400","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.red.700","cssVar":"--color-red-700","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.amber.400","cssVar":"--color-amber-400","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.amber.700","cssVar":"--color-amber-700","tier":"primitive","type":"color","description":"The original #ff8800 is 2.4:1 on the light page.","references":[],"themed":false},{"name":"color.pink.400","cssVar":"--color-pink-400","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"color.pink.600","cssVar":"--color-pink-600","tier":"primitive","type":"color","description":null,"references":[],"themed":false},{"name":"space.0","cssVar":"--space-0","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.25","cssVar":"--space-25","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.50","cssVar":"--space-50","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.100","cssVar":"--space-100","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.150","cssVar":"--space-150","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.200","cssVar":"--space-200","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.300","cssVar":"--space-300","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.400","cssVar":"--space-400","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.500","cssVar":"--space-500","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.600","cssVar":"--space-600","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.800","cssVar":"--space-800","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.1000","cssVar":"--space-1000","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.1600","cssVar":"--space-1600","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.2000","cssVar":"--space-2000","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"space.2500","cssVar":"--space-2500","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.family.sans","cssVar":"--font-family-sans","tier":"primitive","type":"fontFamily","description":"Inter, self-hosted by the app through next/font.","references":[],"themed":false},{"name":"font.family.mono","cssVar":"--font-family-mono","tier":"primitive","type":"fontFamily","description":"JetBrains Mono.","references":[],"themed":false},{"name":"font.size.50","cssVar":"--font-size-50","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.75","cssVar":"--font-size-75","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.100","cssVar":"--font-size-100","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.200","cssVar":"--font-size-200","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.300","cssVar":"--font-size-300","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.350","cssVar":"--font-size-350","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.400","cssVar":"--font-size-400","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.500","cssVar":"--font-size-500","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.600","cssVar":"--font-size-600","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.display-sm","cssVar":"--font-size-display-sm","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.display-md","cssVar":"--font-size-display-md","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.display-lg","cssVar":"--font-size-display-lg","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.size.display-xl","cssVar":"--font-size-display-xl","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.weight.regular","cssVar":"--font-weight-regular","tier":"primitive","type":"fontWeight","description":null,"references":[],"themed":false},{"name":"font.weight.medium","cssVar":"--font-weight-medium","tier":"primitive","type":"fontWeight","description":null,"references":[],"themed":false},{"name":"font.weight.semibold","cssVar":"--font-weight-semibold","tier":"primitive","type":"fontWeight","description":null,"references":[],"themed":false},{"name":"font.weight.bold","cssVar":"--font-weight-bold","tier":"primitive","type":"fontWeight","description":null,"references":[],"themed":false},{"name":"font.leading.tight","cssVar":"--font-leading-tight","tier":"primitive","type":"number","description":null,"references":[],"themed":false},{"name":"font.leading.snug","cssVar":"--font-leading-snug","tier":"primitive","type":"number","description":null,"references":[],"themed":false},{"name":"font.leading.normal","cssVar":"--font-leading-normal","tier":"primitive","type":"number","description":null,"references":[],"themed":false},{"name":"font.leading.relaxed","cssVar":"--font-leading-relaxed","tier":"primitive","type":"number","description":null,"references":[],"themed":false},{"name":"font.tracking.display","cssVar":"--font-tracking-display","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.tracking.tight","cssVar":"--font-tracking-tight","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.tracking.normal","cssVar":"--font-tracking-normal","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.tracking.label","cssVar":"--font-tracking-label","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"font.tracking.eyebrow","cssVar":"--font-tracking-eyebrow","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"radius.none","cssVar":"--radius-none","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"radius.sm","cssVar":"--radius-sm","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"radius.md","cssVar":"--radius-md","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"radius.lg","cssVar":"--radius-lg","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"radius.full","cssVar":"--radius-full","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"border-width.hairline","cssVar":"--border-width-hairline","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"border-width.thick","cssVar":"--border-width-thick","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"duration.instant","cssVar":"--duration-instant","tier":"primitive","type":"duration","description":null,"references":[],"themed":false},{"name":"duration.fast","cssVar":"--duration-fast","tier":"primitive","type":"duration","description":null,"references":[],"themed":false},{"name":"duration.base","cssVar":"--duration-base","tier":"primitive","type":"duration","description":null,"references":[],"themed":false},{"name":"duration.slow","cssVar":"--duration-slow","tier":"primitive","type":"duration","description":null,"references":[],"themed":false},{"name":"easing.standard","cssVar":"--easing-standard","tier":"primitive","type":"cubicBezier","description":null,"references":[],"themed":false},{"name":"shadow.overlay-dark","cssVar":"--shadow-overlay-dark","tier":"primitive","type":"shadow","description":null,"references":[],"themed":false},{"name":"shadow.overlay-light","cssVar":"--shadow-overlay-light","tier":"primitive","type":"shadow","description":null,"references":[],"themed":false},{"name":"shadow.raised-dark","cssVar":"--shadow-raised-dark","tier":"primitive","type":"shadow","description":null,"references":[],"themed":false},{"name":"shadow.raised-light","cssVar":"--shadow-raised-light","tier":"primitive","type":"shadow","description":null,"references":[],"themed":false},{"name":"size.control-sm","cssVar":"--size-control-sm","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"size.control-md","cssVar":"--size-control-md","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"size.control-lg","cssVar":"--size-control-lg","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"size.target-min","cssVar":"--size-target-min","tier":"primitive","type":"dimension","description":"WCAG 2.2 target size (minimum), 2.5.8.","references":[],"themed":false},{"name":"size.measure","cssVar":"--size-measure","tier":"primitive","type":"dimension","description":"Longest comfortable line of running text.","references":[],"themed":false},{"name":"size.container","cssVar":"--size-container","tier":"primitive","type":"dimension","description":null,"references":[],"themed":false},{"name":"type.display-xl","cssVar":"--type-display-xl","tier":"semantic","type":"typography","description":"The landing hero.","references":["font.family.sans","font.size.display-xl","font.weight.bold","font.leading.tight","font.tracking.display"],"themed":false},{"name":"type.display-lg","cssVar":"--type-display-lg","tier":"semantic","type":"typography","description":"Page titles.","references":["font.family.sans","font.size.display-lg","font.weight.bold","font.leading.tight","font.tracking.display"],"themed":false},{"name":"type.display-md","cssVar":"--type-display-md","tier":"semantic","type":"typography","description":"Section titles.","references":["font.family.sans","font.size.display-md","font.weight.bold","font.leading.tight","font.tracking.tight"],"themed":false},{"name":"type.display-sm","cssVar":"--type-display-sm","tier":"semantic","type":"typography","description":"Sub-section titles.","references":["font.family.sans","font.size.display-sm","font.weight.bold","font.leading.tight","font.tracking.tight"],"themed":false},{"name":"type.heading","cssVar":"--type-heading","tier":"semantic","type":"typography","description":"Card and panel headings.","references":["font.family.sans","font.size.500","font.weight.bold","font.leading.snug","font.tracking.tight"],"themed":false},{"name":"type.body-lg","cssVar":"--type-body-lg","tier":"semantic","type":"typography","description":"Lead paragraphs.","references":["font.family.sans","font.size.400","font.weight.regular","font.leading.normal","font.tracking.normal"],"themed":false},{"name":"type.body","cssVar":"--type-body","tier":"semantic","type":"typography","description":"Running text.","references":["font.family.sans","font.size.350","font.weight.regular","font.leading.relaxed","font.tracking.normal"],"themed":false},{"name":"type.body-sm","cssVar":"--type-body-sm","tier":"semantic","type":"typography","description":"Dense UI text, table cells.","references":["font.family.sans","font.size.200","font.weight.regular","font.leading.normal","font.tracking.normal"],"themed":false},{"name":"type.label","cssVar":"--type-label","tier":"semantic","type":"typography","description":"Form labels, table headers, stat captions.","references":["font.family.mono","font.size.75","font.weight.medium","font.leading.snug","font.tracking.label"],"themed":false},{"name":"type.eyebrow","cssVar":"--type-eyebrow","tier":"semantic","type":"typography","description":"The mono line above a section title.","references":["font.family.mono","font.size.75","font.weight.medium","font.leading.snug","font.tracking.eyebrow"],"themed":false},{"name":"type.caption","cssVar":"--type-caption","tier":"semantic","type":"typography","description":"Notes under a control.","references":["font.family.mono","font.size.75","font.weight.regular","font.leading.normal","font.tracking.label"],"themed":false},{"name":"type.code","cssVar":"--type-code","tier":"semantic","type":"typography","description":"Addresses, signatures, code.","references":["font.family.mono","font.size.200","font.weight.regular","font.leading.normal","font.tracking.normal"],"themed":false},{"name":"type.data","cssVar":"--type-data","tier":"semantic","type":"typography","description":"Numbers in tables and stats. Mono so columns align.","references":["font.family.mono","font.size.300","font.weight.medium","font.leading.snug","font.tracking.normal"],"themed":false},{"name":"type.control","cssVar":"--type-control","tier":"semantic","type":"typography","description":"Text typed into a field. 16px so iOS does not zoom.","references":["font.family.sans","font.size.400","font.weight.regular","font.leading.snug","font.tracking.normal"],"themed":false},{"name":"type.button","cssVar":"--type-button","tier":"semantic","type":"typography","description":"Button labels.","references":["font.family.sans","font.size.300","font.weight.semibold","font.leading.snug","font.tracking.normal"],"themed":false},{"name":"layout.gutter","cssVar":"--layout-gutter","tier":"semantic","type":"dimension","description":"Page side padding.","references":["space.500"],"themed":false},{"name":"layout.section","cssVar":"--layout-section","tier":"semantic","type":"dimension","description":"Vertical gap between page sections.","references":["space.1600"],"themed":false},{"name":"layout.stack-sm","cssVar":"--layout-stack-sm","tier":"semantic","type":"dimension","description":null,"references":["space.200"],"themed":false},{"name":"layout.stack-md","cssVar":"--layout-stack-md","tier":"semantic","type":"dimension","description":null,"references":["space.400"],"themed":false},{"name":"layout.stack-lg","cssVar":"--layout-stack-lg","tier":"semantic","type":"dimension","description":null,"references":["space.800"],"themed":false},{"name":"layout.measure","cssVar":"--layout-measure","tier":"semantic","type":"dimension","description":null,"references":["size.measure"],"themed":false},{"name":"layout.container","cssVar":"--layout-container","tier":"semantic","type":"dimension","description":null,"references":["size.container"],"themed":false},{"name":"layout.page-top","cssVar":"--layout-page-top","tier":"semantic","type":"dimension","description":"Space above a page's title, below the site header.","references":["space.2000"],"themed":false},{"name":"layout.page-gap","cssVar":"--layout-page-gap","tier":"semantic","type":"dimension","description":"Space between a page header and the first section.","references":["space.2500"],"themed":false},{"name":"motion.hover","cssVar":"--motion-hover","tier":"semantic","type":"duration","description":"Colour and border changes on hover and focus.","references":["duration.fast"],"themed":false},{"name":"motion.reveal","cssVar":"--motion-reveal","tier":"semantic","type":"duration","description":"Things appearing: menus, status messages.","references":["duration.base"],"themed":false},{"name":"motion.ease","cssVar":"--motion-ease","tier":"semantic","type":"cubicBezier","description":null,"references":["easing.standard"],"themed":false},{"name":"motion.exit","cssVar":"--motion-exit","tier":"semantic","type":"duration","description":"Things leaving. Shorter than reveal: attention is already moving on.","references":["duration.fast"],"themed":false},{"name":"motion.press","cssVar":"--motion-press","tier":"semantic","type":"duration","description":"Press feedback on buttons: the scale down and back.","references":["duration.fast"],"themed":false},{"name":"focus.ring-width","cssVar":"--focus-ring-width","tier":"semantic","type":"dimension","description":null,"references":["border-width.thick"],"themed":false},{"name":"focus.ring-offset","cssVar":"--focus-ring-offset","tier":"semantic","type":"dimension","description":null,"references":["space.50"],"themed":false},{"name":"color.surface.page","cssVar":"--color-surface-page","tier":"semantic","type":"color","description":"The page ground.","references":["color.neutral.950"],"themed":true},{"name":"color.surface.raised","cssVar":"--color-surface-raised","tier":"semantic","type":"color","description":"Cards, inputs, table rows: one step above the page.","references":["color.neutral.900"],"themed":true},{"name":"color.surface.sunken","cssVar":"--color-surface-sunken","tier":"semantic","type":"color","description":"Wells, code blocks, hover fills.","references":["color.neutral.850"],"themed":true},{"name":"color.surface.overlay","cssVar":"--color-surface-overlay","tier":"semantic","type":"color","description":"Menus and popovers that float over content.","references":["color.neutral.900"],"themed":true},{"name":"color.surface.scrim","cssVar":"--color-surface-scrim","tier":"semantic","type":"color","description":"Behind a modal dialog. Dims the page without hiding it.","references":[],"themed":true},{"name":"color.text.primary","cssVar":"--color-text-primary","tier":"semantic","type":"color","description":"Headings and body.","references":["color.neutral.150"],"themed":true},{"name":"color.text.secondary","cssVar":"--color-text-secondary","tier":"semantic","type":"color","description":null,"references":["color.neutral.300"],"themed":true},{"name":"color.text.muted","cssVar":"--color-text-muted","tier":"semantic","type":"color","description":"Captions, labels, supporting copy. Still body-text contrast: muted is a tone, not an excuse.","references":["color.neutral.400"],"themed":true},{"name":"color.text.accent","cssVar":"--color-text-accent","tier":"semantic","type":"color","description":"Accent used as text: links, the italic word in a display heading.","references":["color.green.300"],"themed":true},{"name":"color.text.link","cssVar":"--color-text-link","tier":"semantic","type":"color","description":null,"references":["color.green.300"],"themed":true},{"name":"color.text.on-accent","cssVar":"--color-text-on-accent","tier":"semantic","type":"color","description":"Text on the accent fill, e.g. the primary button label.","references":["color.neutral.1000"],"themed":true},{"name":"color.text.disabled","cssVar":"--color-text-disabled","tier":"semantic","type":"color","description":"Disabled text is exempt from contrast minimums (WCAG 1.4.3); never the only cue.","references":["color.neutral.600"],"themed":true},{"name":"color.accent.fill","cssVar":"--color-accent-fill","tier":"semantic","type":"color","description":"The brand fill: the same green in both themes. On light it sits near 1.2:1 against the page, so the boundary of anything filled with it is drawn by accent.edge, not by the fill.","references":["color.green.300"],"themed":true},{"name":"color.accent.fill-hover","cssVar":"--color-accent-fill-hover","tier":"semantic","type":"color","description":null,"references":["color.green.400"],"themed":true},{"name":"color.accent.edge","cssVar":"--color-accent-edge","tier":"semantic","type":"color","description":"The boundary of a filled accent control. Dark: the fill's own green, invisible. Light: a darker green so the edge clears 3:1 against the page (WCAG 1.4.11).","references":["color.green.300"],"themed":true},{"name":"color.border.subtle","cssVar":"--color-border-subtle","tier":"semantic","type":"color","description":"Decorative hairlines that divide sections. Exempt from 1.4.11 because they convey nothing on their own.","references":[],"themed":true},{"name":"color.border.default","cssVar":"--color-border-default","tier":"semantic","type":"color","description":"Card and table outlines. Decorative.","references":["color.neutral.700"],"themed":true},{"name":"color.border.control","cssVar":"--color-border-control","tier":"semantic","type":"color","description":"The boundary of anything you can type into or toggle. 3:1 per WCAG 1.4.11.","references":["color.neutral.500"],"themed":true},{"name":"color.border.focus","cssVar":"--color-border-focus","tier":"semantic","type":"color","description":"The focus ring. 3:1 against whatever it sits on.","references":["color.green.300"],"themed":true},{"name":"color.status.win","cssVar":"--color-status-win","tier":"semantic","type":"color","description":null,"references":["color.green.300"],"themed":true},{"name":"color.status.loss","cssVar":"--color-status-loss","tier":"semantic","type":"color","description":null,"references":["color.red.400"],"themed":true},{"name":"color.status.pending","cssVar":"--color-status-pending","tier":"semantic","type":"color","description":null,"references":["color.amber.400"],"themed":true},{"name":"color.decor.pink","cssVar":"--color-decor-pink","tier":"semantic","type":"color","description":"Second colour on divider segments only. Never text.","references":["color.pink.400"],"themed":true},{"name":"shadow.overlay","cssVar":"--shadow-overlay","tier":"semantic","type":"shadow","description":null,"references":["shadow.overlay-dark"],"themed":true},{"name":"shadow.raised","cssVar":"--shadow-raised","tier":"semantic","type":"shadow","description":null,"references":["shadow.raised-dark"],"themed":true},{"name":"button.height","cssVar":"--button-height","tier":"component","type":"dimension","description":null,"references":["size.control-md"],"themed":false},{"name":"button.height-sm","cssVar":"--button-height-sm","tier":"component","type":"dimension","description":null,"references":["size.control-sm"],"themed":false},{"name":"button.radius","cssVar":"--button-radius","tier":"component","type":"dimension","description":null,"references":["radius.md"],"themed":false},{"name":"button.padding-x","cssVar":"--button-padding-x","tier":"component","type":"dimension","description":null,"references":["space.500"],"themed":false},{"name":"field.height","cssVar":"--field-height","tier":"component","type":"dimension","description":null,"references":["size.control-md"],"themed":false},{"name":"field.radius","cssVar":"--field-radius","tier":"component","type":"dimension","description":null,"references":["radius.md"],"themed":false},{"name":"field.padding-x","cssVar":"--field-padding-x","tier":"component","type":"dimension","description":null,"references":["space.300"],"themed":false},{"name":"field.bg","cssVar":"--field-bg","tier":"component","type":"color","description":null,"references":["color.surface.page"],"themed":false},{"name":"field.border","cssVar":"--field-border","tier":"component","type":"color","description":null,"references":["color.border.control"],"themed":false},{"name":"table.cell-padding-x","cssVar":"--table-cell-padding-x","tier":"component","type":"dimension","description":null,"references":["space.400"],"themed":false},{"name":"table.cell-padding-y","cssVar":"--table-cell-padding-y","tier":"component","type":"dimension","description":null,"references":["space.300"],"themed":false},{"name":"table.row-border","cssVar":"--table-row-border","tier":"component","type":"color","description":null,"references":["color.border.subtle"],"themed":false},{"name":"badge.radius","cssVar":"--badge-radius","tier":"component","type":"dimension","description":null,"references":["radius.sm"],"themed":false},{"name":"badge.padding-x","cssVar":"--badge-padding-x","tier":"component","type":"dimension","description":null,"references":["space.150"],"themed":false},{"name":"panel.radius","cssVar":"--panel-radius","tier":"component","type":"dimension","description":null,"references":["radius.md"],"themed":false},{"name":"panel.padding","cssVar":"--panel-padding","tier":"component","type":"dimension","description":null,"references":["space.600"],"themed":false},{"name":"panel.bg","cssVar":"--panel-bg","tier":"component","type":"color","description":null,"references":["color.surface.raised"],"themed":false},{"name":"panel.border","cssVar":"--panel-border","tier":"component","type":"color","description":null,"references":["color.border.default"],"themed":false}],"components":[{"name":"Eyebrow","category":"text","purpose":"The mono line above a section title.","use":["To label a section before its heading."],"avoid":["As a heading on its own. It labels; the Heading speaks."],"props":[{"name":"children","type":"ReactNode","required":true,"description":"Two to four words."}],"a11y":["Decorative rule is CSS, not content."],"tokens":["type.eyebrow","color.text.muted","color.text.accent"],"example":"<Eyebrow>How scoring works</Eyebrow>"},{"name":"Heading","category":"text","purpose":"A heading at any level with the display type roles. An <em> inside is the accent word.","use":["Page and section titles."],"avoid":["Choosing the level for its size. Level is structure; size is a prop."],"props":[{"name":"level","type":"1 | 2 | 3 | 4","default":"2","description":"Document outline level."},{"name":"size","type":"display-xl | display-lg | display-md | display-sm | heading","default":"display-md","description":"Visual size, independent of level."}],"a11y":["Level and size are separate, so the outline stays correct whatever the visual weight."],"tokens":["type.display-*","type.heading","color.text.primary","color.text.accent"],"example":"<Heading level={1} size=\"display-lg\">Ranked on edge, <em>not hit rate.</em></Heading>"},{"name":"Button","category":"input","purpose":"The one way to trigger an action.","use":["Submitting, committing, signing.","primary for the one main action on a view, secondary for the rest, ghost inline."],"avoid":["Navigation. Use a link.","More than one primary per view."],"props":[{"name":"variant","type":"primary | secondary | ghost","default":"primary","description":""},{"name":"size","type":"md | sm","default":"md","description":""},{"name":"disabled","type":"boolean","description":"Unavailable but still focusable; pair with disabledReason."},{"name":"disabledReason","type":"string","description":"Why it is unavailable. Shown as the title."},{"name":"busy","type":"boolean","description":"In flight: swaps the label and ignores clicks."},{"name":"busyLabel","type":"string","default":"Working","description":""},{"name":"block","type":"boolean","description":"Full width."},{"name":"static","type":"boolean","description":"No press scale, for an action that deserves stillness."}],"a11y":["Uses aria-disabled, not disabled, so keyboard users can reach it and hear why.","Minimum target 24px (WCAG 2.5.8); default 40px.","Visible focus ring on keyboard focus only.","Label swaps while busy, and aria-busy is set."],"tokens":["button.*","color.accent.fill","color.text.on-accent","type.button","motion.hover"],"example":"<Button busy={sending} busyLabel=\"Waiting for signature\">Commit signal</Button>"},{"name":"Field","category":"input","purpose":"Label, hint and error wired to one control.","use":["Around every Input, Select or Textarea."],"avoid":["A control without a Field. The control will throw."],"props":[{"name":"label","type":"ReactNode","required":true,"description":""},{"name":"hint","type":"ReactNode","description":"Read with the control by assistive tech."},{"name":"error","type":"ReactNode","description":"Announced (role=alert); marks the control invalid."}],"a11y":["Clicking the label focuses the control.","Hint and error are in aria-describedby.","Error sets aria-invalid and is announced."],"tokens":["field.*","type.label","type.caption","color.status.loss"],"example":"<Field label=\"Instrument\" hint=\"A Coinbase pair\"><Input value={pair} onChange={...} /></Field>"},{"name":"Input / Select / Textarea","category":"input","purpose":"Styled native controls. They read their wiring from the surrounding Field.","use":["Inside a Field."],"avoid":["Outside a Field."],"props":[{"name":"...native","type":"InputHTMLAttributes","description":"Everything the native element takes."}],"a11y":["16px text so iOS does not zoom on focus.","Border meets 3:1 against the page (color.border.control).","Placeholder is never the label."],"tokens":["field.*","type.control","color.border.control"],"example":"<Field label=\"Thesis\"><Textarea rows={3} /></Field>"},{"name":"Combobox","category":"input","purpose":"A text input with a listbox of suggestions. The parent searches; this handles keys and ARIA.","use":["Picking an instrument from thousands.","Any field where the user types to narrow a list."],"avoid":["Under ten fixed choices: use Select.","Free text with no suggestions: use Input."],"props":[{"name":"value","type":"string","required":true,"description":"Typed text, owned by the parent."},{"name":"onChange","type":"(text) => void","required":true,"description":""},{"name":"options","type":"ComboboxOption[]","required":true,"description":"id, label, description?, badge?"},{"name":"onSelect","type":"(option) => void","required":true,"description":""},{"name":"loading","type":"boolean","description":"Shows Searching in the list."},{"name":"emptyText","type":"ReactNode","description":"Shown when nothing matches."}],"a11y":["role=combobox with aria-expanded, aria-controls and aria-activedescendant; options are never focused, so focus stays in the field.","ArrowDown/Up move, Enter picks, Escape closes, Tab leaves.","Must sit inside a Field for its label and description."],"tokens":["field.*","shadow.raised","motion.reveal"],"example":"<Field label=\"Instrument\"><Combobox value={q} onChange={setQ} options={hits} onSelect={pick} loading={busy} emptyText=\"No match\" /></Field>"},{"name":"Menu","category":"input","purpose":"A button that opens a short list of actions.","use":["The account menu.","Two to six actions that do not deserve their own buttons."],"avoid":["Navigation between pages: use links.","A single action: use a Button."],"props":[{"name":"label","type":"string","required":true,"description":"Accessible name."},{"name":"trigger","type":"ReactNode","required":true,"description":"Button content."},{"name":"items","type":"MenuItem[]","required":true,"description":"id, label, onSelect?, href?, disabled?, tone?"},{"name":"header","type":"ReactNode","description":"Static, non-focusable content above the items."},{"name":"align","type":"start | end","default":"end","description":""}],"a11y":["aria-haspopup=menu and aria-expanded on the trigger; role=menu and role=menuitem with roving tabindex.","Arrow keys move and wrap, Home/End jump, a letter jumps, Escape closes and returns focus to the trigger.","Opens from the trigger's corner, not from centre."],"tokens":["button.*","shadow.raised","motion.reveal"],"example":"<Menu label=\"Account\" trigger=\"8xk3…9Qm\" header=\"Signed in with a Solana wallet\" items={[{ id: \"out\", label: \"Disconnect\", onSelect: logout, tone: \"loss\" }]} />"},{"name":"Dialog","category":"container","purpose":"A modal on the native <dialog> element: focus trap, Escape, inert page and focus return come from the browser.","use":["Confirming an action that cannot be undone (role=alertdialog).","A short form that must finish before anything else."],"avoid":["Information that could sit on the page.","Anything with its own navigation."],"props":[{"name":"open","type":"boolean","required":true,"description":""},{"name":"onClose","type":"() => void","required":true,"description":"Any close: Escape, backdrop, Cancel."},{"name":"title","type":"ReactNode","required":true,"description":""},{"name":"description","type":"ReactNode","description":""},{"name":"actions","type":"ReactNode","description":"Buttons; primary last."},{"name":"role","type":"dialog | alertdialog","default":"dialog","description":"alertdialog ignores backdrop clicks."}],"a11y":["showModal(): focus moves in, Tab cannot leave, the page behind is inert, Escape closes, focus returns to the opener.","Labelled by its title and described by its description.","Centre transform origin: modals have no trigger to grow from."],"tokens":["color.surface.scrim","shadow.overlay","radius.lg","motion.reveal","motion.exit"],"example":"<Dialog open={confirming} onClose={() => setConfirming(false)} role=\"alertdialog\" title=\"Commit LONG BTC?\" description=\"One signature. It cannot be edited or deleted.\" actions={<><Button variant=\"secondary\" onClick={cancel}>Back</Button><Button onClick={commit}>Sign and commit</Button></>} />"},{"name":"SegmentedControl","category":"input","purpose":"One choice among two to five options.","use":["Direction (long / short).","Conviction (1 / 2 / 3).","Timeframe."],"avoid":["More than five options. Use a Select.","Multiple selection."],"props":[{"name":"label","type":"string","required":true,"description":"Names the group for assistive tech."},{"name":"showLabel","type":"boolean","description":"Also show the label above the group, like a Field."},{"name":"options","type":"{ value, label, description? }[]","required":true,"description":""},{"name":"value","type":"T","required":true,"description":""},{"name":"onChange","type":"(value: T) => void","required":true,"description":""}],"a11y":["A radiogroup: arrow keys move, Tab leaves.","Selection is aria-checked plus a check glyph, never colour alone."],"tokens":["field.height","color.accent.fill","color.border.control"],"example":"<SegmentedControl label=\"Direction\" options={[{ value: \"long\", label: \"Long\" }, { value: \"short\", label: \"Short\" }]} value={dir} onChange={setDir} />"},{"name":"Badge","category":"data","purpose":"A short status word: house, provisional, established.","use":["One word beside the thing it qualifies."],"avoid":["Sentences.","Colour as the only meaning: the word is the meaning."],"props":[{"name":"tone","type":"neutral | accent | win | loss | pending","default":"neutral","description":""}],"a11y":["Always text."],"tokens":["badge.*","type.label","color.status.*"],"example":"<Badge tone=\"neutral\">house</Badge>"},{"name":"Outcome","category":"data","purpose":"Win, loss, void or pending, as glyph plus word.","use":["Wherever an outcome is shown."],"avoid":["A coloured dot with no text."],"props":[{"name":"outcome","type":"win | loss | void | pending","required":true,"description":""}],"a11y":["Glyph is aria-hidden; the word carries the meaning.","Win and loss colours are reserved for outcomes and never decorate anything else."],"tokens":["color.status.*","type.label"],"example":"<Outcome outcome=\"win\" />"},{"name":"EdgeValue","category":"data","purpose":"A signed risk-adjusted edge with its uncertainty and sample size beside it.","use":["The board, provider pages, signal pages."],"avoid":["Showing an edge without n. The sample size is part of the number.","Colouring an edge that is not significant. Pass `significant` wherever a standard error exists; grey is the honest colour for a record that is still noise."],"props":[{"name":"value","type":"number | null","required":true,"description":"null renders a dash."},{"name":"n","type":"number","description":"Scored bets."},{"name":"se","type":"number | null","description":"Standard error of the mean bet edge, shown as ±."},{"name":"significant","type":"boolean","description":"False withholds the colour: the record is under two standard errors from zero."},{"name":"provisional","type":"boolean","description":"Fewer than k scored bets."},{"name":"size","type":"md | lg","default":"md","description":"lg for a stat tile."}],"a11y":["Sign is a glyph plus colour plus visually hidden text; an unclear record says so in the hidden text and the title.","Tabular figures so columns align.","Hold Alt to see four decimals; the exact value is also the title."],"tokens":["type.data","color.status.win","color.status.loss","color.text.secondary"],"example":"<EdgeValue value={0.1} se={0.09} significant={false} n={173} />"},{"name":"Address","category":"data","purpose":"A wallet address, shortened in the middle.","use":["Anywhere an address appears."],"avoid":["Truncating at the end: the end is what distinguishes addresses."],"props":[{"name":"value","type":"string","required":true,"description":""},{"name":"full","type":"boolean","description":"Never shorten."}],"a11y":["The full address is available to assistive tech and as the title.","Hold Alt to reveal it inline.","A full address breaks anywhere rather than overflowing."],"tokens":["type.code","color.text.secondary"],"example":"<Address value={wallet} />"},{"name":"ProviderLabel","category":"data","purpose":"How a provider is named: display name if any, address always, house badge if ours.","use":["Every list of providers or signals."],"avoid":["Showing a name without the address. A name is a label the wallet chose."],"props":[{"name":"address","type":"string","required":true,"description":""},{"name":"name","type":"string | null","description":"House label or self-declared name."},{"name":"house","type":"boolean","description":""}],"a11y":["Self-declared names carry an explanatory title."],"tokens":["type.body-sm","type.code","badge.*"],"example":"<ProviderLabel address={p.address} name={p.name} house={p.house} />"},{"name":"DataTable","category":"data","purpose":"Tabular data as a real table.","use":["The board, signal lists."],"avoid":["Layout.","Cards pretending to be rows."],"props":[{"name":"caption","type":"string","required":true,"description":"Names the table; can be visually hidden."},{"name":"columns","type":"Column<T>[]","required":true,"description":"header, cell renderer, align."},{"name":"rows","type":"T[]","required":true,"description":""},{"name":"rowKey","type":"(row) => string","required":true,"description":""},{"name":"rowHref","type":"(row) => string","description":"Whole row is a pointer target for the row's destination; the row must still hold a real link to it."},{"name":"navigate","type":"(href) => void","description":"Client-side navigation, e.g. router.push."}],"a11y":["caption, th scope=col.","Numeric columns end-aligned in tabular figures.","The scroll region is focusable, so keyboard users can scroll a wide table."],"tokens":["table.*","type.label","type.body-sm"],"example":"<DataTable caption=\"Leaderboard\" columns={cols} rows={providers} rowKey={(p) => p.address} />"},{"name":"Stat","category":"data","purpose":"One number with its label. StatGroup lays several out in a responsive grid.","use":["Counts on a landing page.","A provider's totals. Put an EdgeValue with size=\"lg\" in the value slot for the edge."],"avoid":["Colouring a count that is not an outcome. `tone` is for win, loss and pending counts."],"props":[{"name":"value","type":"ReactNode","required":true,"description":""},{"name":"label","type":"ReactNode","required":true,"description":""},{"name":"tone","type":"win | loss | pending","description":"Outcome counts only."},{"name":"size","type":"sm | md | lg","default":"md","description":"lg is the landing-page headline number; sm for a value that is words or a date, not a number."}],"a11y":["Tabular figures.","Tone is never the only cue: the label says what the number is."],"tokens":["type.display-sm","type.label","color.status.*"],"example":"<StatGroup><Stat value={324} label=\"Signals committed\" /><Stat value={<EdgeValue value={0.41} n={127} size=\"lg\" />} label=\"Edge\" /></StatGroup>"},{"name":"Hint","category":"text","purpose":"A small ? beside a term that explains it on hover, focus or tap.","use":["A column header whose name is a term of art, like Edge.","A label that needs one short sentence of context."],"avoid":["More than one sentence: it is a definition, not an explanation.","Anything the reader must read to act: put it in a Callout or in the copy.","Interactive content inside the bubble; it closes on blur."],"props":[{"name":"label","type":"string","required":true,"description":"Accessible name of the trigger, e.g. \"What is edge?\""}],"a11y":["The trigger is a button described by the tooltip text (aria-describedby), so the explanation is read without hovering.","Opens on focus, closes on Escape and blur.","24px target."],"tokens":["size.control-md","panel.*","shadow.raised","motion.reveal","motion.exit","type.body-sm"],"example":"Edge <Hint label=\"What is edge?\">Price move in the called direction, in units of the asset's volatility.</Hint>"},{"name":"Checklist","category":"data","purpose":"Facts the page has checked, each with a verdict mark and the evidence in one line.","use":["On-chain proof of a signal: timestamp, program signature, memo match, marks.","Any place the product claims something is verified: show the check, not the instructions."],"avoid":["To-do lists or forms.","Claims the page did not actually check."],"props":[{"name":"label","type":"string","required":true,"description":"Accessible name of the list."},{"name":"items","type":"{ label, detail?, state: pass | fail | pending | unknown }[]","required":true,"description":""}],"a11y":["The state is read out in words before the label; the coloured mark is never the only cue."],"tokens":["color.status.*","size.target-min","type.body-sm","type.caption"],"example":"<Checklist label=\"On-chain proof\" items={[{ state: \"pass\", label: \"Timestamped on Solana\", detail: \"2026-09-28 19:10:10 UTC · slot 412…\" }]} />"},{"name":"Note","category":"text","purpose":"Supporting text under a control or section, in caption type and the muted colour.","use":["The line under a submit button that says what will happen.","A one-line aside."],"avoid":["Anything the reader must not miss: use Callout."],"props":[],"a11y":["Contrast of color.text.muted is body-text grade, so a note is readable, not decorative."],"tokens":["type.caption","color.text.muted"],"example":"<Note>devnet · one signature · network fee in SOL</Note>"},{"name":"Panel","category":"container","purpose":"A raised surface with a hairline border.","use":["Forms, record cards."],"avoid":["Nesting panels.","Panels as page structure; sections are divided by rules."],"props":[{"name":"as","type":"div | section | form","default":"div","description":""}],"a11y":[],"tokens":["panel.*"],"example":"<Panel as=\"form\" onSubmit={...}>…</Panel>"},{"name":"Callout","category":"container","purpose":"A short message that needs attention: a note, a warning, an error.","use":["Draft notices, failures, empty states with a reason."],"avoid":["Marketing copy."],"props":[{"name":"tone","type":"neutral | accent | loss | pending","default":"neutral","description":""},{"name":"role","type":"status | alert | note","description":"Defaults to alert for loss, note otherwise."}],"a11y":["Tone is a glyph plus a coloured rule, with a live-region role that matches its urgency."],"tokens":["color.border.*","color.status.*"],"example":"<Callout tone=\"pending\">Marked once the close candle is final.</Callout>"},{"name":"Code","category":"text","purpose":"Inline or block code, addresses, commands.","use":["Commands the reader will paste."],"avoid":["Emphasis. Code style means literal."],"props":[{"name":"block","type":"boolean","description":""}],"a11y":["Blocks scroll horizontally rather than wrapping a command."],"tokens":["type.code","color.surface.sunken"],"example":"<Code block>skynet verify --provider &lt;wallet&gt;</Code>"},{"name":"PageHeader","category":"layout","purpose":"The top of a page: eyebrow, display title, lede, optional aside. Owns the page's top spacing.","use":["Every page below the site header.","An <em> in the title for the accent phrase."],"avoid":["Section titles inside a page: use Eyebrow and Heading.","More than one paragraph of lede."],"props":[{"name":"eyebrow","type":"ReactNode","description":""},{"name":"title","type":"ReactNode","required":true,"description":""},{"name":"lede","type":"ReactNode","description":"One paragraph at reading width, muted."},{"name":"aside","type":"ReactNode","description":"Status or outcome; sits right on wide screens, wraps below on narrow."},{"name":"level","type":"1 | 2 | 3 | 4","default":"1","description":""},{"name":"align","type":"start | center","default":"start","description":"center stacks eyebrow, title, lede and aside on the middle line."}],"a11y":["Renders a <header> with the page's h1 by default.","Title balances; lede wraps pretty."],"tokens":["layout.page-top","layout.page-gap","layout.measure","type.display-lg","type.body-lg"],"example":"<PageHeader eyebrow=\"Workbench\" title={<>Commit a signal. <em>Sign once.</em></>} lede=\"Pick the instrument, direction, timeframe and close.\" />"},{"name":"RevealDetailsProvider","category":"layout","purpose":"Hold Alt anywhere to see underlying detail: full addresses, four-decimal edges.","use":["Once, around the app."],"avoid":["Hiding anything essential behind it. It reveals precision, not information."],"props":[],"a11y":["Everything revealed is also available without the modifier: as a title, or visually hidden text."],"tokens":[],"example":"<RevealDetailsProvider>{children}</RevealDetailsProvider>"}],"principles":[{"title":"Tokens are the only source of values.","body":"Colour, type, space, radius, motion and elevation come from the token build. Component CSS with a raw value fails the test suite. When a value is missing, a token is added, not a number."},{"title":"Three tiers, one direction.","body":"Primitives hold raw values and mean nothing. Semantic tokens give them a role per theme. Component tokens reference semantic ones only, so a theme change reaches every component without touching one."},{"title":"Accessibility is a property of the token, then of the primitive.","body":"Each colour token declares what it must be legible against and at what ratio; the build fails otherwise. Primitives carry their focus ring, labels, roles and target sizes, so a page cannot forget them."},{"title":"Never colour alone.","body":"Win and loss are reserved colours, and every use of them comes with a word or a glyph. Selection has a mark. Errors have text."},{"title":"Flat, divided by hairlines.","body":"Sections are separated by rules, not lifted on shadows. One shadow exists, for what floats over content."},{"title":"Numbers read like a desk.","body":"Tabular figures, end-aligned, mono for addresses and data, the sample size beside every score. Hold Alt for full precision."},{"title":"Motion is a budget, and a token.","body":"Ask how often a thing is seen before animating it. Hover, focus and keyboard actions get colour changes at 100ms or nothing; things that appear get 200ms; nothing in the UI takes longer than 300ms. One easing curve, a strong ease-out, so movement starts the instant it is touched; exits reuse it at half the time. Only transform and opacity move. Buttons give 4% on press and a tooltip grows from its trigger, never from scale(0). Reduced motion keeps the fades and removes the movement."},{"title":"Native first for overlays.","body":"A modal is a real <dialog> opened with showModal(), so the focus trap, Escape, the inert page and focus return are the browser's, not ours. Where HTML has no element yet (combobox, menu) the WAI-ARIA pattern is implemented by hand, small enough to read in one sitting, and focus never leaves the control the user was in."},{"title":"Machine-readable by design.","body":"Tokens are W3C-format JSON, the component manifest is JSON, and an MCP server answers questions about both, so an agent designing or building with the system reads the same source a person does."}]}