Brand Guidelines · Lock the F*ck In

01

Brand Overview

Lock the F*ck In is a focus and discipline app. The brand is direct, honest, and anti-corporate. The visual identity is intentional and stripped back. Silent, minimal luxury. Not cheap-simple.

Think a well-crafted tool that stays out of your way. Every decision, visual and verbal, should feel earned and purposeful.

Brand nameLock the F*ck In

AbbreviationLTFI

Domainlockthefuckin.app

AestheticMonochrome. Off-white and black. No color noise.

ToneDirect. No filler. The name says it all.

02

Logo

The Meaning

The asterisk is a censorship mark. It replaces letters you are not supposed to say out loud. We made it the logo because that is exactly what the name does: it implies everything and spells out nothing.

The mark is typographic, not geometric. It is the asterisk character set in Plus Jakarta Sans Regular. It reads as a redacted word before it reads as a shape. That ambiguity is intentional.

The Mark Alone

For dark surfaces

LTFI_logo_dark.svg

Download

For light surfaces

LTFI_logo_light.svg

Download

Used at icon scale: app icon, favicon, profile images. Mark only. No wordmark.

Min. size: 24px in-app, 32px on web. iOS: 1024px export.

With Wordmark

Lock the F*ck In

Use on light surfaces · LTFI_wordmark_dark.svg

Download SVG

Lock the F*ck In

Use on dark surfaces · LTFI_wordmark_light.svg

Download SVG

Usage by Context

App iconLTFI_logo_dark.svg on #111111 square. Export at 1024px (iOS), 512px (Android).

Landing heroLTFI_wordmark_light.svg on #111111 section.

Landing navLTFI_wordmark_dark.svg on #F7F6F3 nav.

In-app headerLTFI_logo_light.svg on #F7F6F3 background.

Social profileLTFI_logo_dark.svg on #111111 square canvas.

Email footerLTFI_wordmark_dark.svg on white or #FAFAFA background.

Clear Space

The mark needs clear space on all sides equal to the height of one arm of the asterisk. Nothing intrudes on this zone. The wordmark gap between mark and text is one character width.

What Not to Do

·Rotate, stretch, or distort the mark
·Add shadows, glows, or gradients
·Use a lock icon, padlock, or geometric shape as the logo
·Use as a background watermark at any size
·Stack the mark above the wordmark. Horizontal only.
·Place the dark version on dark surfaces or vice versa

03

Color

#F7F6F3 Background Primary page background. Warm off-white.

#111111 Primary Headings, body text, primary buttons, dark sections.

#888888 Secondary Captions, metadata, muted labels, timestamps.

#EFEFED Surface Cards, input backgrounds, secondary surfaces.

#E3E2DF Divider Input borders, separators, subtle texture.

Usage

Primary button#111111 bg·#FAFAFA text

Secondary button#EFEFED bg·#111111 text

Input default#E3E2DF border·#EFEFED bg

Input focused#111111 border·#E3E2DF bg

Card background#EFEFED · no shadow

Error states#111111 · no red

Rules

No accent colors. Emphasis through weight, size, or spacing, not color. No blue links, no green success states, no red errors.

Never use pure #000000 or #FFFFFF. #111111 and #FAFAFA are the correct near-black and near-white for all LTFI surfaces.

#111111

#000000

#FAFAFA

#FFFFFF

04

Typography

Display / Headlines

Aa

Plus Jakarta Sans

ExtraBold 800. Wordmark, hero headlines, section titles.

UI / Body

Aa

Inter

Regular 400 / SemiBold 600. All body copy, labels, inputs.

Type Scale

Hero

Plus Jakarta Sans · 800
48–64px

No noise. Just work.

Landing hero

H1

Plus Jakarta Sans · 800
32px

Focus that holds.

Screen titles

H2

Plus Jakarta Sans · 800
24px

Your time, locked in.

Sub-sections

H3

Inter · 600
18px

Block. Track. Ship.

Cards

Body

Inter · 400
16px · 1.5lh

Built for people who don't need a motivational quote to get things done.

Body copy

Small

Inter · 400
14px

lockthefuckin.app. iOS, soon.

Captions

Micro

Inter · 400
12px

Labels

Rules

