Style guide
The living reference for Fogata's tokens and components. Switch themes in the header to check every pairing.
Brand
The flame flickers gently and holds still when reduced motion is on.
Color tokens
- Aa · Ññ
--background / --foreground - Aa · Ññ
--card / --card-foreground - Aa · Ññ
--primary / --primary-foreground - Aa · Ññ
--secondary / --secondary-foreground - Aa · Ññ
--muted / --muted-foreground - Aa · Ññ
--accent / --accent-foreground - Aa · Ññ
--ember-soft / --ember-text --ember / --ring / --destructive
Type
text-displayHistorias alrededor del fuegotext-titleHistorias alrededor del fuegotext-headingHistorias alrededor del fuegotext-readingHistorias alrededor del fuegotext-base (UI)Historias alrededor del fuegotext-sm (UI)Historias alrededor del fuego
Reading measure
Reading comes first. Typography, speed and calm beat feature count. The line you are reading is set at the same size, leading and measure as a story body, so it should sit comfortably between 65 and 75 characters.
Components
Buttons
Inputs
Image search
Writers pick cover and inline photos from Unsplash. Picking a photo tells Unsplash it was used and credits the photographer under the image.
No photo picked yet.
Campfire vocabulary
Spanish UI uses the Spanish terms; English UI uses the English terms. First use always explains the plain meaning.
| Term | Meaning |
|---|---|
| Sparks | Applause for a story |
| Circle | A community publication |
| Ember | A saved highlight |
| Saved | Your reading list |
| Burning now | Trending stories |
| Weekly spark | A writing prompt every Monday |