🧬

🧬 Destillat 3 — Themes & Styling

Ă–versikt

Visuell utformning sker i Bullet Dashboard (Theme-sektionen och Bullet AI), aldrig i Notion. Notion styr vad som visas — Bullet styr hur det ser ut.

Theme Settings

Navigera till Theme i sajt-dashboarden.

Färger (Color)

  • Color Mode: Light (default) eller Dark. Toggle mellan dem.
  • Brand Colors: Textfärg, bakgrundsfärg, accentfärger.
  • Navbar Colors: Navbar-text, bakgrund, CTA-text.
  • Footer Colors: Footer-text, bakgrund.

Typografi (Typography)

  • Primary Font: Google Fonts — för titlar, rubriker, citat.
  • Secondary Font: Google Fonts — för brödtext genom hela sajten.
  • Font Size: Justera storlek för rubriker (H1–H6), citat och brödtext.

Layout

  • Spacing: Container-bredd, padding, column gap.
  • Notion Hero Section: Ikonposition, titelposition.
  • Border Radius: Global border-radius (kort, callouts m.m.).

Database Views

Anpassa hur Notion-databaser renderas: gallery views, kort-utseende, sökfunktionalitet i databaser.

Callout

Anpassa callout-block: skuggstorlek, opacitet.

Navbar & Footer (design)

Design-justeringar: logo-bredd, navbar-höjd, utseende.

Blog (design)

Blogg-specifika inställningar: cover image-bakgrund, header-position, TOC, publiceringsformat, tagg-position, kolumnlayout.

Badge

Bullet-badge (flytande logga) — visa/dölj.

Style Application Hierarchy

Detta är kritiskt att förstå — det avgör vilken stil som "vinner" vid konflikter.

Prioritet (högst → lägst)

NivĂĄ
Vad
Scope
1. Block Editor Styles
Styling pĂĄ enskilt element via Bullet Editor
Enskilt block — kan inte överskridas
2. Page-Level Code
CSS/JS under Pages → sida → Code
Enskild sida
3. Global Code
CSS/JS under Code Editor (global)
Hela sajten
4. Theme Styles
Theme-sektionens inställningar
Hela sajten
5. Default Notion Styles
Bullets inbyggda Notion-rendering
Hela sajten
Tumregel: Ju mer specifik desto högre prioritet. Block Editor slår allt.

Bullet AI (Betald funktion ⚠️)

⚠️
Bullet AI är en betald funktion. AI-styling förbrukar credits. Befintliga sajter kan INTE använda AI-styling ännu — bara nya sajter skapade med AI-flödet.

Koncept

  • Notion = struktur/layout. Bullet AI = stil (färger, fonts, spacing, borders).
  • AI ändrar aldrig layout — bara visuellt utseende.
  • Genererar CSS bakom kulisserna.

Tre verktyg

1. AI Chat (block- eller sajtnivĂĄ)
  • Välj ett block (eller hela sidan)
  • Skriv prompt: "Gör bakgrunden ljusblĂĄ med rundade hörn"
  • AI genererar och applicerar CSS
  • Reject: Ă…ngra senaste ändringen
  • Rollback: GĂĄ tillbaka till en sparad version
  • ⚠️ Reject/Rollback ĂĄterbetalar inte credits
2. Design Mode (manuell kontroll)
  • Ă–ppna Design Mode → justera typografi, färger, spacing, borders, shadows direkt
  • Bättre än AI för: exakta värden (font-size: 18px, padding: 10px)
  • Sämre än AI för: inspiration, komplexa stilkombinationer
3. Image Upload
  • Ladda upp screenshot → AI matchar stilen (~90%)
  • Tips: matcha Notion-layout mot screenshoten för bästa resultat
  • Ikoner/grafik kopieras inte exakt — stilen matchar

Block-val

  • Default: Ă„ndringar pĂĄverkar alla element av samma typ (t.ex. alla callouts)
  • Blue target icon: Klicka för att pĂĄverka bara det enskilda blocket

Responsivt

  • Default = desktop. Desktop-ändringar gäller globalt.
  • Byt till tablet/mobile i toolbaren för enhetsspecifika justeringar.
  • Desktop-only ändringar kräver manuell CSS.

Code Access

  • Klicka Code för att se genererad CSS
  • Code Editor — redigera direkt innan publicering
  • Save as Global Code — applicera pĂĄ hela sajten

Credits

  • 100 credits per sajt (se Billing)
  • Block-level styling = färre credits
  • Page-level styling = fler credits
  • Reject/Rollback = inga credits tillbaka

Tumregler för Webbmastern

  1. Theme Settings först — sätt grunddesign (färger, fonts, layout)
  1. Global Code — template-CSS och sajt-bred anpassning
  1. Page-Level Code — sida-specifika avvikelser
  1. Bullet AI / Design Mode — finjustering (om betald plan)
  1. Testa alltid responsivt (desktop → tablet → mobile) innan publicering