UIComponentsBRAND KITDownload everything

UIComponents

Discover production-ready UI components and interaction patterns that accelerate modern frontend development.

uicomponents.dev
Core identity

Logo suite

Download logo suite
Clear space
0.12 × the logo height on every side
Minimum size
Horizontal 229px · Stacked 104px · Wordmark 95px · Symbol 32px · Avatar 48px

Primary logo (horizontal)

  • horizontal-color.svghorizontal-color.svg4.2 KB · 535×104Download
  • horizontal-color.pnghorizontal-color.png25 KB · 1600×311Download

Stacked / vertical logo

  • stacked-color.svgstacked-color.svg4.2 KB · 361×258Download
  • stacked-color.pngstacked-color.png34 KB · 1600×1143Download

Logomark / symbol

  • symbol-color.svgsymbol-color.svg563 B · 128×128Download
  • symbol-color.pngsymbol-color.png5.2 KB · 1024×1024Download

Wordmark

  • wordmark-color.svgwordmark-color.svg3.9 KB · 418×68Download
  • wordmark-color.pngwordmark-color.png28 KB · 1600×260Download

Emblem / badge

  • avatar-color.svgavatar-color.svg672 B · 512×512Download
  • avatar-color.pngavatar-color.png2.2 KB · 512×512Download

Full colour on dark

  • horizontal-reverse-color.svghorizontal-reverse-color.svg4.2 KB · 535×104Download
  • horizontal-reverse-color.pnghorizontal-reverse-color.png18 KB · 1600×311Download
  • stacked-reverse-color.svgstacked-reverse-color.svg4.2 KB · 361×258Download
  • stacked-reverse-color.pngstacked-reverse-color.png26 KB · 1600×1143Download
  • wordmark-reverse-color.svgwordmark-reverse-color.svg3.9 KB · 418×68Download
  • wordmark-reverse-color.pngwordmark-reverse-color.png20 KB · 1600×260Download
  • symbol-reverse-color.pngsymbol-reverse-color.png5.2 KB · 1024×1024Download
  • symbol-reverse-color.svgsymbol-reverse-color.svg571 B · 128×128Download
  • avatar-reverse-color.pngavatar-reverse-color.png2.2 KB · 512×512Download
  • avatar-reverse-color.svgavatar-reverse-color.svg680 B · 512×512Download

Mono black

  • horizontal-black.pnghorizontal-black.png22 KB · 1600×311Download
  • horizontal-black.svghorizontal-black.svg4.2 KB · 535×104Download
  • stacked-black.svgstacked-black.svg4.2 KB · 361×258Download
  • stacked-black.pngstacked-black.png32 KB · 1600×1143Download
  • wordmark-black.svgwordmark-black.svg3.9 KB · 418×68Download
  • wordmark-black.pngwordmark-black.png26 KB · 1600×260Download
  • symbol-black.svgsymbol-black.svg563 B · 128×128Download
  • symbol-black.pngsymbol-black.png5.2 KB · 1024×1024Download
  • avatar-black.svgavatar-black.svg672 B · 512×512Download
  • avatar-black.pngavatar-black.png2.2 KB · 512×512Download

Mono white / reversed

  • horizontal-white.svghorizontal-white.svg4.2 KB · 535×104Download
  • horizontal-white.pnghorizontal-white.png18 KB · 1600×311Download
  • stacked-white.svgstacked-white.svg4.2 KB · 361×258Download
  • stacked-white.pngstacked-white.png26 KB · 1600×1143Download
  • wordmark-white.svgwordmark-white.svg3.9 KB · 418×68Download
  • wordmark-white.pngwordmark-white.png20 KB · 1600×260Download
  • symbol-white.svgsymbol-white.svg563 B · 128×128Download
  • symbol-white.pngsymbol-white.png5.2 KB · 1024×1024Download
  • avatar-white.svgavatar-white.svg672 B · 512×512Download
  • avatar-white.pngavatar-white.png2.2 KB · 512×512Download

