Internal reference
Marketing design system
- Tokens only
- SSR-visible
- JavaScript optional
import {
MarketingSection,
NeuCard,
SectionHeading,
} from '@/components/features/marketing/system';MarketingSection shapes
Flat for reading. Rounded for chapter changes.
The shared responsive radius supports flat, cap-top, cap-bottom and rounded transitions without turning every section into a card.
tone="light"
Light tone
Every primitive below resolves its ink and neumorphic shadows from this section's tone — no per-component dark variants.
NeuCard
The signature surface. Lifts on hover, presses on click; both CSS-only and disabled under reduced motion.
NeuCard (static)
interactive=false for decorative cards — no lift, no press.
NeuPanel
Quieter sibling for secondary surfaces. Pass pressed for an inset well.
tone="warm"
Warm tone
Every primitive below resolves its ink and neumorphic shadows from this section's tone — no per-component dark variants.
NeuCard
The signature surface. Lifts on hover, presses on click; both CSS-only and disabled under reduced motion.
NeuCard (static)
interactive=false for decorative cards — no lift, no press.
NeuPanel
Quieter sibling for secondary surfaces. Pass pressed for an inset well.
tone="dark"
Dark tone
Every primitive below resolves its ink and neumorphic shadows from this section's tone — no per-component dark variants.
NeuCard
The signature surface. Lifts on hover, presses on click; both CSS-only and disabled under reduced motion.
NeuCard (static)
interactive=false for decorative cards — no lift, no press.
NeuPanel
Quieter sibling for secondary surfaces. Pass pressed for an inset well.
typography.ts
Type scale
One Inter-led scale with tighter tracking at display sizes. Consume via SectionHeading or MARKETING_TYPE.
Hero — Inter display
Heading 1 — Inter display
Heading 2 — Inter display
Heading 3 — Inter display
Body — Inter. The quick brown fox jumps over the lazy dog.
Caption — Inter. Fine print, labels, table captions.
Eyebrow — kicker
<SectionHeading eyebrow title subcopy level='h1|h2|h3' align='left|center' /> — or MARKETING_TYPE.hero/h1/h2/h3/body/caption/eyebrow for bespoke heroes.
BrowserFrame / DeviceFrame
Product mockup frames
Every screenshot-style mockup sits in consistent chrome. Synthetic demo domain only — never a real tenant's.
Admin schedule mockup goes here.
Client app mockup.
<BrowserFrame url='demo-studio.bookingbible.com'>…</BrowserFrame> · <DeviceFrame label='…'>…</DeviceFrame>
CodeBlock
Code samples
Always dark-canvas, JetBrains Mono, language tag, copy button. Renders and hand-copies without JS.
curl https://demo-studio.bookingbible.com/api/v1/schedule \
-H "X-API-Key: bb_live_xxxxxxxxxxxx"LogoMarquee
Logo marquee
CSS-only infinite scroll — paused on hover, static under reduced motion.
- Example Studio
- Demo Gym
- Sample Spa
- Placeholder Pilates
- Fixture Fitness
ComparisonTable
Comparison table
Neumorphic surface, sticky row labels, mobile swipe, accessible yes/no cells.
| Feature | BOOKING BIBLE | Legacy platform |
|---|---|---|
| Free plan | Yes | No |
| Hybrid classes | Yes | Add-on |
| AI assistant | Yes | No |
FAQAccordion
FAQ accordion
Native <details> — opens with JavaScript disabled, answers crawlable in the SSR HTML.