Colors & Backgrounds

Using the Color Picker

Document Stack includes a visual color picker for setting any color property. Click on any color swatch in the inspector to open the picker.

• Visual picker — Drag the cursor to select a hue and saturation
• Hex input — Type a hex code directly (e.g., #3B82F6)
• RGB input — Enter red, green, blue values (0–255)
• Opacity slider — Set transparency from 0% (invisible) to 100% (solid)

Text Color

Every text and field element has a text color property. Best practices for choosing text colors:

• Use dark text on light backgrounds for body content
• Ensure sufficient contrast for readability (aim for WCAG AA ratio of 4.5:1)
• Use your brand's primary color sparingly — for headings or accents only
• Keep body text at #1a1a1a or #333333 for a professional look

Background Color

Any element can have a background color. This fills the element's bounding box with a solid color behind the content.

Common uses:

• Table header rows — Light gray or brand color background
• Badges and labels — Colored backgrounds with white text (e.g., "PAID", "DRAFT")
• Section highlights — Subtle background to draw attention to key areas
• Card-style layouts — White elements on a light gray page background

Page Background

Set the background color for the entire page in Page Settings. The page background applies to all pages in your template.

• White (#FFFFFF) — Standard for most documents
• Light gray (#F9FAFB) — Subtle warmth, less stark than pure white
• Brand color — Bold choice for certificates, invitations

Opacity & Transparency

Every element has an opacity setting (0–100%). Reduce opacity to create:

• Watermark effects (text at 10–20% opacity)
• Background overlays (colored rectangle at 50% opacity over an image)
• Subtle decorative elements

Maintaining Color Consistency

• Define your brand colors up front and reuse them across all templates
• Use a limited color palette — 2–4 colors maximum per template
• Keep note of your hex codes so you can reuse them consistently
• Use lighter/darker shades of the same hue for hierarchy

Suggested Color Schemes

Next Steps

• Borders & Shadows — Add depth to elements
• Typography & Fonts — Font configuration
• Styling & Formatting — Complete styling guide