Sanchika Primitive Gallery

All gallery examples are synthetic and must not be treated as taxpayer, portal, filing, or client data.

11 color roles loaded.

Primitive contracts

Button

Command trigger

Required states

  • default
  • hover
  • focus-visible
  • pressed
  • disabled
  • loading

State evidence

  • default: Default buttons must expose an accessible text label.

    Attributes

    • type

    Selectors

    • .sk-button
  • hover: Hover treatment must not be the only state cue.

    Attributes

      Selectors

      • .sk-button:hover
    • focus-visible: Keyboard focus must be visibly distinct from hover.

      Attributes

        Selectors

        • .sk-button:focus-visible
      • pressed: Toggle buttons must expose aria-pressed while keeping a stable visible label.

        Attributes

        • aria-pressed

        Selectors

        • .sk-button[aria-pressed="true"]
      • disabled: Prefer native disabled. If aria-disabled or data-disabled is used, consumers must suppress click, Space, Enter, and shortcut activation while keeping a visible disabled reason.

        Attributes

        • disabled
        • aria-disabled
        • data-disabled

        Selectors

        • .sk-button:disabled
        • .sk-button[aria-disabled="true"]
        • .sk-button[data-disabled="true"]
      • loading: Loading state must expose aria-busy as the semantic loading state. data-loading is a visual hook only and is not assistive-technology evidence by itself.

        Attributes

        • aria-busy
        • data-loading

        Selectors

        • .sk-button[aria-busy="true"]
        • .sk-button[data-loading="true"]

      Standards

      • WAI-ARIA APG Button Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
        • Prefer native <button> elements for command actions.
        • If a non-button element uses role="button", the consumer must provide Space and Enter activation.
        • Toggle buttons use aria-pressed without changing the visible label.
        • Consumers must define focus after activation according to the resulting workflow.

      Card

      Grouped information surface

      Required states

      • default
      • focus-visible

      State evidence

      • default: Cards need semantic headings and visible status text when tone implies state.

        Attributes

          Selectors

          • .sk-card
        • focus-visible: Interactive cards must use native link or button semantics and show a visible keyboard focus outline.

          Attributes

          • href

          Selectors

          • .sk-card:focus-visible

        Badge

        Short status or classification label

        Required states

        • default

        State evidence

        • default: Badge text must name the status; tone color is supporting evidence only.

          Attributes

            Selectors

            • .sk-badge

          Field

          Accessible label, control, hint, and error wrapper

          Required states

          • default
          • focus-visible
          • disabled
          • error

          State evidence

          • default: Fields must connect visible labels to controls.

            Attributes

            • for
            • id
            • name

            Selectors

            • .sk-field
          • focus-visible: Control focus must be visible for keyboard users.

            Attributes

              Selectors

              • .sk-field :is(input, textarea, select, [data-sk-control]):focus-visible
            • disabled: Disabled field state must remain legible and discoverable.

              Attributes

              • disabled
              • data-disabled

              Selectors

              • .sk-field :is(input, textarea, select, [data-sk-control]):disabled
              • .sk-field[data-disabled="true"]
            • error: Errors must be visible text associated with the control; aria-invalid and aria-describedby belong on the control.

              Attributes

              • aria-invalid
              • aria-describedby
              • data-sk-error

              Selectors

              • .sk-field[data-invalid="true"]
              • .sk-field :is(input, textarea, select, [data-sk-control])[aria-invalid="true"]
              • [data-sk-error]

            Button state matrix

            Unavailable because source evidence is still missing.

            Badge tone matrix

            Neutral statusSuccess statusWarning statusDanger statusInfo status

            Field state matrix

            Use the period shown on the synthetic source.

            Locked because the source review is closed.

            Use the period shown on the synthetic source.

            Evidence required before this can be marked reviewed.

            Card state matrix

            Neutral status

            Draft review

            Prepared but not submitted.

            Warning status

            Evidence required

            Source proof must be attached before approval.

            Pattern contracts

            EvidencePanel

            Shows sources, review state, and confidence/uncertainty without implying automation is final.

            Required slots

            • sourceList: Visible source documents, links, or citations used for the claim.
            • reviewState: Human or system review status with non-color text.
            • uncertaintyCopy: Plain-language confidence, limitation, or missing-evidence note.
            • provenanceTimestamp: When the evidence or source state was last checked.
            • actionSlot: Next safe action, such as attach proof, review source, or export.

            Required states

            • empty: No evidence has been attached yet.
              Visible signals
              • No sources attached
              • Add evidence
              Required state slots
              • actionSlot
              Accessibility checks
              • empty-state-text WCAG22:1.3.1: Empty evidence state must be visible text associated with the next safe action. https://www.w3.org/TR/WCAG22/#info-and-relationships

                Confirm the empty state is not icon-only and the action text is adjacent to the empty-state copy.

            • pending-review: Evidence exists but still needs human review.
              Visible signals
              • Pending review
              • Source count
              • Last checked timestamp
              Required state slots
              • sourceList
              • reviewState
              • provenanceTimestamp
              Programmatic status

              Pending review updates must be programmatically determinable without moving focus.

              Accessibility checks
              • pending-review-status WCAG22:4.1.3: Review state changes must expose status semantics in addition to visible text. https://www.w3.org/TR/WCAG22/#status-messages

                Trigger a pending-review update and confirm assistive tech can announce the state without focus movement.

            • reviewed: Evidence has been reviewed against the visible source.
              Visible signals
              • Reviewed
              • Reviewer or review method
              • Source timestamp
              Required state slots
              • sourceList
              • reviewState
              • provenanceTimestamp
              Programmatic status

              Reviewed state must be programmatically tied to the source and timestamp being reviewed.

              Accessibility checks
              • reviewed-non-color-status WCAG22:4.1.3: Reviewed state must not be communicated by color alone. https://www.w3.org/TR/WCAG22/#status-messages

                Confirm reviewed copy, source identity, and timestamp are readable with color disabled.

            • blocked: Evidence cannot support the claim yet.
              Visible signals
              • Blocked
              • Missing evidence reason
              • Next safe action
              Required state slots
              • uncertaintyCopy
              • actionSlot
              Programmatic status

              Blocked evidence updates must announce the blocking reason and next safe action.

              Accessibility checks
              • blocked-reason-action-association WCAG22:3.3.2: Blocked reason must be associated with the next safe action. https://www.w3.org/TR/WCAG22/#labels-or-instructions

                Confirm the blocking reason is read before or with the action needed to resolve it.

              • blocked-status-message WCAG22:4.1.3: Blocked evidence updates must expose the blocking reason as a status message without moving focus. https://www.w3.org/TR/WCAG22/#status-messages

                Trigger the blocked state and confirm role=alert announces the reason and next action without moving focus.

            Semantic obligations

            • Do not present AI output as final professional judgment.
            • Expose source and uncertainty text without relying on color alone.
            • Use synthetic examples unless a consumer app supplies authorized data.

            TrustBoundary

            Explains local processing, upload boundaries, permissions, and source visibility.

            Required slots

            • boundarySummary: One-line local, upload, account, or network boundary statement.
            • permissionList: Permissions or capabilities requested by the surface.
            • dataFlow: What stays local, what leaves the device, and why.
            • uploadDestination: Consumer-specific destination or processor for any artifact leaving the device.
            • uploadReason: Consumer-specific reason the artifact must leave the device.
            • sourceVisibility: How a user can inspect source, proof, or generated artifacts.
            • actionSlot: Fallback, permission, upload, or inspect action tied to the trust boundary.

            Required states

            • local-only: The workflow stays on the user's device.
              Visible signals
              • Runs locally
              • No upload
              • Inspect source, proof artifact, and generated artifact
              Required state slots
              • boundarySummary
              • dataFlow
              • sourceVisibility
              Accessibility checks
            • upload-required: The workflow requires a file or artifact to leave the device.
              Visible signals
              • Upload required
              • Destination must be named
              • Reason for upload must be named
              Required state slots
              • boundarySummary
              • dataFlow
              • uploadDestination
              • uploadReason
              Programmatic status

              Upload-required state must announce the upload boundary before file selection or submission.

              Accessibility checks
              • upload-boundary-before-input WCAG22:3.3.2: Upload destination and reason must be instructions for the upload control. https://www.w3.org/TR/WCAG22/#labels-or-instructions

                Confirm the upload control is described by the destination and reason for upload.

              • upload-required-status-message WCAG22:4.1.3: Upload-required state must announce the upload boundary as a status message before file selection. https://www.w3.org/TR/WCAG22/#status-messages

                Trigger upload-required state and confirm role=alert announces the upload destination and reason.

            • permission-required: A browser, file, or account permission is needed.
              Visible signals
              • Permission required
              • File read permission
              • Purpose: inspect selected local artifact
              Required state slots
              • permissionList
              • boundarySummary
              Programmatic status

              Permission-required state must announce requested permission and purpose.

              Accessibility checks
              • permission-purpose-label WCAG22:4.1.2: Permission request controls must expose a name and purpose. https://www.w3.org/TR/WCAG22/#name-role-value

                Inspect the permission control name and description with a screen reader.

              • permission-required-status-message WCAG22:4.1.3: Permission-required state must announce the requested permission and purpose as a status message. https://www.w3.org/TR/WCAG22/#status-messages

                Trigger permission-required state and confirm role=alert announces the permission and purpose.

            • unavailable: The trust boundary cannot be completed safely.
              Visible signals
              • Unavailable
              • Reason: boundary cannot be completed safely
              • Fallback: use a manual review path
              Required state slots
              • boundarySummary
              • actionSlot
              Programmatic status

              Unavailable trust-boundary state must announce reason and fallback action.

              Accessibility checks
              • unavailable-not-disabled-only WCAG22:4.1.2: Unavailable state must be more than a disabled-only control. https://www.w3.org/TR/WCAG22/#name-role-value

                Confirm reason and fallback action remain programmatically available when the primary action is unavailable.

              • unavailable-boundary-status-message WCAG22:4.1.3: Unavailable trust-boundary state must announce the reason and fallback action as a status message. https://www.w3.org/TR/WCAG22/#status-messages

                Trigger unavailable state and confirm role=alert announces the reason and fallback action.

            Semantic obligations

            • Do not use trust copy as a substitute for real privacy or security behavior.
            • Name external handoffs before the user acts.
            • Keep permissions visible near the action that needs them.

            ProductFamilyRouter

            Routes users across a product family while making product mode, availability, externality, and trust boundary visible.

            Required slots

            • eyebrow: Short product-family or trust-layer context.
            • title: Specific router title that names the product family or operational surface.
            • summary: Plain-language explanation of what the router helps the user choose.
            • products: Product cards with name, mode, audience, status, trust boundary, and links.
            • trustCopy: Visible boundary copy for account, local, upload, or external handoff behavior.
            • policyLinks: Relevant support, privacy, terms, source, or review-policy links.
            • primaryCta: Main safe action for the selected or most relevant product.
            • secondaryCta: Secondary inspect, compare, or support action.

            Required states

            • default: Multiple products are available for comparison.
              Visible signals
              • Product names
              • Audience fit
              • Trust boundary summary
              Required state slots
              • title
              • summary
              • products
              • trustCopy
              Accessibility checks
              • product-router-heading-structure WCAG22:1.3.1: Product names, audience fit, and trust boundary copy must be programmatically related to each product card. https://www.w3.org/TR/WCAG22/#info-and-relationships

                Navigate by headings and links to confirm every product remains identifiable outside visual card order.

            • product-unavailable: A product or mode is not currently available and needs a fallback path.
              Visible signals
              • Unavailable
              • Reason
              • Fallback path
              Required state slots
              • products
              • secondaryCta
              Programmatic status

              Unavailable product state must announce the product, reason, and fallback path without relying on disabled styling.

              Accessibility checks
              • product-unavailable-fallback-visible WCAG22:4.1.2: Unavailable product cards must keep a reason and fallback action available to assistive technology. https://www.w3.org/TR/WCAG22/#name-role-value

                Confirm unavailable product reason and fallback action are reachable by keyboard and screen-reader navigation.

              • product-unavailable-status-message WCAG22:4.1.3: Unavailable product updates must expose a status message naming the fallback. https://www.w3.org/TR/WCAG22/#status-messages

                Trigger the unavailable state and confirm role=status announces the reason and fallback path.

            • external-link: The selected product sends users to an external operational surface.
              Visible signals
              • External link
              • Destination named
              • Policy or support link
              Required state slots
              • products
              • policyLinks
              • primaryCta
              Programmatic status

              External-link state must announce the external destination and policy/support path before navigation.

              Accessibility checks
              • external-destination-named WCAG22:3.3.2: External navigation controls must name the destination and expose supporting policy or support links. https://www.w3.org/TR/WCAG22/#labels-or-instructions

                Inspect link text and nearby copy to confirm the destination is named before activation.

              • external-link-status-message WCAG22:4.1.3: External-link state must announce the external destination as a status message. https://www.w3.org/TR/WCAG22/#status-messages

                Trigger the external-link state and confirm role=status announces the external destination.

            • local-first-product: A product runs locally or keeps artifacts under user control.
              Visible signals
              • Local-first
              • No account required
              • User-controlled artifact
              Required state slots
              • products
              • trustCopy
              • primaryCta
              Accessibility checks
              • local-first-boundary-before-action WCAG22:1.3.1: Local-first trust boundary copy must appear before the action that starts artifact processing. https://www.w3.org/TR/WCAG22/#info-and-relationships

                Confirm reading order exposes local/no-account/user-controlled-artifact copy before the primary action.

            • workspace-product: A product requires a workspace account and saved operational context.
              Visible signals
              • Workspace required
              • Saved client data
              • Role or review workflow
              Required state slots
              • products
              • trustCopy
              • policyLinks
              Accessibility checks
              • workspace-boundary-visible WCAG22:1.3.1: Workspace products must distinguish saved account data from local-only utilities. https://www.w3.org/TR/WCAG22/#info-and-relationships

                Confirm workspace/account data copy is visible on the same card or section as the workspace product.

            • browser-local-tool: A browser-local tool produces draft artifacts without upload or account assumptions.
              Visible signals
              • Browser-local
              • No upload
              • Draft output
              Required state slots
              • products
              • trustCopy
              • secondaryCta
              Accessibility checks
              • browser-local-draft-boundary WCAG22:1.3.1: Browser-local tools must name draft-output limits and no-upload behavior before export or download. https://www.w3.org/TR/WCAG22/#info-and-relationships

                Confirm browser-local/no-upload/draft-output copy is visible before the inspect or export action.

            Semantic obligations

            • Do not hide local-vs-workspace-vs-external boundaries inside decorative cards.
            • Do not imply every product has the same account, upload, or support model.
            • Use unavailable and external-link states instead of disabled-only or unlabeled outbound controls.

            ServiceSection

            Presents service categories with clear human guidance and restrained calls to action.

            Required slots

            • serviceName: Specific service category or compliance workflow name.
            • userOutcome: The operational result a client can expect.
            • humanSupport: Who reviews, advises, or acts on the user's behalf.
            • ctaSlot: Restrained action that starts a conversation or handoff.

            Required states

            • default: A service category is available for consideration.
              Visible signals
              • Service name
              • User outcome
              • Human support
              Required state slots
              • serviceName
              • userOutcome
              • humanSupport
              Accessibility checks
              • service-heading-label WCAG22:1.3.1: Heading and action labels must identify the service without relying on card position. https://www.w3.org/TR/WCAG22/#info-and-relationships

                Navigate headings and actions out of visual order and confirm the service remains identifiable.

            • selected: A user has chosen or focused a service path.
              Visible signals
              • Selected service
              • Next step
              Required state slots
              • serviceName
              • ctaSlot
              Programmatic status

              Selected service state must be programmatically available without color-only treatment.

              Accessibility checks
              • selected-keyboard-visible WCAG22:2.4.7: Selected service path must remain keyboard reachable with visible focus. https://www.w3.org/TR/WCAG22/#focus-visible

                Select the service with keyboard only and confirm visible focus and selected text are present.

              • selected-service-status-message WCAG22:4.1.3: Selected service state must announce the selected service and next step as a status message. https://www.w3.org/TR/WCAG22/#status-messages

                Select the service and confirm role=status announces the selected service without moving focus.

            • unavailable: The service is not currently offered or requires consultation.
              Visible signals
              • Unavailable
              • Reason
              • Consultation path
              Required state slots
              • serviceName
              • humanSupport
              Programmatic status

              Unavailable service state must keep consultation guidance programmatically available.

              Accessibility checks
              • unavailable-service-explanation WCAG22:4.1.2: Unavailable service explanation must not be hidden from assistive technology. https://www.w3.org/TR/WCAG22/#name-role-value

                Confirm service name, unavailable reason, and consultation path are announced together.

              • unavailable-service-status-message WCAG22:4.1.3: Unavailable service state must announce the service and consultation path as a status message. https://www.w3.org/TR/WCAG22/#status-messages

                Trigger unavailable service state and confirm role=status announces the reason and consultation path.

            Semantic obligations

            • Do not imply government affiliation or guaranteed filing outcomes.
            • Prefer specific service language over generic SaaS benefit cards.
            • Keep calls to action service-led rather than urgency-led.

            Pattern state exemplars

            EvidencePanel empty state

            • No sources attached
            • Add evidence

            No sources attached: actionSlot is visible in the empty state exemplar.

            EvidencePanel pending-review state

            • Pending review
            • Source count
            • Last checked timestamp

            Pending review: 1 synthetic source attached; illustrative source summary attached.

            Source count: reviewState is visible in the pending-review state exemplar.

            Last checked timestamp: Synthetic timestamp for gallery review only.

            Pending review updates must be programmatically determinable without moving focus.

            EvidencePanel reviewed state

            • Reviewed
            • Reviewer or review method
            • Source timestamp

            Reviewed: 1 synthetic source attached; illustrative source summary attached.

            Reviewer or review method: reviewState is visible in the reviewed state exemplar.

            Source timestamp: Synthetic timestamp for gallery review only.

            Reviewed state must be programmatically tied to the source and timestamp being reviewed.

            EvidencePanel blocked state

            • Blocked
            • Missing evidence reason
            • Next safe action

            Blocked: Missing official source evidence prevents completion.

            Next safe action: Review source evidence before continuing.

            Blocked evidence updates must announce the blocking reason and next safe action.

            TrustBoundary local-only state

            • Runs locally
            • No upload
            • Inspect source, proof artifact, and generated artifact

            Runs locally: The upload or fallback boundary is visible before the action.

            No upload: The proof artifact stays local; any later export is a user-controlled file save, not a network upload.

            Inspect source, proof artifact, and generated artifact: Users can inspect source, proof artifact, and generated artifact before continuing.

            TrustBoundary upload-required state

            • Upload required
            • Destination must be named
            • Reason for upload must be named

            Upload required: The upload or fallback boundary is visible before the action.

            Destination must be named: The consumer must name any upload destination and reason before artifact selection.

            Destination must be named: Synthetic destination selected by the consuming product, not hardcoded by Sanchika.

            Reason for upload must be named: Synthetic reason for upload is shown before file selection.

            Upload-required state must announce the upload boundary before file selection or submission.

            TrustBoundary permission-required state

            • Permission required
            • File read permission
            • Purpose: inspect selected local artifact

            Permission required: File read permission is needed to inspect the selected local artifact.

            File read permission: The local or upload boundary is stated before the action.

            Permission-required state must announce requested permission and purpose.

            TrustBoundary unavailable state

            • Unavailable
            • Reason: boundary cannot be completed safely
            • Fallback: use a manual review path

            Unavailable: The upload or fallback boundary is visible before the action.

            Fallback: use a manual review path: Review source evidence before continuing.

            Unavailable trust-boundary state must announce reason and fallback action.

            ProductFamilyRouter default state

            • Product names
            • Audience fit
            • Trust boundary summary

            Product names: title is visible in the default state exemplar.

            Audience fit: Compare workspace, local utility, browser-local tool, and external operational SaaS options.

            Product names: Axal workspace, Pack local utility, Tools browser-local drafts, and ComplyEaze support are listed with mode, audience, status, trust boundary, and destination.

            Audience fit: Product mode and trust boundary are visible before navigation.

            ProductFamilyRouter product-unavailable state

            • Unavailable
            • Reason
            • Fallback path

            Unavailable: Unavailable product is named with a reason and fallback path.

            Fallback path: Use the fallback, inspect, compare, or support path instead of a hidden disabled control.

            Unavailable product state must announce the product, reason, and fallback path without relying on disabled styling.

            • External link
            • Destination named
            • Policy or support link

            External-link state must announce the external destination and policy/support path before navigation.

            ProductFamilyRouter local-first-product state

            • Local-first
            • No account required
            • User-controlled artifact

            Local-first: Local-first product keeps artifacts user-controlled.

            No account required: Local-first products avoid account requirements and keep artifacts user-controlled.

            User-controlled artifact: Open the named product destination after reviewing its trust boundary.

            ProductFamilyRouter workspace-product state

            • Workspace required
            • Saved client data
            • Role or review workflow

            Workspace required: Workspace product requires an account and saved operational context.

            Saved client data: Workspace products may save client data and need role-aware review workflows.

            ProductFamilyRouter browser-local-tool state

            • Browser-local
            • No upload
            • Draft output

            Browser-local: Browser-local tool creates draft output without upload assumptions.

            No upload: Browser-local tools produce draft outputs without upload assumptions.

            Draft output: Use the fallback, inspect, compare, or support path instead of a hidden disabled control.

            ServiceSection default state

            • Service name
            • User outcome
            • Human support

            Service name: Example advisory review is available for consideration.

            User outcome: userOutcome is visible in the default state exemplar.

            Human support: Human consultation is available before a filing or review action.

            ServiceSection selected state

            • Selected service
            • Next step

            Selected service: Example advisory review is selected.

            Next step: Review source evidence before continuing.

            Selected service state must be programmatically available without color-only treatment.

            ServiceSection unavailable state

            • Unavailable
            • Reason
            • Consultation path

            Unavailable: Example advisory review is unavailable; consultation path is shown.

            Consultation path: Human consultation is available before a filing or review action.

            Unavailable service state must keep consultation guidance programmatically available.