UIComponents
Production-ready UI components and interaction patterns. Discover production-ready UI components and interaction patterns that accelerate modern frontend development.
PreciseReusablePractical
Every interaction has a state
Reusable interface components need intentional interaction states, not only static boxes.
Graphic language: A resting control, an active control and a focus ring align through a shared interaction rail.
Composition: Use state-led component specimens, clear focus space and precise control labels; cards combine one quiet state transition with readable identity.
Your new identity is selected. This complete kit follows that choice. Manage logo choices ↗
One identity. Every format.
5 lockups × 6 treatments. Selected vector artwork and original outlined lettering are preserved.
Browser & app icons.
Download favicon set ZIP ↗Show the exact chosen compact mark at favicon, browser-tab, app-icon and avatar sizes; retain any documented source matte or native counter shapes. Real 16 / 32 / 48 pixel ICO payloads; PNG exports at 16 / 32 / 48 / 96 pixels.
Light browser tabs
UIComponentsactual pixels
actual pixels
actual pixels
Dark browser tabs
UIComponentsactual pixels
actual pixels
actual pixels
App launcher previews
Maskable safe zone & Safari
192 / 512 px exports
Exact approved mono symbol
Complete favicon set ZIPMulti-size ICOOriginal SVGApple 180 PNGAndroid 512 PNGMaskable 512 PNGSafari pinned-tab SVGWeb manifestWebsite head snippetBrowser & app preview ↗Icon usage notes
The original SVG preserves the saved mark. Themed icon exports uniformly fit its existing paint; app tiles use opaque brand backgrounds. Manifest paths target a production root and can be adapted for a subpath.
Purposeful colour.
#DB2777
Primary
RGB 219, 39, 119
Approx. CMYK 0 / 82 / 46 / 14
RGB 219, 39, 119
Approx. CMYK 0 / 82 / 46 / 14
#CA8A04
Secondary
RGB 202, 138, 4
Approx. CMYK 0 / 32 / 98 / 21
RGB 202, 138, 4
Approx. CMYK 0 / 32 / 98 / 21
#291727
Ink
RGB 41, 23, 39
Approx. CMYK 0 / 44 / 5 / 84
RGB 41, 23, 39
Approx. CMYK 0 / 44 / 5 / 84
#FEF6FA
Paper
RGB 254, 246, 250
Approx. CMYK 0 / 3 / 2 / 0
RGB 254, 246, 250
Approx. CMYK 0 / 3 / 2 / 0
#FFFFFF
White
RGB 255, 255, 255
Approx. CMYK 0 / 0 / 0 / 0
RGB 255, 255, 255
Approx. CMYK 0 / 0 / 0 / 0
#111111
Black
RGB 17, 17, 17
Approx. CMYK 0 / 0 / 0 / 93
RGB 17, 17, 17
Approx. CMYK 0 / 0 / 0 / 93
sRGB master colours. CMYK values are unprofiled planning estimates. Use the contrast combinations documented in the guide.
A consistent voice in type.
Display / IBM Plex Mono
Build interfaces with reusable pieces that fit together
Use display type for headlines and short messages. Preserve the original logo lettering and artwork as supplied.
Body / Source Sans 3
Explore UI components and interaction patterns that give modern frontend development a consistent, practical starting point.
Regular for reading, semibold for labels. Font files and their licences are bundled.
Shapes with a shared origin.
A resting control, an active control and a focus ring align through a shared interaction rail. Keep supporting graphics decorative and outside the logo clear space.
Business cards & letterhead.
Print stationery for UIComponents. The card QR opens the brand website; the A4 letterhead keeps a clear writing area beneath its branded header.
Branded header and footer, with space for your letter.
Scan to visit uicomponents.dev
Direct destination: https://uicomponents.dev
Keep the QR's white border intact and print it at least 20 mm wide, including that border. The original vector file is included.
Print PDFs include 3 mm bleed and defined trim boxes. Keep writing inside the letterhead's documented text area.
A brand that shows up everywhere.
20 visual collateral pieces with brand-specific copy, plus a reusable email signature. SVG sources, PNG exports and print PDFs are included.
The same identity, in motion.
Rest, active and focused states assemble into one coherent interaction pattern. A focus ring moves between three interface states.
A system you can keep using.
Print layouts include 3mm bleed. Follow the supplied trim boxes; have your print supplier confirm colour profile and brochure fold allowance. Website and contact copy comes from source website content.