Back to the homepage · Initial assessment for a public synthetic fixture · See the completed delivery and checks

DESIGN SYSTEM LOOP / SYSTEM REPORT · ds-loop-site · 2026-10-12

ds-loop-site / System review · 2026-10-12

Workspace settings — let the action follow its theme

Problems to review

These checks found possible problems. Their counts are not a quality grade.

Review the plan
color tokenizationnot checkedreached not measured
spacing tokenizationnot checkedreached not measured
typography tokenizationnot checkedreached not measured
finding groups2reached 01 high · reached 01 medium · reached 0

Reference-only values / (literal + reference + mixed values). Not reference resolution. Read the coverage limits.

01

Summary

The measured state and what deserves a closer look.

The big picture

Agent-authored recommendation. Read left to right: problem → proposed outcome → first delivery → verification. This sequence is a plan, not a measured dependency graph or completed work.

  1. 1 · Investigate

    What needs to change

    The action background repeats the light palette value in both themes. The existing dark palette cannot reach the button through that literal.

    Read the diagnosis and evidence
  2. 2 · Proposed

    What this should enable

    Use a theme-local palette alias for the action background. Keep the existing light and dark palettes, component geometry and form behavior.

    Inspect the proposed architecture
  3. 3 · First delivery

    Connect the action role to its palette

    Replace the two literal action-background declarations with var(--palette-blue-500, #245bdb) in their existing theme scopes.

    Effort: Not estimated

    Review the sequence
  4. 4 · Acceptance

    How to check the result

    Measure both theme colors and button dimensions; exercise keyboard form submission; retain the decision and the limits. This report records the initial assessment; completed checks are linked from the website's worked delivery.

    These checks are planned. Their presence does not mean they passed.

    Read verification limits
Assumptions to resolve · 1
  • The supplied convention for this public synthetic fixture is that primary actions follow each theme's existing palette. Preserve component dimensions, text colors and form behavior.

Problems to review

These checks found possible problems. Their counts are not a quality grade.

What we checked: .css files with 15 checks. No additional coverage gaps reported within that scope. What we couldn’t check

blocking 0 · reached not measuredhigh 1 · reached 0medium 1 · reached 0low 0 · reached not measured

Findings by area

AreaHighest severityGroupsMost severe finding
Colourhigh2 · reached 0Role colours bypass the palette

Severity is the engine’s rule severity, not a business priority.

First things to review

Up to three finding groups, ordered by engine severity. This is not a business-priority ranking.

highcolor/semantic-holds-literal

Role colours bypass the palette

Role-based colour tokens contain direct colour values instead of references to the palette.

2 recorded occurrences

Rule-reported count; importer not determined · 2 located occurrences all / reached 0

before.css:3 · before.css:7

mediumcolor/literal-duplicate-tokens

Repeated colour values

Several tokens store the same colour. Check whether they should share a palette value.

1 recorded occurrence

Rule-reported count; importer not determined · located occurrences not measured / reached not measured

No file:line recorded; see detailed engine evidence.

02

The problem

The agent’s assessment of what is getting in the way.

Agent assessment; the engine does not establish business impact.

The action background repeats the light palette value in both themes. The existing dark palette cannot reach the button through that literal.

Agent-cited evidence (not independently verified): before.css:3 · before.css:7

Assumptions — awaiting confirmation

The supplied convention for this public synthetic fixture is that primary actions follow each theme's existing palette. Preserve component dimensions, text colors and form behavior.

Unsupported — no evidence refs. This is not an established fact.

03

Where you are now

Source evidence, available for inspection.

Measured from source code. Counts describe the source; they are not grades.

Source, adapters and audit scope
Source revision
git:27a783bf6c87
Adapters
css-custom-props@0.6.0
Config / date
5b0a0820 · 2026-10-12T10:19:50.230Z
Scope
all · severity floor none
Full manifest
Rules run

What was checked

Read

  • css-custom-props@0.6.0 (.css): custom-property declarations (--token: value) — not rule bodies, not at-rules

Not read

No unread formats reported.

No unread token files reported.

Could not judge

No rule judgment limits reported.

Unconvertible colours: 0

Unclassified style values: 0

Unclassified token values: 0

Undecided colour roles: 0

CSS keyword/generic font components recognised and excluded: 0

Coverage evidence and samples

Coverage retains samples, not every unread location. Counts without locations cannot be traced further in this report.

Colour

highcolor/semantic-holds-literal

Role colours bypass the palette

Role-based colour tokens contain direct colour values instead of references to the palette.

2 recorded occurrences

Rule-reported count; importer not determined · 2 located occurrences all / reached 0

before.css:3 · before.css:7

mediumcolor/literal-duplicate-tokens

Repeated colour values

Several tokens store the same colour. Check whether they should share a palette value.

1 recorded occurrence

Rule-reported count; importer not determined · located occurrences not measured / reached not measured

No file:line recorded; see detailed engine evidence.

Detailed engine findings and evidence

Findings

2 findings · reached 0. A finding may group many use sites; finding counts are not occurrence counts.

high · 1 findings · reached 0

color/semantic-holds-literal

highcolor/semantic-holds-literal2 reported occurrences (rule-reported count)importer not determined · 2 located occurrences all / reached 0

2 semantic token declaration(s) hold a literal colour instead of referencing a primitive (1 distinct token names across 1 file(s))

See recorded location in Details

Details

2 semantic token declaration(s) hold a literal colour instead of referencing a primitive (1 distinct token names across 1 file(s))

where: --color-action-background = #245bdb (before.css:3); --color-action-background = #245bdb (before.css:7)

risk: Renaming or retuning a palette entry stops propagating — the same colour now lives in two places and drifts apart on the next edit.

fix: Point each at a primitive: --token: var(--<ns>-palette-<name>). If no primitive matches, add one first.

All recorded evidence
All 1 findings · reached 0 and recorded evidence
medium · 1 findings · reached 0

color/literal-duplicate-tokens

mediumcolor/literal-duplicate-tokens1 finding (rule-reported count)importer not determined · located occurrences not measured / reached not measured

1 colour value(s) are declared by 3 different tokens

See recorded location in Details

Details

1 colour value(s) are declared by 3 different tokens

where: #245bdb <- --palette-blue-500, --color-action-background

risk: The next person to change this colour changes one of the names and not the others, and the system carries two values for one decision.

fix: Keep one canonical token per value; make the rest var() aliases of it.

All recorded evidence
All 1 findings · reached 0 and recorded evidence
Recorded exceptions · 0 · reached not measured

Summaries, risks, fixes and suggestions are engine output. Candidates are not replacements. Some rules retain only example locations; expanding shows all evidence the rule recorded.

CSS property inventory

Extracted use sites before exceptions or severity filtering. Token declarations and markup are outside this inventory.

No ordinary CSS property values were recorded. This is not a count of all styling in the source.

Layers and the references between them

2 declared names · 4 declarations · 0 var() references. Layers use configured naming patterns. Lane order is not a reference edge.

upstream

0 distinct declared names

primitive

1 distinct declared names

--palette-blue-*
1 names / 2 declarations

semantic

1 distinct declared names

--color-action-*
1 names / 2 declarations

component

0 distinct declared names

use sites

0 var() reference occurrences

Unclassified

0 distinct declared names
All namespace groups · 2

Reference flow

Consumer → referenced group. Weight = observed var() occurrences, including fallbacks. Highlight = at least one recorded tier finding; it does not mark every occurrence as a violation.

Health observations

Declared, no reference observed · 2
Referenced, no declaration observed · 0
Semantic tokens holding literals · 1
Alias chains deeper than 4 · 0
Tokens in alias cycles · 0
Mode redeclarations · 0

Find a token

Select a token to inspect its declarations and follow references in either direction.

Scope and interpretation limits
  • Counts cover extracted declarations and references in the audited scope, before exceptions and severity filtering. Read-only tokenContexts dependencies are outside this architecture view. References outside this scope are not checked; undeclared names may exist in dependencies.
  • Namespaces remove a configured trailing scale step, then group the first two hyphen-separated name segments; they do not establish ownership. Reference arrows point from consumer to referenced token, including fallback references.
  • Source order is known only for matched lexical declarations within one file. Cross-file import order, specificity, inheritance, conditions, cascade layers and runtime overrides are not resolved. No computed winner is asserted.
  • Selector evidence supplements already-extracted declarations using the CSS lexer; unmatched declarations retain legacy selector text and unknown order. No missing tokens are reconstructed.
  • Alias depth counts whole-value var() chains across all declarations, not a resolved mode. Cycles and chains entering cycles have unresolved depth.
  • Highlighted edges link only to recorded findings in this report. Filtered findings and capped rule samples may leave other problematic edges unhighlighted.

Print shows the aggregate lanes. Open the HTML for complete searchable and paginated evidence.

Team structure

  • Workspace packages: not checked — no supported workspace packages resolved — package.json, pnpm-workspace.yaml
  • Package (root): not checked — manifest missing or unreadable — package.json
  • Code owners: not found in checked locations — CODEOWNERS, .github/CODEOWNERS, docs/CODEOWNERS
  • Stories: not found in supported source tree — . (source walker scope)
  • Single-app UI directory heuristic: not found in checked locations — components/ui, src/components/ui

Compared with public products

No publishable shared library was established; products is the fallback. Review the structural facts below. Override with --against products|systems.

Ratios are reference-only values / (literal + reference + mixed values), from 0 to 1. Ranges are observations, not targets or grades. 5 measured reference repositories. 100 classified occurrences per dimension and 3 contributing repos are required. Partial adapter coverage limits every comparison. If any contributing reference uses a different instrument, the dimension has no numeric comparison.

DimensionYour ratioReference rangeMedianComparisonContributing sources
Colour tokenizationnot checked——not checked4 reference repos: appsmithorg/appsmith, refinedev/refine, excalidraw/excalidraw, PostHog/posthog
spacing tokenizationnot checked——not checked5 reference repos: supabase/supabase, appsmithorg/appsmith, refinedev/refine, excalidraw/excalidraw, PostHog/posthog
typography tokenizationnot checked——not checked3 reference repos: refinedev/refine, excalidraw/excalidraw, PostHog/posthog
radius tokenizationnot checked——not checked2 reference repos: excalidraw/excalidraw, PostHog/posthog
shadow tokenizationnot checked——not checked0 reference repos: none
z-index tokenizationnot checked——not checked1 reference repos: PostHog/posthog
duration tokenizationnot checked——not checked1 reference repos: PostHog/posthog
Reference sources and measured scope
  • supabase/supabase · Apache-2.0 · 93a262d185fcba2d919692c32e88ce0f97a9ec98 · apps/studio · 2026-09-30
    https://github.com/supabase/supabase.git
    css-custom-props@0.6.0 + tailwind-jsx@0.5.0 + css-rule-bodies@0.3.0 · config 5b0a0820
  • appsmithorg/appsmith · Apache-2.0 · 50a5bf0d71c3fac856f55a20f80fbdec7c57b100 · app/client · 2026-09-30
    https://github.com/appsmithorg/appsmith.git
    css-custom-props@0.6.0 + tailwind-jsx@0.5.0 + css-rule-bodies@0.3.0 + token-json@0.2.0 · config 5b0a0820
  • refinedev/refine · MIT · 2352eb5b6539e2f39ad9aef652279ad1dcf2c467 · . · 2026-09-30
    https://github.com/refinedev/refine.git
    css-custom-props@0.6.0 + tailwind-jsx@0.5.0 + css-rule-bodies@0.3.0 · config 5b0a0820
  • excalidraw/excalidraw · MIT · 5a406e51875157bece389b9bc92d41ff241d5f3d · . · 2026-09-30
    https://github.com/excalidraw/excalidraw.git
    css-rule-bodies@0.3.0 + scss@0.2.0 · config 5b0a0820
  • PostHog/posthog · MIT · d6225edecf52e800edb6ff846bd966ae9ed8f92a · frontend · 2026-09-30
    https://github.com/PostHog/posthog.git
    css-custom-props@0.6.0 + tailwind-jsx@0.5.0 + css-rule-bodies@0.3.0 + token-json@0.2.0 + scss@0.2.0 · config 5b0a0820

Component usage not checked: no workspace packages were found at this source root.

Component documentation

  • Documentation presence only, not quality: exported PascalCase JSX declarations in shared workspace or standalone packages; package entrypoints, re-export chains, HOCs without JSX, remote and generated docs are not resolved.
  • Stories and docs are matched by adjacent component/source basename. Types recognize ComponentNameProps declarations or prop-table markers in matched docs; examples recognize literal component JSX in matched stories/docs. Prop tables, inferred types and differently named pages may be missed.
  • Ratios use detected components in each package. Documented means a matched story or docs page. Without a local documentation convention, a denominator, or on a file-filtered scan: not checked, never 0% documented.

Adoption over time

Source: .ds-scorecard/history.jsonl · 0 recorded runs.

Not checked: no scorecard history for this source.

Ratios describe static source evidence within each run’s coverage. They do not measure savings or productivity.

04

What good looks like

Practices to learn from, with their sources.

Supplied fixture convention

Primary actions follow each theme’s palette. The two palette values remain legitimate product choices.

Agent-cited evidence (not independently verified): before.css:2 · before.css:6

05

Where this takes you

Current and proposed architecture, with evidence boundaries visible.

Proposed architecture, not a measured future result.

Use a theme-local palette alias for the action background. Keep the existing light and dark palettes, component geometry and form behavior.

Agent-cited evidence (not independently verified): before.css:2 · before.css:6

Preserve the palette; connect the semantic role

1 observed0 inferred1 proposed0 not checked0 links
observed — seen in source or a rendered checkinferred — reasoned from cited evidenceproposed — a change, not current architecturenot checked — no result, never a pass

Before — observed

observed

Action role repeats light blue

Evidence
  • before.css:7

After — proposed

proposed

Action role follows theme palette

Changes: literal

Evidence
  • before.css:6

Rendered by the ds-loop skill from an agent-authored proposal. Every box carries its basis; the engine did not produce these judgements. Connector lines repeat the "→ … · meaning" list already in each box's evidence — read either.

06

The plan

Work in this order; verify each step before moving on.

  1. Step 1 · Effort: not estimated

    Connect the action role to its palette

    What changes: Replace the two literal action-background declarations with var(--palette-blue-500, #245bdb) in their existing theme scopes.

    Why: A palette edit should propagate to the primary action without replacing the component or changing legitimate theme choices.

    How you’ll know it worked: Measure both theme colors and button dimensions; exercise keyboard form submission; retain the decision and the limits. This report records the initial assessment; completed checks are linked from the website's worked delivery.

    Agent-cited evidence (not independently verified): before.css:3 · before.css:7

07

What we couldn't check

The boundaries of this evidence travel with every conclusion.

  • Finding groups with at least one reached location; mixed groups count once. Totals do not partition occurrences.
  • Static import analysis only, within the scanned tree. An importer is not runtime usage or an entry-point path.
  • No static importer found is not a relevance or deletion verdict. Dynamic imports, require calls, route manifests, globs, HTML link tags and build-time copies are outside this signal.
  • Relative paths, tsconfig/jsconfig paths and baseUrl, workspace source exports, and relative stylesheet @import, @use and @forward are resolved. Build-tool aliases, package stylesheet imports and package-based config inheritance are not evaluated.
  • Unresolved static specifiers or incomplete config resolution conservatively make files without a known importer unresolved. Finding groups without complete locations are also unresolved.
  • What we read: .css — custom-property declarations (--token: value) — not rule bodies, not at-rules
  • No additional gaps were reported; this is not a check of every product behaviour.
  • Component documentation: not checked — no shared component inventory in scope.
  • Documentation presence only, not quality: exported PascalCase JSX declarations in shared workspace or standalone packages; package entrypoints, re-export chains, HOCs without JSX, remote and generated docs are not resolved.
  • Stories and docs are matched by adjacent component/source basename. Types recognize ComponentNameProps declarations or prop-table markers in matched docs; examples recognize literal component JSX in matched stories/docs. Prop tables, inferred types and differently named pages may be missed.
  • Ratios use detected components in each package. Documented means a matched story or docs page. Without a local documentation convention, a denominator, or on a file-filtered scan: not checked, never 0% documented.
  • Import counts and JSX opening-element occurrences are source evidence, not runtime renders or adoption quality. JSX usage reads .tsx/.jsx/.js/.mjs/.cjs files; TypeScript-only files are outside this syntax count.
  • Shared-component share = shared / (shared + local) production JSX elements; external and unresolved elements are excluded. No denominator means not checked, not zero. Subpath shares use the same app denominator.
  • Relative imports, same-package imports, the package tsconfig `paths` aliases and components declared in the same file count as local; relative imports crossing package boundaries are not resolved. External means a declared dependency outside this workspace. Other aliases and out-of-scope workspace targets remain unresolved.
  • Re-export aliases, dynamic components, components passed as props, lexical shadowing, template interpolations and regex literals are not resolved by this regex analysis.
  • Only package-name specifiers of workspace packages count; tsconfig path aliases and relative imports across packages are not resolved.
  • Stories, tests and mocks are counted separately and never as production adoption.
  • Platform comes from declared dependencies; "unknown" is not guessed.

Static code checks do not establish rendered behaviour, accessibility, business impact or whether a cited claim is true. Source links open the public fixture files alongside this report.

Printed summary: only expanded evidence is included. Open the HTML file for the full recorded lists.