Northline
- 8
- colours
- 2
- fonts
- 3
- assets
- 12
- rules
Aa
Outfit
Aa
Inter
#10131D
#3A49D9
#76C7F1
#D9F99D
Features
Everything inside a living brand style guide.
Slabby helps you collect, tidy, publish, and export brand systems from one slab: visual for people, structured for tools, and simple enough to keep current.
Example slabs
Create slabs for brands, clients, campaigns, and products.
A slab can be a finished brand guide, a client handoff, a campaign kit, or a clean source for AI-generated work. These example slabs show how different entries can sit side by side.
Mallow
- 5
- colours
- 2
- fonts
- 2
- assets
- 9
- rules
Aa
Outfit
Aa
Inter
#1F2937
#F97316
#FED7AA
#FFF7ED
Quartz
- 6
- colours
- 3
- fonts
- 1
- assets
- 8
- rules
Aa
Outfit
Aa
Inter
#111827
#7C3AED
#C4B5FD
#F3F4F6
Fennel
- 7
- colours
- 2
- fonts
- 4
- assets
- 11
- rules
Aa
Outfit
Aa
Inter
#102A27
#0F766E
#5EEAD4
#FDE68A
Vesper
- 6
- colours
- 2
- fonts
- 1
- assets
- 5
- rules
Aa
Outfit
Aa
Inter
#18181B
#BE123C
#FDA4AF
#FFF1F2
Cobalt
- 9
- colours
- 3
- fonts
- 5
- assets
- 14
- rules
Aa
Outfit
Aa
Inter
#0B1220
#2563EB
#93C5FD
#EFF6FF
Northline
- 8
- colours
- 2
- fonts
- 3
- assets
- 12
- rules
Aa
Outfit
Aa
Inter
#10131D
#3A49D9
#76C7F1
#D9F99D
Mallow
- 5
- colours
- 2
- fonts
- 2
- assets
- 9
- rules
Aa
Outfit
Aa
Inter
#1F2937
#F97316
#FED7AA
#FFF7ED
Quartz
- 6
- colours
- 3
- fonts
- 1
- assets
- 8
- rules
Aa
Outfit
Aa
Inter
#111827
#7C3AED
#C4B5FD
#F3F4F6
Fennel
- 7
- colours
- 2
- fonts
- 4
- assets
- 11
- rules
Aa
Outfit
Aa
Inter
#102A27
#0F766E
#5EEAD4
#FDE68A
Vesper
- 6
- colours
- 2
- fonts
- 1
- assets
- 5
- rules
Aa
Outfit
Aa
Inter
#18181B
#BE123C
#FDA4AF
#FFF1F2
Cobalt
- 9
- colours
- 3
- fonts
- 5
- assets
- 14
- rules
Aa
Outfit
Aa
Inter
#0B1220
#2563EB
#93C5FD
#EFF6FF
Website import
Start with the brand that already exists.
Paste a website URL and Slabby pulls useful starting points into a review flow: colours, fonts, type styles, and logo candidates.
- Analyse a public website in seconds
- Collect colours, font families, and type styles
- Find logo candidates without digging through folders
Review flow
Approve the useful pieces before they become rules.
Imports are intentionally review-first. Keep what belongs in the identity, skip old favicons and noisy colour values, then add the selected items to the slab.
- Untick anything that should not become a token
- Skip duplicate or stale brand material
- Apply selected colours, fonts, type, and logos
Slab editor
Edit the whole visual system in one place.
The editor turns raw brand material into a usable source of truth: named colour roles, documented font choices, responsive type rules, spacing, logo guidance, and approved files.
- Name colours by role and add usage notes
- Define fonts, type rules, and spacing scales
- Attach approved logos and downloadable assets
- Save drafts before publishing changes
Publishing
Control what goes live and how people access it.
Publish when the slab is ready, keep drafts private while you work, and share a clean URL with clients, teams, developers, and AI workflows.
- Set the public slug and visibility
- Use private and password-protected slabs when needed
- Share visual and machine-readable URLs
Public guide
A brand page people can actually read.
Every published slab becomes a visual style guide with readable colour swatches, type specimens, spacing tokens, logo rules, usage notes, and examples.
- Show the brand system without sending source files
- Keep usage rules beside the actual tokens
- Update once and keep every viewer current
Structured outputs
The same slab works for tools and AI.
Visual guides are only one output. Slabby also exposes structured formats for production work, AI prompts, and automated pipelines.
- JSON endpoint for AI and build systems
- CSS variables for developers
- PNG summary cards for quick sharing
- Approved asset downloads and zip exports
Build a slab people and tools can use.
Start from a website, tidy the identity, and publish the same brand system as a visual page, JSON, CSS, PNG, and approved assets.
Get started free ->