DocSupra

Founder-led product Current website context

DocSupra is the founder's document-preparation SaaS. The earlier portfolio The public website presents Compliance Studio, Integrity Scanner and

documents work across product concept, brand strategy, visual identity, Enterprise Compliance Studio. It describes processing on the user's

interface direction and implementation. device. These statements are product positioning, not independently

audited findings. [1]

This new study The design challenge

Adds three visual territories, explicit palette selection, six icon variants and Communicate technical document requirements without increasing user

desktop/mobile UI concepts. These new screens are exploratory mockups, uncertainty. Make selection, settings, preview and export understandable

not screenshots of the live application. while preserving a recognizable brand.

Scope: brand and product design. No performance, security certification, customer outcome or regulatory claim is validated by this presentation.

Audience Positioning

Individuals preparing files for a destination portal; administrative and A document-readiness studio that helps people prepare files against

operations teams processing documents repeatedly. These audience technical requirements and review file-structure signals. Avoid a generic

segments guide the design and require further customer validation. cloud-storage identity.

Personality Visual signature

Precise, direct, modern and approachable. Explain requirements plainly and A document outline plus checkmark identifies the category and intended

show the next action. Use evidence and useful controls to support preparation outcome. Navy anchors hierarchy; electric blue and cyan

confidence. create recognition and focused emphasis.

The checkmark represents a preparation result or stated technical check. It must not imply that an institution will accept a file or that its contents are authentic.

New AI-assisted art direction studies based on the existing DocSupra brand assets.

Selection: Precision Ocean for campaign recognition; Clarity Studio for everyday product UI; Controlled Signal as an optional dark visual extension.

Engineered / dimensional / focused

Materials & atmosphere

Reflective dark glass, brushed metal, translucent document layers and

cyan edge light.

Why this direction

The document/checkmark silhouette remains the hero. Controlled

illumination draws attention without adding unrelated symbols.

Recommended applications

Launch campaigns, website hero imagery, sales-deck covers and

promotional assets.

#0A1F44 #007BFF #00D2FF #E6F4FF

Airy / readable / practical

Materials & atmosphere

Frosted blue glass, white surfaces, open spacing and quiet geometric

structure.

Why this direction

The brand becomes a usable workspace. Navy text and restrained blue

accents help content and controls remain the focus.

Recommended applications

Compliance Studio, onboarding, requirement panels, product education

and everyday UI.

#FFFFFF #F6F8FB #E6F4FF #0A1F44

Structured / analytical / restrained

Materials & atmosphere

Matte navy, graphite surfaces, precise light paths and abstract

scanning-inspired lines.

Why this direction

Dark surfaces provide a distinct atmosphere for analytical content.

Findings still need plain-language labels and context.

Recommended applications

Optional dark-mode explorations, Integrity Scanner presentations and

technical campaign graphics.

#071426 #18314F #4CB9E7 #D8E6EF

DEEP OCEAN #0A1F44 PRIMARY BLUE #007BFF ACCENT CYAN #00D2FF

Primary text, dark brand surfaces Brand emphasis and actions Checkmark and limited highlights

LIGHT BLUE #E6F4FF SLATE GRAY #6B7280 SOFT GRAY #F6F8FB

Selected panels and gentle fills Secondary text; verify contrast Main interface background

Proposed visual allocation Status is more than color

Use white and Soft Gray for most product surfaces. Deep Ocean supports readable content; blue Pair statuses with labels and symbols. Test

identifies actions. Cyan is an accent, rather than a default body-text color. contrast and focus states in the actual interface

before release.

Existing reference

The supplied identity pairs a rounded-square document symbol with a

prominent cyan checkmark and a DocSupra wordmark. The dimensional

treatment remains useful for campaign imagery.

Proposed variants

Original, Flat, Navy, Light, Mono and Reverse adapt the same idea to

different backgrounds and sizes. Prefer simplified treatments for dense UI

and small placements.

Master artwork

