Documentation

A comprehensive guide to creating professional social media graphics with Card•1 Pro - the browser-based design tool built for product teams.

🔍

Getting Started

Card•1 Pro is a browser-based, secure design tool built specifically for product teams who need professional social media graphics quickly. No design experience required.

Unlike traditional design software, Card•1 Pro streamlines the design process by providing professionally-crafted templates optimized for social media platforms. Simply add your brand elements and content, and you're ready to publish.

What makes Card•1 Pro different?

We've eliminated design decision fatigue by providing safe, ready-to-use layouts with optimal typography and spacing. Focus on your message, not on design details.

What You'll Need

Before you begin, gather these essential brand assets:

  • Logo file: SVG format recommended for best quality, or high-resolution transparent PNG
  • Brand colors: Primary, secondary, and background colors in hex format (e.g., #c740ff)
  • Font name: Your brand's Google Font name if using custom fonts
  • Partner logo: Optional, for co-branded announcements (SVG or PNG)

Quick Setup Modal

When you first open Card•1 Pro, the Quick Setup modal appears to help you configure your brand identity in minutes.

modal

Font Family

System Fonts
Recommended if privacy policies are important. Select from the curated dropdown menu of professional system fonts that work universally across all devices.
Google Fonts
Search for popular Google Fonts by typing the font name (e.g., "Space Grotesk"). A live preview appears instantly. Click "Use this font" to apply it to your designs.
font family panel
Font Tips

System fonts load faster and work offline. Google Fonts offer more variety but require an internet connection. Choose based on your team's needs.

Brand Colors

Enter the hex codes for your brand colors:

  • Primary color: Your main brand color, used for key elements and accents
  • Secondary color: Complementary color for variety and hierarchy
  • Background color: Always use your darkest color for optimal contrast and readability
colors
Color Contrast

Using your darkest color as the background ensures text remains readable and your designs maintain professional contrast ratios.

Logos

Primary Logo
Upload your main brand logo. SVG format is strongly recommended for scalability and crisp rendering at any size.
Partner Logo (Optional)
For co-branded content, upload a partner or sponsor logo. Perfect for collaborations and joint announcements.
logos

Write your Content

This window allows you to quickly create a simple post (no carousel).

text modal
Quick Tip

Keep your messaging short and impactful. Empty fields won't appear in the preview, giving you flexibility in layout. For bullet lists, simply type lines without bullet symbols - they'll be added automatically. Press Enter to create new bullets.

Preview & Test

The Quick Setup includes a preview window where you can test your brand settings.

When satisfied with your setup, choose to export PNG test or continue to the full app. You can skip Quick Setup anytime and return to it later from the main interface.

preview in modal

App Interface

The Card•1 Pro interface is organized into three main areas: the top navigation bar, the left sidebar for settings, and the central canvas for your design preview.

User Interface

Top Navigation Bar

Access essential tools and options from the top navigation:

Format Switcher
format selector
Navigate between different format layouts and instantly preview how your design adapts to each size.
Text Align
text align
Center alignment is default for optimal visual balance. Adjust as needed for your design.
Presenters
presenters
Quickly add or remove presenter profiles from your design with one click.
Safe Area Frame
frame
Toggle the safe area guide to ensure content stays within optimal viewing zones. The frame won't appear in exports even if visible during editing.
Export PNG
export PNG
Click to immediately export the current format as a high-quality PNG file.
Light/Dark Mode
mode
Switch the interface theme for your viewing comfort. This doesn't affect your exported designs.

Canvas Area

canvas

The central canvas shows a live preview of your design. As you make changes in the left sidebar or text editor, the canvas updates in real-time, giving you instant feedback on your design choices.

Brand Settings

The left sidebar contains all your brand customization options. Changes here apply immediately to your canvas preview.

brand settings

Colors

Update your brand colors anytime by entering new hex codes. The interface will instantly reflect your changes across all design elements.

colors
Why Manual Color Entry?

We intentionally removed color pickers to maintain brand consistency. Manual hex code entry ensures you use your exact brand colors every time, preventing accidental color variations.

Font Settings

Choose between system fonts or search Google Fonts just like in Quick Setup.

font settings
Refresh Font Button
If a Google Font doesn't display properly due to connection latency, click this button to reload the font.
Typography Note

Font sizes and styles are not editable by design. Card•1 Pro uses professionally optimized typography to ensure your content always looks polished without requiring design expertise.

Logo Management

Fine-tune how your logos appear in designs with these options:

logos
Logo Size
Increase or decrease logo size prudently to maintain visual hierarchy.
Logo Separation
Adjust spacing between primary and partner logos for co-branded content.
Plus Symbol
When using two logos, toggle the plus symbol between them or change its color to match your secondary brand color.
Pin Logos to Top
Keeps logos anchored at the top of the safe area. Toggle off to center logos with the rest of your content - useful for logo-only designs.
Split Logos to Opposite Sides
Place logos in opposite corners for a clean, separated layout. The plus icon is automatically removed when enabled.

Canvas & Formats

Card•1 Pro supports multiple social media formats, each optimized for specific platforms and use cases.

Available Formats

Select your desired format from the dropdown menu:

formats
  • Square (1200 × 1200): Perfect for Instagram posts, LinkedIn, and general social media
  • Story (1080 × 1920): Optimized for Instagram Stories, Facebook Stories, and vertical content
  • Article (1200 × 627): Ideal for LinkedIn articles, blog headers, and link previews
  • Landscape (1920 × 1080): Great for presentations, YouTube thumbnails, and wide displays

Your content automatically adapts to each format, maintaining proper spacing and visual hierarchy.

Quick Templates

Load pre-configured templates to jumpstart your design:

templates
Only Text Template
Clean, text-focused layout perfect for quotes, announcements, and key messages.
One Presenter Template
Includes one presenter profile, ideal for single-speaker events, workshops, or personal announcements.
Two Presenters Template
Features two presenter profiles, perfect for interviews, panel discussions, or co-hosted events.
Quick Setup Modal
Reopens the Quick Setup modal in case you skipped it at the start.
Smart Templates

If you've already entered text content, templates will display your actual content. Otherwise, they'll show placeholder text you can edit by clicking the "T" icon.

Clear All

clear all
Warning

The "Clear All" button erases all content including your brand settings. To restore factory defaults, refresh the app after clearing.

Zoom Controls

At the bottom of the screen, adjust your canvas view:

zoom
  • Fit to Window: Default setting that scales your design to fit your screen
  • 50% Zoom: Zoomed out view for overall composition
  • 100% View: Actual size preview for pixel-perfect detail checking
  • Slider: Fine-tune zoom level to your preference

Text Content Editor

The text content panel is your primary editing interface. It can float over the canvas or dock in the left sidebar for flexible workflow.

text panel

Floating Panel Mode

Click the floating icon to detach the text editor from the sidebar. Drag it anywhere on the canvas for convenient access while designing. Close it to return the panel to the sidebar.

Text Input Best Practices

Keep your messaging concise and impactful. Empty fields automatically hide in the preview, so only filled content appears in your design.

Bullet Lists Made Easy

For bullet lists, simply write each line without adding bullet symbols - they're generated automatically. Press Enter inside the bullet box to create a new bullet point. Toggle bullets off to use the box as extra text space.

Call to Action (CTA)

Add a visual CTA button to drive engagement and curiosity:

call to action
CTA Text
Type your button text. Note: The CTA is visual only (not clickable) and designed to create curiosity - a common and effective social media practice.
Color Options
Swap between primary and secondary colors. Choose solid fill or outlined style.
Position
CTA pins to the bottom by default. Toggle off to compress content toward center.
Roundness
Adjust button corners from sharp edges to full pill shape to match your brand style.

Presenters

Showcase speakers, hosts, or team members with professional presenter profiles. Add one or two presenters with photos and details.

presenters

Adding Presenter Profiles

Click on Presenter 1 or Presenter 2 to add their information:

presenter settings
  • Profile Picture: Upload a photo. Use the adjustment modal to scale and reposition the image within the frame
  • Name: Full name of the presenter
  • Job Title: Current role or title
  • Company: Organization name
Storage Limitation

Presenter images don't save between sessions due to browser storage size constraints. You'll need to re-upload photos when you return to the app.

Between Presenters Icon

When using two presenters, add an icon between them to indicate the content type:

between presenters
  • Live Webinar: For live streaming events
  • Partnership: For collaborative content
  • Podcast: For audio/video interviews

Choose primary or secondary color for the icon and adjust presenter spacing to create the perfect layout.

Presenter Style Options

presenters style
Picture Roundness
Adjust roundness from sharp rectangular frames to perfect circles to match your brand aesthetic.
Border
Add a border around profile photos for extra visual emphasis.
Position in Content
Choose where presenters appear: before title, before or after subtitle, after paragraph, or after bullet points.
Presenter Size
Adjust size prudently to maintain visual balance with other content elements.

Ornaments & Frames

Add visual interest and make your posts stand out with decorative elements and custom frames.

ornaments

Decorative Ornaments

Enhance your designs with subtle decorative elements that use your brand colors with opacity:

  • Dots and Rectangles: Clean, structured "data" accents
  • Geometric Shapes: Abstract shapes for creative flair

Click the random icon to generate new variations and find the perfect look for your design. Ornaments automatically use your primary and secondary colors.

Design Note

Ornament settings don't save between sessions.

Frame

Add a frame around your entire design to help it stand out visually in social feeds:

frame
Enable Frame
Toggle on to add a border around your design.
Color
Choose primary or secondary brand color for the frame.
Thickness
Adjust frame width from subtle to bold.

Frames work across all formats and carousel slides. Unlike ornaments, frame settings save between sessions for consistent branding.

Background Images

Add depth and visual interest to your designs with custom background images. Smart fade controls ensure your text remains readable.

background image preview

Uploading Backgrounds

Upload any image as a background. The app automatically applies optimal opacity and fade direction to maintain content readability.

Storage Note

Background images don't save between sessions due to file size constraints. Browser storage limits are approximately 10MB total, and a single background can use 5MB.

Background Controls

background image
Opacity
Adjust image transparency to find the perfect balance between visual impact and text readability.
Fade Direction
Choose how the image fades to ensure optimal text contrast:
  • Fade Left (default)
  • Fade Right
  • Fade Top
  • Fade Bottom
  • Fade Center
  • Fade Edges
  • No Fade
Fade Strength
Control the intensity of the fade effect from subtle to strong gradient.

Best Practices

  • Choose images that complement rather than compete with your content
  • Keep backgrounds subtle - text readability is paramount
  • Use fade direction to create space for text placement
  • Test your design at 100% zoom to ensure clarity

Export Options

Export high-quality designs optimized for web and social media platforms.

Export Formats

PNG Export
High-resolution PNG files perfect for all social media platforms. Click "Export PNG" in the top navigation to download the current format.
PDF Export (Carousel)
For carousels, export all slides as a single 1080 × 1080 PDF file ready for LinkedIn and Instagram.

Export Quality

All exports maintain pixel-perfect quality and are optimized for web:

  • High-resolution output for crisp, professional results
  • Optimized file sizes for fast loading and sharing
  • Ready for immediate use across all platforms
  • Consistent quality across all format sizes
Pro Tip

What you see in the canvas preview is exactly what you get in the export. The safe area guide (if visible) won't appear in your final files.

Technical Requirements

Card•1 Pro is designed to work seamlessly in modern web browsers with minimal system requirements.

Supported Devices

Card•1 Pro is a browser-based application that works on:

  • Desktop: Full feature access with optimal screen real estate
  • Tablet: Touch-optimized interface for on-the-go design
Mobile Devices

While Card•1 Pro can be accessed on mobile devices, the interface is optimized for desktop and tablet screens for the best design experience.

Supported Browsers

For the best experience, use the latest version of:

  • Google Chrome
  • Mozilla Firefox
  • Safari
  • Microsoft Edge

Minimum Requirements

  • Internet Connection: Required for app access and Google Fonts (if used)
  • Browser Storage: Approximately 10MB for saving settings and preferences
  • Screen Resolution: 1280 × 720 or higher recommended
  • JavaScript: Must be enabled

Privacy & Security

Card•1 Pro is built with privacy in mind:

  • All processing happens in your browser - no cloud uploads
  • Your designs and settings stay on your device
  • System fonts available for maximum privacy
  • Browser-based security ensures your data stays with you

Subscription Management

subscriptions

Card•1 Pro subscriptions are managed by Paddle, which operates as a Merchant of Record. Paddle handles:

paddle
  • Global payment processing and currency conversion
  • Fraud prevention and security
  • Customer billing support
  • Compliance with local sales tax regulations worldwide

Need More Help?

Our support team is here to assist you with any questions.

support@cardonedesigner.com

We typically respond within 24 hours.