Forge DailyForge DailyBrand System Back to site

v1.0 · Brand System

A calm, premium
monochrome system.

One quiet voice across the landing site, client portal, and admin. Deep blacks, crisp whites, refined grays. Color is reserved for status. Motion is subtle and purposeful. Spacing is intentional and 8-px aligned.

Identity

The mark

FD monogram

The FD monogram is the singular mark of Forge Daily Strategy. Use it on dark surfaces only. Maintain clear-space equal to its corner radius on every side.

Do · pair with the wordmark in nav, app icon, social.

Don't · recolor, outline, add effects, or place on busy imagery.

Tokens · Color

Surfaces & text

Six neutral tokens carry the entire interface. Status hues are reserved for health/state signals only — never as decoration.

Background#0A0A0A

Page surface. Deep, rich black.

--background

Surface 1#111111

Cards, glass panels, popovers.

--surface-1

Surface 2#1A1A1A

Raised surfaces, inputs, accents.

--surface-2

Border#262626

Hairlines and dividers.

--border

Foreground#FFFFFF

Primary text, primary button.

--foreground

Muted Foreground#A1A1AA

Secondary text, labels.

--muted-foreground

Muted (Text)#71717A

Captions and de-emphasized copy.

Status — used sparingly

Health Green

Wins, healthy, on-track.

--health-green

Health Yellow

Caution, in-progress, due soon.

--health-yellow

Health Red

Overdue, blocked, destructive.

--health-red

Tokens · Type

Typography

SF Pro Display for headlines, SF Pro Text for body, SF Mono for eyebrows and captions. Tight tracking on display sizes, balanced wrapping by default.

Display
Daily strategy.
SF Pro Display · 600 · −0.055em
H1
Section headline
SF Pro Display · 600 · −0.04em
H2
Subsection title
SF Pro Display · 600 · −0.03em
Body L
A trusted partner in your corner every day, for 15–30 minutes.
SF Pro Text · 400 · −0.012em
Body
Standard body copy for portal and forms.
SF Pro Text · 400
Caption
Helper text, metadata, microcopy.
SF Pro Text · 400
Mono Caption
OPERATOR / NETWORK
SF Mono · 500 · 0.12em
Eyebrow
THE DAILY FORGE
SF Mono · 500 · 0.22em

Tokens · Space

Spacing — base 8px

Every gap, padding, and margin snaps to multiples of 8. The scale below is the full vocabulary — combinations outside it are off-system.

space-1
8px
space-2
16px
space-3
24px
space-4
32px
space-6
48px
space-8
64px

Corner radii

sm · 8px
md · 12px
lg · 16px
xl · 20px
2xl · 24px
full · pill

Components

The library

Reusable patterns wired to the tokens above. Use these classes verbatim — do not hand-roll equivalents.

Buttons

.btn-primary · landing hero, marketing CTAs
.btn-ghost · secondary action next to primary
.btn-solid · portal forms, submit actions
.btn-outline · secondary in portal
.btn-solid-sm · inline confirms, compact
.btn-glass-sm · nav, top-bar

KPI tiles

Debrief streak
12days
Wins · 7d
8
Open actions
5
Completion
84%

Portal surfaces

.panel

Portal/admin default. Subtle gradient, sharper hairline.

.panel-flat

Flat variant for nested content (lists, rows on a panel).

Refined input

.input-field — white focus halo, refined hairline

Chips & status

Live indicatorOperator networkDoneIn progressTo do

Surfaces

.glass-card

Default raised surface. Hairline border, subtle inner highlight.

.glass-sheen

Adds a diagonal Apple-style highlight. Use on hero or featured cards only.

.glow-ring

Subtle gradient ring on hover. Use for interactive cards.

Form input

Task toggle states

To do
In progress
Done

Rules

How we use the system

Spacing is intentional

Snap to the 8-px scale. Empty space communicates calm — but pages should breathe, not waste scroll.

Color is reserved

Greens, yellows, and reds carry meaning. Never use them for decoration or branding.

Type sets hierarchy

Headlines earn their size. One H1 per page. Use eyebrows to label, not to decorate.

Touch targets ≥ 44px

Every interactive surface meets the Apple HIG minimum. Buttons, toggles, and links included.

Motion is calm

Transitions in 180–300ms. No bounce, no parallax, no aggressive effects. Reduced-motion is honored.

One mark, one voice

The FD monogram is the only logo. Tone is confident, direct, sparing with adjectives.