Brands813
↑ ↓ to browse
View full design.md ↗
Affinity· Designaffinity.serif.com
Design

Affinity

Dark creative suite — ink-black canvas, signature lime-green CTA, variable serif display type, and vibrant artwork photography that lets color-saturated user content do the heavy lifting.

Color Palette23 tokens
background#0e1318
surface#0f1015
surface-elevated#211d1d
surface-overlay#1a1a1f
ink#ffffff
ink-secondary#c4c4c4
ink-tertiary#7f7f7f
on-primary#0e1318
primary#a7f175
primary-hover#8ecd63
primary-container#1f3314
app-designer#6aaae4
app-photo#9b6fc5
app-publisher#e05c5c
link#9e9eff
link-hover#3860be
focus-ring#a7f175
border#5c5c5c
border-subtle#2a2a2a
error#e05c5c
success#a7f175
shadow-dark#000000
shadow-soft#182c59
Buttons
TypographyGoogle Font
Playfair Displaybrand uses Affinity Serif Variable
display-hero

The quick brown fox

112px · 700 · -2px
display

The quick brown fox

80px · 700 · -1.5px
heading-section

The quick brown fox

56px · 700 · -0.8px
heading-sub

The quick brown fox

32px · 400 · 0px
body-large

The quick brown fox

24px · 400 · 0px
IconsLucide
Set: Lucide · brand-matched
Formfocus ring
Email
you@company.com
Password
••••••••
Card · Shapes

Affinity

Dark creative suite — ink-black canvas, signature lime-green CTA, variable serif display type, and vibrant artwork photo…

Design
none
xs
sm
md
Elevation
RING
CARD
ELEVATED
Controls
On
Off
✓Checked
Unchecked
Selected
Option
Alerts
Heads up — a new version of the design system is available.
Saved. Your changes are live across all surfaces.
Some tokens are missing a contrast-safe pairing.
Couldn’t reach the server. Retry in a moment.
Badges
SolidSoftOutlineNewv2.0
FAQ
Affinity
Dark creative suite — ink-black canvas, signature lime-green CTA, variable serif display type, and vibrant artwork photography that lets color-saturated user content do t…
How does it integrate with my stack?
Is there a free tier?
Tabs
OverviewActivitySettings
DayWeekMonth
Stats
48.2k
Active users
+12.4%
$12.8k
MRR
+3.1%
99.9%
Uptime
−0.02%
Table
MemberPlanStatus
AQAvery QuinnPro Active
JLJordan LeeTeam Pending
SRSam RiveraFree Active
Avatars
AQJLSR+5
AQ
Avery Quinn
Online · Owner
Slider · Progress
Volume62%
Storage used78%
Tooltip · Popover
Brand-styled tooltipHover target

Keyboard shortcuts

Press ⌘K to open the command menu, ? for help.

Navigation bar
Banner
NewAffinity just shipped a refreshed design system.Read more →
Pricing
Pro
$24 /mo
  • Unlimited projects
  • Priority support
  • Custom domains
Stepper
CartDetails3Payment4Review
Breadcrumb
HomeDesignAffinity
Menu
Profile
Settings
Billing
Sign out
Toast
Changes savedUndo
You have 3 new updates
Activity
Avery created a new project
2h ago
Jordan left a comment
5h ago
Sam shipped v2.0
1d ago
Notifications
AQAvery Quinn invited you to Affinity.
2 minutes ago
JLJordan Lee approved your design tokens.
1 hour ago
SRSam Rivera mentioned you in a thread.
Yesterday
Code
theme.ts
// Affinity tokens
export const theme = {
  primary: "#a7f175",
  radius: "16px",
}
Calendar
March 2026
SMTWTFS28291234567891011121314151617181920212223242526272829303112
No resultsTry adjusting your filters or search for something else.
Loading
Pagination
‹123…12›
Brand moment

Affinity's design language begins with absolute darkness — a near-black canvas at that functions as a gallery wall rather than a neutral ground. The interface recedes entirely, lea…

Affinity · Design

Similar systems

Generated from shared tags, visual DNA, category, color, type, and radius.

Filter by this ↗
Instrument84%

shared styles: Dark, Bold, Minimal · same category: Design

Code by Jesse83%

shared styles: Dark, Bold, Minimal · same category: Design

FunTech CI82%

shared styles: Dark, Bold, Colorful · same category: Design

Wolff Olins78%

shared styles: Dark, Bold, Minimal · same category: Design

Viens-La78%

shared styles: Dark, Bold, Colorful · same category: Design

IDEO78%

shared styles: Dark, Bold, Minimal · same category: Design