Point - Styling your Point portal

The Papirfly UI Builder lets you customize the design of your portal. It gives you control over the look and feel — from colors and typography to layout spacing — so your portal can match your brand, no matter where it’s accessed.

It’s especially useful for rebrands, regional styling, or when you just want to refresh the design.

Common use cases

• Rebrands: A client preparing for a brand refresh can fine-tune and preview new styles months in advance directly on their live portal — without affecting what end users see. On launch day, they simply publish the draft, ensuring a seamless go-live with no last-minute styling surprises.
• Design QA: Teams can instantly preview how styling updates affect different templates or components, making it easy to diagnose design issues, check accessibility contrast, or test visual alignment before going live.
• Multi-brand or multi-market setups: Global companies managing multiple brand skins or localized portals can apply unique styles per portal — while maintaining consistent structure and avoiding design drift.
• Decentralized brand management: Regional teams or partner agencies can manage their own portal styling within brand-approved limits, reducing the reliance on central brand or tech teams.
• Campaign or seasonal takeovers: Temporary style changes (e.g. Christmas, Pride Month, product launches) can be built and previewed in advance, then launched and rolled back without code or downtime.

Important to note

The UI Builder is an advanced application that directly affects your live portal. Any changes saved and published here will be immediately visible to end users.

Because of this, we strongly recommend that only experienced users who fully understand the implications of their changes work in the UI Builder. Incorrect adjustments may break or override parts of your portal’s styling, and our support teams may not be able to restore these changes for you.

For the best results, we recommend working with your Customer Success Manager or Solution Specialist to plan and implement updates.

Prerequisites

To use the UI Builder effectively, you should have knowledge about the following:

• Page Admin: Basic knowledge of managing pages.
• Editing Pages: Ability to edit and manage page content.
• Page Template Builder: Familiarity with building and using page templates.
• Basic CSS Coding: Understanding of CSS or at least familiarity with CSS values and styling.
• Web and Design Terminology: Knowledge of common terms like hex colors, pixels (px), em units, etc.

Using the tool

1. Open the UI Builder 
   Go to your main menu → Other → UI Builder.
   
   
   
    
2. Choose a skin
   You can select from an existing skin, or create a brand new one
   You can select an existing skin or create a new one. A skin is a collection of design settings (fonts, colours, buttons, spacing, layout) that controls how your portal looks.
   
   
3. Preview across portals 
   On the right-hand side, you’ll see a list of all your portals. You can preview how each skin looks on any portal — even if it’s not active. Active and inactive skins are labelled.
   
   
   
4. Create a backup 
   There is no staging area for your changes and there is no way to "revert" last changes, meaning it is important you have a careful approach when working in the UI builder.
   It is reccomended before making any changes, to always create a backup. For a complete backup, you download a "json" file before you begin making changes. 
   
   To do this, navigate to the three dots and click "export variables".
   
   
   
   If at any time you wish to roll back, simply navigate back to those three dots and "import" variables and save (see about saving below).
    

5. Edit and preview
   While editing, you’ll see changes reflected instantly in the preview window. You can navigate pages from the top menu. (Note: Preview is non-clickable and may not load deeply nested components.)
    
   
   

    

6. Save or publish your changes
   • If the skin is active: You can edit, preview & save changes - updates will go live immediately
   • If the skin is inactive:
     • Save changes - updates the skin without affecting live portals (think of this as draft mode)
     • Save changes & make live - updates the skin and switches it to be live on that portal. 
       
       

FAQs

Can I test a rebrand design without making it live?

Yes! You can build your rebrand styling in draft mode and preview it on the live portal without affecting what your users see. Once everything is approved, publish the new look with one click.

Can different business units have different styles?

Yes. Each archive can have its own unique styling, letting you tailor the experience for different brands, regions, or audiences.

Do I need design or coding knowledge?

Nope! The UI Builder is designed for anyone to use — no technical background needed.

Need help?

If you’re not sure how to achieve a specific look or run into an issue, contact support or reach out to your Customer Success Manager.