An Intergalactic guide with current semantic and chart tokens, native filtering controls, fixed-scale comparison, selected detail and a complete reproducible fixture.
Semrush Intergalactic Design System Analytical Workspace Layout
Give the comparison a defined question
The specimen compares six fictional keywords by one selected metric. A filter, tracked-only option and metric buttons sit above the result. A separate inspector shows both metrics for the selected term, allowing the user to compare a ranking view with the underlying values.
Distinguish authored data from measured data
Every number is part of a fixed fixture and is labeled illustrative. The page does not present search volume or difficulty as a current Semrush measurement. There is no network query, analytics account or downloaded customer dataset behind the bars.
Semrush Intergalactic Design System Theme and Token Generation
Use the current theme package deliberately
The runtime pins @semcore/ui 17.6.0 and @semcore/theme 2.3.1. The native components need the current theme package, and the entry imports its light.css. The table preserves OKLCH values from that stylesheet instead of replacing them with unrelated older hexadecimal defaults.
Keep component and chart roles separate
The native controls obtain their appearance from Intergalactic styling, while the original bar comparison uses the chart palette’s first series role. Selection is conveyed by a quiet row background and pressed state. A series color should not be reused indiscriminately as every action or error color.
Semrush Intergalactic Design System Typography for Dense Results
Keep labels, units and values together
Each bar row contains the term and a written numeric value. The small axis note specifies whether the scale is sample searches or a score out of 100. The inspector repeats both units, preventing a visually similar bar length from implying that the metrics are interchangeable.
Use compact text without hiding the context
The native input uses its large size for a comfortable filter target. Result labels stay compact, with a larger workspace title and section headings. On a narrow screen the keyword moves above the bar and value instead of being truncated to an unreadable fragment.
Semrush Intergalactic Design System Chart Scale and Sorting
Keep scale stable while filtering
The volume chart always uses a maximum of 8,100 and the difficulty chart a maximum of 100. Filtering does not stretch the remaining longest bar to the full width. This authored choice preserves comparison meaning when the user narrows the set.
Sort using the active metric
Semrush Intergalactic Design System Native Input and Checkbox
Use the compound input anatomy
Input supplies the outer component and Input.Value supplies the actual editable control. Its onChange callback receives the string value first, which differs from treating it as a standard DOM change event. The visible label points to the Value id.
Keep boolean and text filters independent
The native Checkbox onChange receives the checked boolean. Text filtering and tracked-only state are combined when deriving rows, so either can legitimately produce an empty result. Reset filters restores both controls while preserving the selected inspector context.
Semrush Intergalactic Design System Selected Detail and Empty State
Keep selection attached to identity
The selected term is stored independently of array order. Clicking a bar updates that term and its pressed state, while the inspector looks up the full fixture record. Sorting by another metric cannot make the inspector silently point at a different row index.
Explain a retained selection outside the filter
If the selected term is no longer visible, the inspector stays available with a written explanation. This is useful when comparing an item before and after filtering. The empty result region supplies an explicit reset action rather than rendering a blank chart panel.
Semrush Intergalactic Design System Accessible Data Comparison
Make the chart understandable without color
Bars are decorative spans inside real buttons. The term and value form the accessible text, and aria-pressed identifies selection. The data remains understandable without seeing the bar length or series hue. Keyboard focus is visibly separate from the selected row treatment.
Choose Difficulty and inspect the reordered bars and score unit.
Filter to an unmatched term and use Reset filters.
Select a term, filter it out, and read the retained-selection explanation.
Test the filter recovery path
The native input and checkbox expose their real controls. Metric switches use buttons with pressed state, and the original reset action clears both filters. The layout keeps the result title and unit note visible so empty and non-empty states have the same context.
Semrush Intergalactic Design System Component Imports and Theme Setup
Import component entry points
The @semcore/ui root intentionally throws rather than exporting all components. This source imports button, input and checkbox from their dedicated entry points and imports @semcore/theme/light.css. The complete entry includes the fixture and all derivation logic.
Dedicated @semcore/ui/button, input and checkbox imports.
Pinned @semcore/theme/light.css.
Original fixed-scale bar and fixture logic in the complete JSX.
Do not label the custom bars as a native D3 chart
Semrush Intergalactic Design System Component Examples
main.jsx — complete working specimen
Compare a fictional keyword set. The source below is the full React entry, including all state and validation.
jsx
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Button from "@semcore/ui/button";
import Input from "@semcore/ui/input";
import Checkbox from "@semcore/ui/checkbox";
import "@semcore/theme/light.css";
import "./intergalactic.css";
const data = [
{ term: "design tokens", volume: 8100, difficulty: 42, tracked: true },
{ term: "component library", volume: 6600, difficulty: 58, tracked: false },
{ term: "accessible forms", volume: 2900, difficulty: 31, tracked: true },
{
term: "responsive typography",
volume: 1900,
difficulty: 24,
tracked: false,
},
{ term: "semantic colors", volume: 1300, difficulty: 18, tracked: false },
{ term: "design system audit", volume: 720, difficulty: 36, tracked: true },
];
function App() {
const [q, setQ] = useState(""),
[tracked, setTracked] = useState(false),
[metric, setMetric] = useState("volume"),
[selected, setSelected] = useState("design tokens");
const rows = data
.filter((d) => d.term.includes(q.toLowerCase()) && (!tracked || d.tracked))
.sort((a, b) => b[metric] - a[metric]);
const max = metric === "volume" ? 8100 : 100;
const item = data.find((d) => d.term === selected);
return (
<main className="research">
<header>
<p>RESEARCH WORKSPACE / FICTIONAL DATA</p>
<h1>Compare a keyword set</h1>
<span>
Six authored sample records · figures are illustrative, not Semrush
measurements
</span>
</header>
<div className="research-toolbar">
<div className="research-search">
<label htmlFor="term-search">Filter keywords</label>
<Input size="l">
<Input.Value
id="term-search"
placeholder="Find a sample term"
value={q}
onChange={setQ}
/>
</Input>
</div>
<Checkbox
label="Tracked only"
checked={tracked}
onChange={setTracked}
/>
<div
className="metric-options"
role="group"
aria-label="Comparison metric"
>
<Button
use={metric === "volume" ? "primary" : "secondary"}
aria-pressed={metric === "volume"}
onClick={() => setMetric("volume")}
>
Volume
</Button>
<Button
use={metric === "difficulty" ? "primary" : "secondary"}
aria-pressed={metric === "difficulty"}
onClick={() => setMetric("difficulty")}
>
Difficulty
</Button>
</div>
</div>
<div className="research-grid">
<section className="chart-panel">
<div className="chart-heading">
<h2>
{metric === "volume"
? "Illustrative monthly volume"
: "Illustrative difficulty score"}
</h2>
<span>{rows.length} terms</span>
</div>
<p className="axis-note">
{metric === "volume"
? "Fixed scale: 0–8,100 sample searches"
: "Fixed scale: 0–100 sample score"}
</p>
{rows.length ? (
<div className="bars">
{rows.map((r) => (
<button
className={
"bar-row " + (r.term === selected ? "selected" : "")
}
key={r.term}
onClick={() => setSelected(r.term)}
aria-pressed={r.term === selected}
>
<span className="bar-name">{r.term}</span>
<span className="bar-track" aria-hidden="true">
<i style={{ width: (r[metric] / max) * 100 + "%" }} />
</span>
<strong>{r[metric].toLocaleString("en-US")}</strong>
</button>
))}
</div>
) : (
<div className="no-results">
<h3>No matching terms</h3>
<p>
Clear the text and tracked filter to restore the full
comparison.
</p>
<Button
onClick={() => {
setQ("");
setTracked(false);
}}
>
Reset filters
</Button>
</div>
)}
<p className="chart-note">
Values are written beside every bar. Click a term to inspect both
metrics.
</p>
</section>
<aside>
<h2>{item.term}</h2>
<dl>
<dt>Sample volume</dt>
<dd>{item.volume.toLocaleString("en-US")}</dd>
<dt>Sample difficulty</dt>
<dd>{item.difficulty} / 100</dd>
<dt>Tracking</dt>
<dd>{item.tracked ? "Tracked" : "Not tracked"}</dd>
</dl>
<div className="inspector-note">
<h3>Comparison context</h3>
<p>
The bar scale stays fixed when filters change. Difficulty and
volume have separate units and are not added together.
</p>
</div>
{!rows.some((r) => r.term === selected) && (
<p className="retained">
Selected term is outside the current filter; details are retained.
</p>
)}
</aside>
</div>
<footer>
Native Intergalactic Input, Checkbox and Button from @semcore/ui 17.6.0.
Original accessible HTML bar comparison; no analytics service request.
</footer>
</main>
);
}
createRoot(document.getElementById("root")).render(<App />);
Build a compact analytical comparison with native Intergalactic controls, dedicated imports and current theme tokens. Keep units, fixed scales, sorting and selected identity consistent. Provide textual values and empty-state recovery. Label fixture metrics and original chart code honestly rather than claiming measured Semrush data.
05
Semrush Intergalactic Design System Sources and Scope
OpenDesign application guide. The six keyword records and all metrics are fictional. Native Intergalactic controls surround an original HTML chart; it is not a Semrush report or native D3 chart implementation.