Single brand colour

  • horizontal-primary.svghorizontal-primary.svg4.2 KB · 535×104Download
  • horizontal-primary.pnghorizontal-primary.png25 KB · 1600×311Download
  • horizontal-secondary.svghorizontal-secondary.svg4.2 KB · 535×104Download
  • horizontal-secondary.pnghorizontal-secondary.png25 KB · 1600×311Download
  • stacked-primary.svgstacked-primary.svg4.2 KB · 361×258Download
  • stacked-secondary.svgstacked-secondary.svg4.2 KB · 361×258Download
  • stacked-primary.pngstacked-primary.png34 KB · 1600×1143Download
  • stacked-secondary.pngstacked-secondary.png34 KB · 1600×1143Download
  • wordmark-primary.svgwordmark-primary.svg3.9 KB · 418×68Download
  • wordmark-secondary.svgwordmark-secondary.svg3.9 KB · 418×68Download
  • wordmark-primary.pngwordmark-primary.png29 KB · 1600×260Download
  • wordmark-secondary.pngwordmark-secondary.png28 KB · 1600×260Download
  • symbol-primary.svgsymbol-primary.svg565 B · 128×128Download
  • symbol-secondary.svgsymbol-secondary.svg567 B · 128×128Download
  • symbol-primary.pngsymbol-primary.png5.2 KB · 1024×1024Download
  • symbol-secondary.pngsymbol-secondary.png5.2 KB · 1024×1024Download
  • avatar-primary.svgavatar-primary.svg674 B · 512×512Download
  • avatar-primary.pngavatar-primary.png2.2 KB · 512×512Download
  • avatar-secondary.svgavatar-secondary.svg676 B · 512×512Download
  • avatar-secondary.pngavatar-secondary.png2.2 KB · 512×512Download

Logo source files

Core identity

Colour palette

  • Primaryprimary
    HEX
    #DB2777
    RGB
    219, 39, 119
    HSL
    333°, 71%, 51%
    CMYK
    0, 82, 46, 14
    Aa4.60 · AAAa4.57 · AA

    --brand-primary

  • Secondarysecondary
    HEX
    #CA8A04
    RGB
    202, 138, 4
    HSL
    41°, 96%, 40%
    CMYK
    0, 32, 98, 21
    Aa2.94 · FailAa7.15 · AAA

    --brand-secondary

  • Whiteneutral
    HEX
    #FFFFFF
    RGB
    255, 255, 255
    HSL
    0°, 0%, 100%
    CMYK
    0, 0, 0, 0
    Aa1.00 · FailAa21.00 · AAA

    --brand-white

  • Blackneutral
    HEX
    #111111
    RGB
    17, 17, 17
    HSL
    0°, 0%, 7%
    CMYK
    0, 0, 0, 93
    Aa18.88 · AAAAa1.11 · Fail

    --brand-black

  • Paperbackground
    HEX
    #FEF6FA
    RGB
    254, 246, 250
    HSL
    330°, 80%, 98%
    CMYK
    0, 3, 2, 0
    Aa1.06 · FailAa19.78 · AAA

    --brand-paper

  • Inktext
    HEX
    #291727
    RGB
    41, 23, 39
    HSL
    307°, 28%, 13%
    CMYK
    0, 44, 5, 84
    Aa16.85 · AAAAa1.25 · Fail

    --brand-ink

Core identity

Typography

Download typography
  • AaThe quick brown fox jumps over the lazy dog400500600700
    IBM Plex Monoheading
    Weights 400, 500, 600, 700Headingsfont-family: "IBM Plex Mono", sans-serif;Get the font
  • AaThe quick brown fox jumps over the lazy dog400500600700
    Source Sans 3body
    Weights 400, 500, 600, 700Body textfont-family: "Source Sans 3", sans-serif;Get the font
  • AaThe quick brown fox jumps over the lazy dog700
    Menlodisplay
    Weights 700Logo lettering (artwork)font-family: "Menlo", sans-serif;

Font files

Core identity

Voice & messaging

Elevator pitch
Discover production-ready UI components and interaction patterns that accelerate modern frontend development.
Core identity

Brand guidelines

Download brand guidelines
Hosted guidelines page
https://uicomponents.dev/brand/identity/brand-guidelines.html

Brand book

Visual language

Patterns, textures & gradients

Download patterns, textures & gradients

Patterns

  • pattern-01.pngpattern-01.png43 KB · 1200×1200Download
  • pattern-01.svgpattern-01.svg7.7 KB · 1200×1200Download
  • pattern-02.svgpattern-02.svg7.7 KB · 1200×1200Download
  • pattern-02.pngpattern-02.png50 KB · 1200×1200Download
  • pattern-03.pngpattern-03.png43 KB · 1200×1200Download
  • pattern-03.svgpattern-03.svg7.7 KB · 1200×1200Download
Visual language

Motion & animation

Download motion & animation

Animated logo

  • animated-symbol.svganimated-symbol.svg6.4 KB · 200×200Download
  • animated-logo.svganimated-logo.svg11 KB · 605×141Download
  • animated-logo-loop.svganimated-logo-loop.svg11 KB · 605×141Download
  • animated-symbol.webpanimated-symbol.webp16 KBDownload

Transitions & loaders

Digital & web

Favicons & app icons

Download favicons & app icons
theme-color
#291727
Manifest background colour
#FEF6FA

favicon.svg

  • favicon-dark.svgfavicon-dark.svg678 B · 128×128Download
  • favicon-light.svgfavicon-light.svg678 B · 128×128Download

