Brand Foundation

Selfrag Design System.

Tokens, components and brand assets for every Selfrag surface — web, presentations, email, PDF. Single source of truth.

Browse Tokens Browse Components

Logo

Four variants from one Adobe Illustrator master. Pick by background.

selfrag-logo-brand.svg · light bg

selfrag-logo-black.svg · print / mono

selfrag-logo-white.svg · dark bg, mono

selfrag-logo-white-red.svg · dark bg, brand accent

Colors

Single primary brand color. Neutral system covers all UI states.

Brand

Red

--sf-red

#E10018

Red Dark

--sf-red-dark

#B80014

Red Glow

--sf-red-glow

rgba(225,0,24,.15)

Neutrals

Black

--sf-black

#000000

Text

--sf-text

#323232

Text Sec.

--sf-text-secondary

#666666

Grey

--sf-grey

#999999

Grey Mid

--sf-grey-mid

#CCCCCC

Border

--sf-border

#EAEAEA

BG Alt

--sf-bg-alt

#F5F5F5

BG

--sf-bg

#FFFFFF

System

Green

--sf-green

#2E7D32

Warn

--sf-warn

#E65100

Error

--sf-error

#C62828

Typography

Roboto for headings (weight 300), Ubuntu for body. Hierarchy through size, not weight.

--sf-text-7xl

Aa

--sf-text-6xl

Display 80

--sf-text-5xl

Hero 64

--sf-text-4xl

Page Title 48

--sf-text-3xl

Section 36

--sf-text-2xl

Heading 28

--sf-text-xl

Subhead 22

--sf-text-lg

Lead body 18

--sf-text-md

Body text 16 (default)

--sf-text-sm

Meta / caption 14

--sf-text-xs

Micro 12

Heading 1.

Heading 2.

Heading 3.

Heading 4.

Heading 5.

Heading 6 — small caps

Lead paragraph — sets the tone of a section. Slightly larger, light weight.

Body copy. The default reading text. Ubuntu, 16px, line-height 1.6.

Meta text — captions, dates, signatures.

Section Eyebrow

Spacing

4px base scale. Use tokens, never raw pixels.

--sf-sp-1

4px

--sf-sp-2

8px

--sf-sp-3

12px

--sf-sp-4

16px

--sf-sp-5

20px

--sf-sp-6

24px

--sf-sp-8

32px

--sf-sp-10

40px

--sf-sp-12

48px

--sf-sp-16

64px

--sf-sp-20

80px

--sf-sp-22

88px (section)

Components

DOM-agnostic classes prefixed sf-*. Drop into any HTML context.

Buttons

Primary Outline Ghost Large CTA Small

Cards

Standard Card

Default surface with light border. Hovers with shadow.

Elevated

No border, soft shadow. Use for primary content blocks.

Accent

Red left-border for highlighted content.

Tags & Pills

Default Brand Outline Verified In Review Blocked

Pill default Pill brand

Table

Centro	Status	CO₂ Savings (t/yr)
Uno	Operational	17,500
Due	Operational	22,500
Tre	Planned	22,500
Saidef	Operational	7,500

Pull Quote

Lightning in water — turning waste streams into raw materials, in nanoseconds. — Selfrag Insight Series

Stat

70k

t CO₂ saved per year

4

Active Centros

200kV

Pulse voltage

Form

Name Message

Section Title

Section with red underline

Centered variant

Dividers

Standard divider:

Brand divider:

Brand centered:

Verdict Dots

Operational

Down

Pending

Usage

Import in any HTML context — Drupal, static site, slide deck, email template, PDF generator.

<link rel="stylesheet" href="https://brand.selfrag.com/tokens.css">
<link rel="stylesheet" href="https://brand.selfrag.com/selfrag-ds-core.css">

<body class="sf-body">
  <h1 class="sf-h1">Headline.</h1>
  <p  class="sf-copy">Body text.</p>
  <a  class="sf-btn" href="#">CTA</a>
</body>

Class prefix: sf-*. All classes are opt-in (no global element selectors). Tokens via CSS custom properties — override at :root for theming.