·Plus Jakarta Sans is for display and brand only. Not body text.
·No italic in UI copy.
·Left-aligned everywhere. Centered only on landing page hero.
·Body line height: 1.5x. Letter spacing: default.

Button Styles

#111111 bg · #FAFAFA text · 999px radius

#EFEFED bg · #111111 text · 999px radius

05

Voice & Tone

Principles

·Say it in fewer words. If you can cut a word, cut it.
·Direct over polite. Assume the person reading this is an adult.
·No gamification language. No "streak", "you're on fire", "amazing work."
·No corporate wellness speak. No "journey", "mindfulness", "unlock your potential."
·The scientific positioning is a flavor, not a vocabulary. Do not write like a research abstract.
·No exclamation marks in UI copy. The product earns attention without them.
·Oxford comma: always.

Punctuation

Em dashesAvoid. Use a period or comma instead.

Exclamation marksOne max per marketing page, only if earned. None in app UI.

EllipsisOnly for genuinely truncated content.

SwearingThe name implies it. In-app copy stays censored. The asterisk does the work.

Copy Examples

Context	Instead of this	Write this
Onboarding	"Welcome to your focus journey. Let's get started!"	"Ready to lock in?"
Empty state	"You haven't started any sessions yet. Begin your productivity journey today!"	"Nothing here yet. Start a session."
Paywall	"Unlock your full potential with premium features."	"One-time. Unlock everything."
Primary CTA	"Start your free trial" / "Get started today!"	"Join the Waitlist" / "Get Early Access"
Error	"Oops! Something went wrong. Please try again later."	"Something broke. Try again."
Session done	"Amazing work! You're crushing it! Keep going!"	"Done."

06

Spacing & Layout

Spacing Tokens · 4px Grid

xs4px

Inline spacing, icon gaps

sm8px

Tight padding, small gaps

md16px

Card padding, standard gaps

lg24px

Section spacing

xl40px

Major section gaps

2xl64px

Page-level vertical rhythm

Layout Rules

Mobile-first

Design for 390px (iPhone 14 base). Scale up.

Content width

640px centered for app UI. Landing page can go wider.

Cards

8px radius, 16px padding, #EFEFED. No shadow.

Inputs

6px radius, 12px/16px padding, #E3E2DF border.

Buttons

999px radius for pill buttons. Nothing else fully rounded.

07

Motion & Animation

Hover transition

Hover over me

200ms ease-out. Background shifts one step up the tonal scale.

Duration

150 to 300ms for all UI transitions. Faster feels snappy. Slower feels sluggish.

Easing

ease-out · ease-in-out

No bounce. No spring physics. No playful motion.

Allowed

·Fade-ins, slide-ins, hover transitions
·Scroll-triggered reveals on the landing page
·Continuous horizontal ticker (landing page only)
·Functional page transitions in app

Not Allowed

·Bouncy or spring-physics animations
·Attention-grabbing motion
·Anything over 300ms
·Decorative infinite loops (except the ticker)

08

Illustrations & Icons

Monochrome illustrations are allowed. Line art, simple shapes, abstract diagrams using the brand palette only. They should feel clean and intentional, not decorative.

Functional icons are allowed for menus, navigation, and feature indicators. Monochrome only. No decorative icons without a function.

Allowed colors for illustrations

Not Allowed

Colorful illustrations, realistic photography, stock images, decorative elements without function.

Icon Style

Stroke-based, consistent weight, functional. Use monochrome only. 24px base grid.

09

Do's & Don'ts

Do

Stick to the monochrome palette. Five values only.
Use large type. If a section feels empty, make the headline bigger.
Respect the 4px spacing grid in all UI work.
The asterisk is the logo. Use it as specified.
Write direct, short, plain copy.
Alternate dark and light sections on the landing page.
Separate sections via background shifts, not borders.

Don't

Gradients anywhere.
Color outside the monochrome palette.
A lock icon as the brand logo.
Italic text in UI copy.
Photography, colorful illustrations, or stock images.
Any font outside Plus Jakarta Sans and Inter.
The asterisk as a large background watermark.

Brand Kit

Download the Guidelines

Full brand guidelines as a PDF. Logo, color, typography, voice, and layout.

BrandGuidelines