Editorial Cream
- CSS variable
- --background-editorial
- OKLCH
- oklch(0.985 0.008 75)
- Hex
- #FAF8F5
- Role
- Hero and brand-page surface; warm magazine stock
Brand system
Sara Gil editorial guide
Visual and voice direction for Sara «Sarita» Gil's personal brand: runner, content creator, host of «Corre como una Chica», and Community Manager. A magazine system — serif headlines, sans body, warm surfaces, and square CTAs.
Typography
Serif for impact, sans for clarity
Playfair Display carries the editorial voice; Nunito supports reading, UI, and uppercase labels with wide tracking.
Display — Playfair Display
Corre como una chica
- Variable
- --font-serif
- Weights
- 400, 500, 600, 700
- Role
- Headlines, pull quotes, and metric figures
Body — Nunito
I love running, talking, and telling stories that connect.
- Variable
- --font-sans
- Weights
- 400, 500, 600, 700
- Role
- Body copy, UI, and navigation
Label — Nunito
Community Manager · Podcast
- Tracking
- 0.2em – 0.28em
- Role
- Section labels, metadata, and captions
Display XL
Authentic communities
Usage: Page heroes and campaign headlines
Display M
Corre como una chica
Usage: Section titles and side pull quotes
Body L
Content that connects with people.
Usage: Lead paragraphs and intros
Body M
Community management and sports storytelling.
Usage: Default body and list items
Label
Community Manager
Usage: Eyebrows, badges, and metadata
Color
Warm palette with burgundy accent
Editorial cream surfaces, deep ink for text and CTAs, and burgundy as the brand thread — the podcast tone and athletic energy.
Ink
- CSS variable
- --foreground
- OKLCH
- oklch(0.145 0 0)
- Hex
- #1A1A1A
- Role
- Primary text and square CTA fills
Burgundy
- CSS variable
- --primary
- OKLCH
- oklch(0.271 0.101 12.1)
- Hex
- #5C2438
- Role
- Accent, links, italic emphasis, and selection
Muted Ink
- CSS variable
- --muted-foreground
- OKLCH
- oklch(0.556 0 0)
- Hex
- #6B6B6B
- Role
- Supporting copy and captions
Rule
- CSS variable
- --border
- OKLCH
- oklch(0.922 0 0)
- Hex
- #E8E8E8
- Role
- Separators, hairlines, and card edges
Border radius
Corners with intent
The editorial style favors square corners on primary actions; soft radii only where contrast helps hierarchy.
0
Editorial
rounded-none
Usage: Buttons, primary CTAs, and editorial blocks — sharp magazine cut
14px
Soft
rounded-lg
Usage: Cards and panels when contrast with square CTAs helps hierarchy
9999px
Pill
rounded-full
Usage: Status chips only — avoid on main actions
Layout
Magazine rhythm
Wide columns, controlled reading measure, and horizontal rules that mark sections like a feature story.
- Content max width
- 1280px (container)
- Editorial measure
- 52–64 characters (~max-w-[52ch])
- Section rhythm
- py-20 md:py-28 between major blocks
- Grid gutter
- 1.5rem container padding; gap-8–12
- Hero offset
- pt-28 md:pt-36 below toolbar
Tone & voice
Authentic, energetic, editorial
Sarita's voice on social and podcast: close and lightly humorous, never corporate. Every block follows headline + body + data structure.
Authentic
Speak like on Instagram and the podcast: close, no corporate speak.
Do: Use first person, light humor, and real examples.
Don't: Avoid empty jargon («synergies», «disruptive») and institutional tone.
Energetic
Convey movement — running, creating, connecting — without shouting.
Do: Active sentences, intentional verbs, editorial rhythm.
Don't: Don't overuse caps or chained exclamation marks.
Editorial
Every piece has structure: headline, body, rule, data point.
Do: Clear hierarchy with serif headlines and sans body.
Don't: Don't mix too many styles in one block.
UI patterns
Components in action
Buttons, rules, and side pull quotes as they appear on the homepage — the guide demonstrates itself.
CTAs
Editorial metrics
90+
Episodes
65%
Instagram women audience
110+
Newsletter
«Corre como una chica» — a reference space for women runners.