ActiveSitting Style Guide

Active Sitting: Design System v2 „editorial"

Nooro-led редизайн (05.09.2026). Единствен източник на истина: src/styles/global.css (@theme + ed-* класове). Готов еталон: src/pages/advertorial.astro. Правилата за прилагане са в docs/NOORO-DESIGN-SYSTEM-2026-09-05.md.

Цветови токени

--color-ink
Заглавия, CTA текст (#202122)
--color-ink-soft
Body текст (#434343)
--color-line
Разделители, рамки (#dedede)
--color-mist
Тихи панели (#f4f5f7)
--color-sand
Секционни ленти (#f8f8f6)
--color-masthead
Само masthead лентата (#7187aa)
--color-accent
CTA черно (#111111)
--color-brand
Печати, номера на стъпки (#2f4160)
--color-brand-2
Линкове в проза (#1756a9)
--color-gold
Звезди (#f5a623)
--color-success
За / положително
--color-error
Против / отрицателно

Типография (Open Sans навсякъде)

.ed-h1: H1 30→36px / 600

clamp(30px, 2.2vw + 22px, 36px), line-height 1.25

.ed-h2: H2 25→28px / 600

.ed-h3: H3 20px / 600

.ed-deck: deck/subhead 18px / 600, под H1

.prose-as p / text-base: body 17px, line-height 1.6, цвят ink-soft. Дългите статии използват .prose-as за p/h2/h3/blockquote/ul.

.ed-figure figcaption / caption: 14px, ink-soft

CtaButton

Черен правоъгълен бутон, пълна ширина, мин. 52px. Първият CTA на страницата се увива в <div data-sticky-anchor>, за да задейства sticky bar-а.

StickyBar (статичен пример)

Долен бял bar, показва се когато първият CTA излезе над екрана (виж скрипта в Base.astro). Един на страница, в края преди </Base>.

See the Routine

Figure

Правоъгълна снимка на пълна ширина на статията + описателен caption (какво се вижда, не claim). Само реални снимки от public/img/.

Conrad Kovach
Пример за caption: описва какво се вижда в кадъра, не твърдение за резултат.

Quote

Истински преведен отзив, ляв рул, без карта/сянка.

“Пример за истински преведен отзив, никога измислен текст.”
Community member· Translated from the original

Masthead

Синя лента за bare funnel страници (advertorial/offer/oto). Етикетът се сменя според типа страница: Advertorial, Official Site, Members, Free Challenge, Free Checklist. Тази страница я ползва отгоре, като жив пример.

ed-steps: номерирани блокове

  1. Release

    Пример за стъпка 1.

  2. Refeed

    Пример за стъпка 2.

ed-checks: чек-списък

ed-pair: снимка 405px + текст

Пример
Caption под снимката, описателен.

Текстова колона до снимката. На ≥640px снимката е 405px, текстът взима остатъка. .is-rev обръща реда.

ed-table

Ред 1Стойност
Ред 2Стойност

ComparisonTable (споделен компонент)

Active SittingFree YouTubeErgonomic chairGeneric PT sheet
Interrupts the Starved Spine Cycle (the cause)✓✕✕✕
Structured day-by-day progression✓✕, ✕
Fits into your day (~10 min)✓✕✓,
Built for a spine over 55 specifically✓✕, ✕
Follow-along video coaching✓, ✕✕
One-time costOne-timefree*$400+$100+/visit

fit-grid: за кого / не за кого

✓ За кого е

  • Пример ред

✕ Не е за

  • Пример ред

Guarantee (споделен компонент)

90DAY
GUARANTEE

The 90-Day Relief-or-Refund Guarantee

If you think the Routine could help you, you're welcome to try it for 90 days. Either your mornings change, or you email us and every cent comes back, no forms, no questions, and you keep the guide, all of it. We're not risking your money. We're risking ours. You don't have to finish all 21 days to ask: email us anytime within 90 days of purchase, for any reason.

Faq (споделен компонент)

Can I try the practice in my first session? +

Yes. Start with the Day 1 orientation and self-check. When you are ready, open the guided release lesson on Day 2. Learn the setup before following the movement; there is no need to rush through the lessons.

Why 21 days if the demonstrations show an immediate change? +

A demonstration shows one person at one moment. The 21 days organize your learning and regular practice. You can notice and record how a movement feels in a session, but the program does not promise the same immediate result for everyone.

Is one exercise the whole method? +

No. A single demonstration introduces one technique. The Routine gives you a lower-back-focused sequence and guidance on how the movements fit together. The Complete System is an optional, separate purchase.

Do I need any equipment? +

Most of the Routine is seated. Have a stable chair and space to move; follow each lesson for its setup, wall support and optional equipment.

How much time should I allow? +

Allow time to watch and learn a new lesson. Some teaching videos are longer than a practice session. The Desk-Break System provides a shorter sequence once you are familiar with the movements.

I have a diagnosed condition, recent surgery or an acute injury. Is this suitable? +

Check with your physician before starting. The program is educational movement practice, not a diagnosis or an individual treatment plan. Stop a movement if it causes sharp, shooting or radiating pain.

Are the demonstration participants customers of this course? +

The demonstration clips show the wider Active Sitting method. They are not presented as reviews from purchasers of the English 21-Day Routine. Community comments are identified separately.

How do I get the program? +

The program is online. After checkout, follow the private access instructions to open it on your phone, tablet or computer. Nothing physical ships.

Does every lesson have a video? +

The Routine includes video demonstrations and written lesson guides. The Flare-Day Plan is a written reference. Each lesson shows the material available for that lesson.

What if I miss a day? +

Nothing resets. Pick up where you left off and repeat an earlier lesson whenever you need. The 21 days are a learning structure, not a deadline.

What if it is not for me? +

Email us within 90 days of purchase for a full refund, for any reason. You do not have to finish the 21 days. Refunds go back to your original payment method.

Is this a subscription? +

No. One payment gives you lifetime access to the Routine, including future program updates. Optional extras are separate purchases.

Достъпни състояния

Focus: всички линкове/бутони пазят браузърния focus ring (не е премахнат с outline:none). Пробвай Tab върху бутоните долу.

Hover на .btn-cta: фон от --color-accent (#111) към --color-accent-600 (#000), без transform/сянка.

Правила: какво НЕ се прави