PromptEye components are CSS classes from css/ in the system kit. You put them in HTML and replace the content; the scripts add the motif and backgrounds. Outside Claude Design there are no React components; insert the logo as an SVG file.
Context
| Class | What it does |
|---|---|
.dk | dark background: black, text in paper |
.pp | light background: white, text in ink |
.cx-l | light context for buttons and links, e.g. b1b turns black |
Buttons
| Class | Level | Look | When |
|---|---|---|---|
b1b | 1 · standard | light with an orange point; black in .cx-l | the main action of a section |
b1a | 1 · Moment | orange | only to close an article or page, only on black |
b1w | 1 | white | exceptionally on a photo or colour |
b2 | 2 | glass / frame | the second choice |
b3 | 3 | text with an arrow; .n without | the third choice, links in sections |
Size F is full width (52 px).
<a class="b b1b" href="#">Book a demo</a>
<a class="b b2" href="#">Download the report</a>
<a class="b b3" href="#">See chapters</a>- One level-1 button per section. The second choice is level 2 or 3.
- Level 1 stands out through lightness and the point, not colour.
- Level 3 is just text with an arrow; the underline appears on hover.
- Moment (b1a) only on black. Not on colour, not next to cobalt, never in navigation or in an app. With the Moment there is no other orange in the frame.
- Cobalt never fills a button.
- The point only in level 1.
- A rectangle with a 2 px corner. No pills.
- A button stands on a calm background: black, white or the dark part of a gradient. Never in the brightest part of the light.
- Wording: verb and object, at most 3 words. No exclamation mark and no “click”.
- Phone: level 1 full width at the bottom, the second choice as level 3 below it.
Site navigation
The navigation sits in the hero. a.on is the active item. In light F use the colour logo for light backgrounds, and the navigation button is still b1b, never b1a.
<header class="hn">
<img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye">
<nav><a href="#">Product</a><a href="#">Reports</a><a class="on" href="#">Blog</a><a href="#">Pricing</a></nav>
<span class="r"><a class="b b3 n S" href="#">Log in</a><a class="b b1b S" href="#">Book a demo</a></span>
</header>Hero (1440 × 860)
| Variant | Section classes |
|---|---|
| D dark | ah dk + data-pe-hero="d" |
| F light | ah ahl cx-l f86 + data-pe-hero="f" |
| G cover | ah dk gt gt-k + data-pe-hero="g" |
| E outline | ah dk + data-pe-hero="e" |
.ah-in is the text column (left 48, top 184, width 680). H1 64 up to 3 lines, lead 21 up to 3 lines. .ah-cr is the breadcrumb, .ah-m the meta. All variants live are in the Motif chapter.
<section class="ah dk" data-pe-hero="d">
<header class="hn">…</header>
<div class="ah-in">
<div class="ah-cr"><a href="#">Blog</a><span>/</span><span>Regions of Poland</span></div>
<h1>Where does AI send Poles to the seaside?</h1>
<p>Lead, max. 3 lines (about 150 characters).</p>
<div class="ah-m"><b>PromptEye research team</b><span>23 October 2026</span><span>9 min read</span></div>
</div>
</section>CTA (1440 × 560)
Closing a page: the motif raster, the Moment (b1a) and level 3. With the Moment the title has no dot.
Show code
<section class="t2end" data-pe-cta="raster">
<div class="t2end-in">
<h2>See how AI recommends your region</h2>
<p>We will show your brand’s results against the competition. The demo takes 30 minutes.</p>
<div class="pb-ctas"><a class="b b1a L" href="#">Book a demo</a><a class="b b3 L" href="#">Download the report</a></div>
</div>
</section>Expert comments
A white section with a small grey motif element at the edge. Three cards, a quote of up to 5 lines, the photo via image-slot.
<section class="kx" data-pe-komentarze="raster" data-kolor="szary">
<div class="kx-in">
<div class="kx-h"><small>Expert comments</small><h2>What practitioners say about the results</h2></div>
<div class="kx-g">
<article class="kx-c">
<div class="kx-p"><image-slot id="foto-1" shape="circle" placeholder=""></image-slot><div><b>Name Surname</b><span>Role</span><span>Company</span></div></div>
<blockquote>Quote, max. 5 lines.</blockquote>
<a class="b b3" href="#">Read the comment</a>
</article>
…(3 cards)
</div>
</div>
</section>Linear figure
Data in a report is shown linearly, without motif dots. The script draws the figure (data-pe-rycina). Rules and patterns: the Tables and Charts chapters.
<figure class="t2fig t2fw fgm">
<div class="t2fig-h"><div><small>Figure 1 · Regions of Poland</small><h4>Category leaders in AI recommendations</h4><p>Measure, period.</p></div><img src="assets/logo/svg/prompteye-logo-color-on-light.svg" alt="PromptEye"></div>
<div class="fgm-b" data-pe-rycina><ul class="fgm-l"><li><small>Seaside</small><b>Sopot</b><span>30,9 %</span></li>…</ul></div>
<div class="t2fig-f"><span>Source: PromptEye, …</span><b>prompteye.com/raporty</b></div>
</figure>Other page sections
Exact patterns are in the system sheets. Copy a block from the sheet and replace the content.
| Section | Classes | Sheet |
|---|---|---|
| How it works | .pb-sh, .pb-cards | kanaly.html (C1, C2) |
| Reports | .t2sp | kanaly.html |
| Pricing | .t2pr, .t2pk, .t2p, .t2p.ft | kanaly.html |
| Comparison | .t2cmp | kanaly.html |
| FAQ | .t2fq, .t2faq | typografia.html (A1, A2) |
| Related | .t2rel, .t2card | typografia.html |
| Footer | .t2ft | typografia.html |
Templates
Ready pages in the kit: templates/hero-raportu, templates/okladka-raportu, templates/artykul and templates/rozdzial-raportu. They load the system via ds-base.js.