Atmospheres
The Atmospheres Theming Dimension — CSS decoration overlays that establish visual character (editorial-luxury, cinematic, warm-soft, and more) without duplicating CSS per client.
Atmospheres are CSS decoration overlays that sit on top of a client's Tokens Dimension to establish visual character — dark-luxury-editorial, soft-wellness, clean-clinical, etc. — without duplicating CSS per client. One of the four Theming Dimensions, orthogonal to Tokens, Layout Archetypes, and Blueprints.
The portal's theme generator reads company_profiles.atmosphere at extraction time and emits an @import into the stored theme artifact pointing at @brikdesigns/bds/atmospheres/{slug}.css. The consumer Astro site fetches one theme artifact at build; the atmosphere cascades automatically.
Atmospheres are decoration only. They add vignettes, grain, orbs, and spotlights — they do not set surface colors. Background and text colors come from the Tokens Dimension (dist/tokens.css + the client's theme-{slug}.css in @layer client-theme). Import @brikdesigns/bds/page-base.css after tokens to wire html/body background to var(--page-primary) before any atmosphere loads.
How atmospheres compose with themes
| Axis | Where it's set | What it controls |
|---|---|---|
| Theme tokens | design_token_extraction task reads company_profiles.color_primitives + typography | Brand palette, fonts, spacing, border-radius |
| Theme mode | company_profiles.theme_mode (light / dark) | Whether text is dark-on-light or light-on-dark |
| Atmosphere | company_profiles.atmosphere (this vocab) | Decoration layer — vignettes, grain, orbs, spotlights |
| Navigation IA | pack.navigationIA (industry default) + portal overrides | Header archetype + scroll + mobile drawer |
| Blueprints | Per-section, per-page (forthcoming) | Layout primitives |
Each axis is an independent decision. A dental practice might pick theme_mode: dark + atmosphere: editorial-luxury + navigation: editorial-transparent; a wellness studio might pick theme_mode: light + atmosphere: warm-soft + navigation: calm-flat. The portal Intel tab is the single admin surface to set all four.
Vocabulary
The locked enum lives in content-system/vocabularies/atmosphere.ts.
| Slug | Theme mode | Natural fit |
|---|---|---|
editorial-luxury | dark | dental · med-aesthetic · luxury hospitality |
cinematic-dramatic | dark | legal · agency · finance · dark-mode SaaS |
minimal-clinical | light | healthcare (non-luxury) · legal · minimal SaaS |
warm-soft | light | wellness · therapy · mental-health · recovery |
clean-bright | light | SaaS · tech · productivity |
organic-textured | light | MUA · organic beauty · artisan · natural products |
none | (any) | explicit no-op — fallback when atmosphere is null |
Per-atmosphere reference
Each atmosphere renders on the same compact composite (hero + services grid + CTA) so you can compare treatments side by side. Previews are iframed to isolate atmosphere :root / body rules from the docs shell — the atmosphere CSS loads verbatim from @brikdesigns/bds/content-system/atmospheres/{slug}.css.
editorial-luxury
Gold radial orbs driven by data-ambient attributes on sections; SVG Perlin film grain at 32% opacity with mix-blend-mode: overlay; cursor-tracking spotlight on elements with data-spotlight. Section-edge fades reference var(--page-primary) from the theme layer so they blend into whatever surface color the brand sets. Honors reduced-motion.
| Slug | editorial-luxury |
| Theme mode | dark |
| Blurb | Gold orbs + film grain overlay. Quiet-luxury dark decoration. |
| Natural fit | luxury dental · med-aesthetic · editorial hospitality |
| Surface profile | single-tone-dark |
| Import | @brikdesigns/bds/atmospheres/editorial-luxury.css |
cinematic-dramatic
Aurora-drift gradient at the top of the viewport (42s cycle, animated via @property interpolation) and a conic rotating spotlight on sections marked data-ambient="spotlight". No grain — the aurora is already doing the atmospheric work. Section-edge fades reference var(--page-primary). Fit for legal / agency / finance / dark-mode SaaS.
| Slug | cinematic-dramatic |
| Theme mode | dark |
| Blurb | Aurora drift + conic spotlight. Theatrical dark decoration. |
| Natural fit | legal · agency · finance · dark-mode SaaS |
| Surface profile | single-tone-dark |
| Import | @brikdesigns/bds/atmospheres/cinematic-dramatic.css |
minimal-clinical
Zero atmospheric decoration. Trust comes from typography and precision alone. Intentionally empty — establishes the shared data-ambient / data-edge / data-spotlight attribute vocabulary without layering anything visually. Healthcare practices that aren't aiming luxury, legal where gravitas matters more than editorial warmth, minimal SaaS.
| Slug | minimal-clinical |
| Theme mode | light |
| Blurb | Pure white, zero atmospheric effects. Trust via precision. |
| Natural fit | non-luxury healthcare · legal (gravitas) · minimal SaaS |
| Surface profile | dual-mode |
| Import | @brikdesigns/bds/atmospheres/minimal-clinical.css |
warm-soft
Single quiet rose vignette in the top-left corner and subtle grain at 15% opacity with mix-blend-mode: multiply. No motion, no spotlights, no depth orbs — anxiety-sensitive audiences (wellness, therapy, mental health, recovery) shouldn't see cinematic flourish. Section-edge fades reference var(--page-primary).
| Slug | warm-soft |
| Theme mode | light |
| Blurb | Quiet rose vignette + minimal grain. Anxiety-safe light decoration. |
| Natural fit | wellness · therapy · mental health · recovery |
| Surface profile | single-tone-light |
| Import | @brikdesigns/bds/atmospheres/warm-soft.css |
clean-bright
Zero CSS decoration. Brand lives entirely in typography, imagery, and color accents. Sister to minimal-clinical — same visual posture, different semantic intent (SaaS/tech vs healthcare/legal).
| Slug | clean-bright |
| Theme mode | light |
| Blurb | Pure white. No effects. Brand lives in type and imagery. |
| Natural fit | SaaS · tech · startups · utility marketing |
| Surface profile | single-tone-light |
| Import | @brikdesigns/bds/atmospheres/clean-bright.css |
organic-textured
SVG Perlin grain at 40% opacity with mix-blend-mode: multiply for a tactile, recycled-paper texture. Subtle earth-tone radial tint in the bottom-right. Fit for MUA / organic beauty / artisan / natural-products brands where tactile materiality matters more than digital polish.
| Slug | organic-textured |
| Theme mode | light |
| Blurb | Sepia grain + earth-tone radial tint. Tactile paper-texture decoration. |
| Natural fit | MUA · organic beauty · artisan · natural products |
| Surface profile | single-tone-light |
| Import | @brikdesigns/bds/atmospheres/organic-textured.css |
none
Explicit no-op. Emits no rules. Fallback when company_profiles.atmosphere is null or a client doesn't want an atmospheric layer. Exists so the portal's theme generator can unconditionally emit an @import without branching.
| Slug | none |
| Theme mode | (any) |
| Blurb | No atmosphere layer. Pure theme tokens only. |
| Natural fit | fallback · custom per-client overrides |
| Surface profile | passthrough |
| Import | @brikdesigns/bds/atmospheres/none.css |
How to pick
When building a new client site:
- Read
company_profiles.theme_mode(light | dark). If unset, default frompack.affinities.visualStyle[0]—Dark→ dark, anything else → light. - Read
company_profiles.atmosphere. If unset, use the natural pairing fromATMOSPHERE_THEME_MODE:- dark + dental / med-aesthetic →
editorial-luxury - dark + legal / agency →
cinematic-dramatic - light + wellness / therapy →
warm-soft - light + healthcare (non-luxury) →
minimal-clinical - light + SaaS / tech →
clean-bright - light + MUA / beauty →
organic-textured
- dark + dental / med-aesthetic →
- The portal theme generator emits the
@importinto the stored theme CSS; consumer sites pull the theme at build time and the atmosphere cascades automatically. No per-client atmosphere CSS in the consumer repo. - Extending the vocabulary: new atmospheres go through the BDS PR process — add the slug to
ATMOSPHERE_VALUES, write a CSS file incontent-system/atmospheres/, add a manifest entry, extend thepackage.jsonexports, and add a preview block to this page. Don't invent atmospheres per client; graduate them.
Related
- Theming Overview — the four-layer cascade in context
- Client Themes — the Tokens Dimension below the atmosphere
- Layout Archetypes — site-header and site-footer pattern vocabularies
- Blueprints — page-layout vocabulary (separate axis from atmosphere)
- Content System / Industries — industry packs declare default atmospheres
Client Themes
The Tokens Theming Dimension — per-client semantic token overrides. Override matrix, minimal theme-{client}.css template, and interaction-state rules.
Layout Archetypes
The Layout Archetypes Theming Dimension — locked vocabularies for site-header and site-footer patterns. Paired but independent.