favicon.ico

Apple touch icon

  • apple-touch-icon.pngapple-touch-icon.png1.3 KB · 180×180Download

Android / PWA icon

  • android-light-192.pngandroid-light-192.png1.4 KB · 192×192Download
  • android-dark-192.pngandroid-dark-192.png1.4 KB · 192×192Download

PWA icon

  • android-light-512.pngandroid-light-512.png6.6 KB · 512×512Download
  • android-dark-512.pngandroid-dark-512.png5.8 KB · 512×512Download

Maskable icon

  • android-maskable-light-512.pngandroid-maskable-light-512.png6.3 KB · 512×512Download
  • android-maskable-dark-512.pngandroid-maskable-dark-512.png5.8 KB · 512×512Download

Other files

Digital & web

Website & share images

Download website & share images
Default page title
UIComponents — Production-ready UI components and interaction patterns
Meta description
Discover production-ready UI components and interaction patterns that accelerate modern frontend development.

Open Graph image

  • open-graph.pngopen-graph.png58 KB · 1200×630Download
  • open-graph.svgopen-graph.svg171 KB · 1200×630Download
Digital & web

Design tokens & UI kit

Download design tokens & ui kit
CSS variablesTailwind v4 themeDesign tokens JSON

UI kit source

Digital & web

Email kit

Download email kit

Email signature

Newsletter header

  • email-header.pngemail-header.png28 KB · 1200×400Download
  • email-header.svgemail-header.svg36 KB · 1200×400Download
Social & ads

Social media kit

Download social media kit

Profile picture

  • profile-avatar.pngprofile-avatar.png8.8 KB · 512×512Download
  • profile-avatar.svgprofile-avatar.svg672 B · 512×512Download

Facebook cover

  • facebook-cover.pngfacebook-cover.png52 KB · 1640×624Download
  • facebook-cover.svgfacebook-cover.svg36 KB · 1640×624Download

LinkedIn profile banner

  • linkedin-banner.svglinkedin-banner.svg36 KB · 1584×396Download
  • linkedin-banner.pnglinkedin-banner.png38 KB · 1584×396Download

YouTube banner

  • youtube-banner.pngyoutube-banner.png111 KB · 2560×1440Download
  • youtube-banner.svgyoutube-banner.svg37 KB · 2560×1440Download

Instagram post

  • social-portrait.pngsocial-portrait.png95 KB · 1080×1350Download
  • social-portrait.svgsocial-portrait.svg188 KB · 1080×1350Download

Stories & reels cover

Post templates

  • social-square.pngsocial-square.png78 KB · 1080×1080Download
  • social-square.svgsocial-square.svg189 KB · 1080×1080Download
  • carousel-01.pngcarousel-01.png96 KB · 1080×1350Download
  • carousel-02.pngcarousel-02.png66 KB · 1080×1350Download
  • carousel-01.svgcarousel-01.svg193 KB · 1080×1350Download
  • carousel-02.svgcarousel-02.svg47 KB · 1080×1350Download
  • carousel-03.pngcarousel-03.png81 KB · 1080×1350Download
  • carousel-03.svgcarousel-03.svg185 KB · 1080×1350Download
Marketing

Marketing collateral

Download marketing collateral

Tri-fold brochure

  • PDFbrochure.pdf748 KBDownload
  • brochure-outside.svgbrochure-outside.svg379 KB · 1212×864Download
  • brochure-outside.pngbrochure-outside.png438 KB · 3579×2551Download
  • brochure-inside.pngbrochure-inside.png433 KB · 3579×2551Download
  • brochure-inside.svgbrochure-inside.svg440 KB · 1212×864Download

Other files

Print & merchandise

Stationery

Download stationery

Business card

  • PDFbusiness-cards.pdf94 KBDownload
  • business-card-front.pngbusiness-card-front.png49 KB · 1134×662Download
  • business-card-front.svgbusiness-card-front.svg36 KB · 960×560Download
  • business-card-back.pngbusiness-card-back.png49 KB · 1134×662Download
  • business-card-back.svgbusiness-card-back.svg62 KB · 960×560Download

Letterhead

Print & merchandise

Documents & presentations

Download documents & presentations

Presentation deck

  • presentation-cover.pngpresentation-cover.png118 KB · 1920×1080Download
  • presentation-section.pngpresentation-section.png91 KB · 1920×1080Download
  • presentation-cover.svgpresentation-cover.svg171 KB · 1920×1080Download
  • presentation-section.svgpresentation-section.svg160 KB · 1920×1080Download
Media & communications

Video kit

Download video kit

Meeting background

  • virtual-background.pngvirtual-background.png56 KB · 1920×1080Download
  • virtual-background.svgvirtual-background.svg20 KB · 1920×1080Download