Docfense design system

The single source of visual truth for Docfense: brand tokens, typography, buttons, status badges and feedback states.

Logo

DocfenseDocfenseDocfense

Colour tokens

--background

#FFFFFF

Page background

--foreground

#111827

Text, headings

--primary

#FF6B00

Buttons, links, accents

--primary-foreground

#FFFFFF

Text on orange

--card

#FFFFFF

Card surface

--card-foreground

#111827

Card text

--muted

#F8FAFC

Sections, alt rows

--muted-foreground

#111827 @65%

Secondary text

--border

#111827 @12%

Hairlines

--input

#111827 @12%

Field borders

--ring

#FF6B00

Focus ring

--accent

#F8FAFC

Hover surface

--accent-foreground

#111827

Text on accent

--destructive

#111827

Navy + orange rule

--status-verified

#FF6B00

Verified state

--status-unverified

#FF6B00 @55%

Unverified state

--status-mismatch

#111827

Mismatch state

Typography

Heading 1 — 32px semibold

Heading 2 — 24px semibold

Heading 3 — 20px medium

Body default — 16px regular Inter.

Body small — 14px minimum size.

Buttons

Status badges

VerifiedUnverifiedMismatchPendingDeliveredFailed

Loading skeletons

SkeletonText

SkeletonCard

SkeletonTable

Empty and error states

No tags yet

Register your first Docfense tag to start protecting your items.

This did not load

Something went wrong on our side. Try again in a moment.