STYLING & VARIANTS

STYLE YOUR CONTENT

Master FYT's styling system with variants, layouts, and special properties to create impactful content.

VARIANT SYSTEM

Four core styles
Available Variants:
VariantStyleUse Case
`brutal`Black/white, high contrastPrimary content, headers
`electric`Neon colors, vibrantHighlights, CTAs
`resistance`Red/black, boldWarnings, important info
`humanist`Serif fonts, warmStories, quotes, personal content
Applying Variants:
Section Level:
YAML
sections:
  - id: "section-1"
    title: "Section Title"
    content: |
      Content here
    variant: "brutal"
Page Level:
YAML
styling:
  color_scheme: "brutal"
  background: "brutal-white"

BRUTAL VARIANT

High contrast, maximum impact
Characteristics:
  • Colors: Black and white only
  • Typography: Bold, uppercase, tight tracking
  • Borders: Thick (4px), solid black
  • Shadows: Heavy text shadows
Example:
YAML
sections:
  - id: "hero"
    title: "BRUTAL TITLE"
    content: |
      Maximum contrast. Maximum impact.
    variant: "brutal"
Best For:
  • Headers and titles
  • Primary content sections
  • Call-to-action areas
  • High-impact messaging

ELECTRIC VARIANT

Neon colors, vibrant energy
Characteristics:
  • Colors: Neon yellow, cyan, magenta
  • Typography: Bold, energetic
  • Effects: Glow, vibrant shadows
  • Mood: Energetic, modern
Example:
YAML
sections:
  - id: "features"
    title: "FEATURES"
    content: |
      Vibrant, energetic content.
    variant: "brutal"
Best For:
  • Feature highlights
  • Secondary content
  • Interactive sections
  • Modern, tech-focused content

LAYOUT OPTIONS

Organize your content
Available Layouts:
LayoutDescriptionUse Case
`grid`Multi-column gridCards, features, galleries
`list`Single column listArticles, documentation
`single-column`Centered single columnLong-form content
Grid Layout:
YAML
sections:
  - id: "features"
    layout: "grid"
    items:
      - title: "Feature 1"
        description: "Description"
      - title: "Feature 2"
        description: "Description"
List Layout:
YAML
sections:
  - id: "articles"
    layout: "list"
    items:
      - title: "Article 1"
      - title: "Article 2"

SPECIAL STYLING PROPERTIES

Page-level styling
Letterbox:
Adds cinematic letterbox bars (top/bottom black bars):
YAML
styling:
  letterbox: true
Registration Marks:
Adds printing press registration marks (corners):
YAML
styling:
  registration_marks: true
Background:
Set page background color:
YAML
styling:
  background: "brutal-white"    # White
  background: "brutal-black"    # Black
  background: "electric-cyan"   # Cyan
Color Scheme:
Set overall color scheme:
YAML
styling:
  color_scheme: "brutal"        # Black/white
  color_scheme: "electric"      # Neon colors
  color_scheme: "resistance"    # Red/black
Complete Example:
YAML
styling:
  letterbox: true
  registration_marks: true
  background: "brutal-white"
  color_scheme: "brutal"

MIXING VARIANTS

Combine for impact
Section-by-Section:
Different sections can use different variants:
YAML
sections:
  - id: "hero"
    title: "HERO"
    variant: "brutal"

  - id: "features"
    title: "FEATURES"
    variant: "brutal"

  - id: "warning"
    title: "WARNING"
    variant: "resistance"
Best Practices:
✅
Use brutal for primary content
✅
Use electric for highlights
✅
Use resistance sparingly for warnings
✅
Maintain visual hierarchy
☐
Don't mix too many variants on one page

NEXT STEPS

Learn More:
← BACK TO DOCUMENTATION INDEX