The new image-generated variants contain small drawing and lettering

differences. Reconstruct a single vector master, define clear space and

minimum size, and export all variants from it.

Type hierarchy

Exact specs.

Display: 36-56 px / bold

Section: 24-32 px / semibold

Less guesswork.

Body: 15-17 px / regular

Labels: 12-14 px / medium

Technical data: clear numerals and units

Proposed type direction

Composition rules

Geist for display headings and Inter for interface and body text, consistent

with the earlier design study. These are recommendations; this PDF uses

Use aligned columns, generous panel padding and a consistent spacing

embedded DejaVu fonts for reliable rendering.

scale. Place target format, file size and resolution together. Keep visual

effects away from controls and technical values.

Campaign language is a creative proposal, not a guarantee that every source file can be repaired or every destination requirement met.

Proposed visual direction. All file examples and interface data are illustrative; this is not a live screenshot.

01 / Choose a task 02 / Set requirements 03 / Preview and export

Distinguish document preparation from integrity Group format, size and resolution in a clear Show the output and final specifications before

review. Use plain-language task names, accepted settings panel. Explain the destination download. Provide actionable errors and preserve

input information and visible processing context. requirement rather than relying on a preset label user control when source quality is insufficient.

alone.

Integrity review Enterprise workflow

Technical findings should carry context. Editing software metadata, for Batch queues need explicit progress, exceptions and recovery.

example, may reflect legitimate processing. A signal should not be Team-oriented brand imagery should not substitute for documented

presented as proof of fraud or authenticity. access, data-handling and support information.

Validation plan: test task selection, requirement entry, result interpretation and export with participants. Record actual observations before claiming usability

improvements.

Brand hypothesis Visual distinction

Document readiness provides a sharper identity than a generic file utility. The proposed combination is a recognizable document/checkmark

The icon and practical messaging align the brand with the specific task of symbol, navy/cyan contrast, engineered campaign imagery and a quieter

preparing files to stated technical requirements. product interface. This is a design rationale, not proof of market

exclusivity.

Why blue and cyan? Trust through explanation

Deep navy gives structure and visual weight. Blue highlights actions. Cyan Readable requirements, transparent processing descriptions, contextual

connects the wordmark and symbol to campaign light accents. These are findings and clear limitations create concrete reasons to understand the

intentional design roles, not evidence that a color guarantees user trust. product. Use only claims supported by current implementation and

documentation.

A systematic competitive review, user research and measured product evaluation would be needed to test these positioning assumptions.

Campaign & website App & product

Use cinematic document layers and cyan-lit materials for hero banners, Use Flat or Navy icon variants where simplicity matters. Keep Original for

launch graphics and sales presentations. Keep messages specific and text expressive brand moments; use Mono and Reverse when color or

distinct from imagery. reproduction is constrained.

Reusable deliverables Next steps

Vector logo masters; light and dark lockups; favicon and app-icon exports; Select a master icon. Build the UI kit. Prototype primary flows. Test with

color and type styles; social templates; presentation cover; Figma users. Review accessibility, product copy and data-handling claims.

component library; responsive product mockups. Document results and iterate.

API and Claude/MCP material can be developed as a separate developer-experience chapter once its actual data flow and current implementation are reviewed.

Project credits Evidence boundaries

research, conversion gains, security audits, regulatory certifications or

The original DocSupra portfolio documents the founder's product and tested usability results. New mockups require production cleanup and

identity work. This extension combines that existing material with new validation.

AI-assisted moodboards, icon variants and conceptual interfaces.

References

[1] DocSupra official website. Reviewed October 28, 2026. Used to identify the current product areas and public positioning; claims were not independently

audited.

https://docsupra.com

[2] DocSupra_Corporate_Brand_Product_Design_Portfolio_EN.pdf. Existing founder-owned portfolio; source for the logo, campaign artwork, established palette

and proposed type direction.

This document is a new companion design study. Original product documentation remains the source of truth for supported functionality.