MORE RE-ORGANIZING

This commit is contained in:
2026-09-08 14:00:27 -07:00
parent 0c1ea70738
commit ad41f0e140
248 changed files with 1091 additions and 0 deletions

845
docs/art-direction.md Normal file
View File

@@ -0,0 +1,845 @@
# Sanctification TCG - Art Direction
## Goal
I want the cards and the product as a whole to have a very distinct visual identity.
The current direction I like most is:
> **Stained-glass-inspired as the main style, with tapestry and illuminated manuscript influence as supporting texture and ornament.**
The overall goal should be:
> **Sacred, beautiful, and stylized. Not a dense museum reconstruction.**
I do not want the cards to feel like a generic fantasy TCG, casino game, anime card game, or hyper-realistic historical reenactment.
The art should feel reverent and Christian first, while still being visually strong enough that collecting the cards feels exciting.
---
## Core Visual Principles
Across the whole product, the artwork should generally follow these ideas:
- Sacred and reverent tone.
- Stained-glass-inspired composition.
- Jewel-tone palette where appropriate.
- Gold can be used as an accent, but should become more prominent as rarity increases.
- Tapestry, linen, parchment, and illuminated-manuscript textures can support the overall look.
- Clear subject silhouettes.
- Cards should remain readable at thumbnail size.
- Avoid hyper-photorealism.
- Avoid anime or comic-book energy.
- Avoid a dark fantasy aesthetic.
- Avoid visual language that feels like gambling, loot boxes, or a casino.
- Avoid overly dense historical reconstruction.
- Prefer symbolic clarity over excessive detail.
- Every card should feel like it belongs to the same product, even when different sets or traditions have their own visual flavor.
A good way to think about the stained-glass direction is that the cards should feel inspired by sacred windows and devotional art without needing to literally reproduce any specific historical style.
---
## Product-Wide Visual Language
The card art should influence the rest of the app.
Possible shared UI motifs:
- Cathedral-window or arched shapes.
- Restrained ornamental dividers.
- Deep blue, burgundy, cream, green, and gold accents.
- Parchment, stone, linen, or subtle glass-inspired surfaces.
- Illuminated-manuscript-style decorative elements used sparingly.
- Soft lighting rather than neon effects.
- Ornament should support hierarchy rather than fill every empty space.
The application UI should still feel modern and usable.
The goal is not to make the entire interface look medieval.
The historical / sacred art direction should mostly come through:
- Cards.
- Pack openings.
- Binder / collection presentation.
- Headers and section treatments.
- Decorative accents.
- Important moments and milestones.
Normal application controls should remain clear and familiar.
---
# Card Art
## General Composition
Cards should generally prioritize:
1. Subject.
2. Identity.
3. Short supporting content.
4. Ornamentation.
The art should be readable even when the card is relatively small.
The card should not require the user to zoom in just to understand who or what it represents.
For character cards, prefer:
- One clear subject.
- Strong silhouette.
- Limited background complexity.
- Symbolic items associated with the subject.
- Calm, iconic poses over excessive action scenes unless the card itself represents an event.
For event cards, larger compositions and multiple figures can be used when necessary.
For locations, items, doctrines, councils, and other categories, the framing can change while still staying within the same overall stained-glass visual language.
---
## Text on the Card
The physical card should stay concise.
The app itself can provide the deeper educational content when the card is inspected.
A normal card can contain:
- Name.
- Short subtitle or descriptor.
- Short verse, quote, or historical line.
- Reference.
Example:
> **David**
> Shepherd King
>
> “The LORD is my shepherd...”
> Psalm 23:1
The front content priority should generally be:
1. Scripture directly related to the card.
2. Historically significant Christian quotation.
3. Concise historical or theological statement.
We should not force a full verse onto the card when it harms the visual design.
A short excerpt with an ellipsis is fine when it is clearly intentional.
The full content can appear in the inspection panel.
---
## Card Back
The card back should generally be standardized so it does not reveal the identity of a card during pack opening.
The back should not leak:
- Card identity.
- Exact rarity.
- Printing.
- Finish.
- Material.
- Other traits that would spoil the reveal.
It can use the Sanctification branding and common visual language.
Different sets could potentially have different backs in the future, but only if this does not meaningfully spoil the card reveal.
---
# Card Inspection
The card itself should remain relatively clean.
More detailed information belongs in the inspection experience.
When inspecting a card, the user should be able to:
- Rotate the card freely.
- Flip between front and back.
- Zoom in to inspect artwork and physical characteristics.
- Observe material properties responding dynamically to lighting.
- Observe wear and imperfections where applicable.
- Return quickly to the originating collection / binder context.
The inspection UI should also expose the educational and collectible information that does not need to live directly on the physical card.
Possible sections:
## About
- Full verse or quote.
- Description.
- Historical context.
- Theological context.
- Related Scripture.
- Related events / people / cards.
- Learn-more sources.
## Card
- Rarity.
- Set.
- Printing.
- Finish.
- Material.
- Wear classification.
- Exact wear percentage.
## Provenance
- Original owner.
- Date opened.
- Population.
- Serial / instance information.
---
## Card Dimensions and Resolution
### Aspect Ratio
All standard cards should use a **5:7 portrait aspect ratio**.
This corresponds cleanly with the current physical prototype dimensions:
- Width: 63 mm
- Height: 88.2 mm
Artwork, card frames, masks, material maps, and generated assets should
all use the same 5:7 coordinate space unless a specific experiment
requires otherwise.
### Master Artwork Resolution
The standard master artwork resolution should be:
**3000 × 4200 px**
This is the source-quality asset and should be retained even if smaller
versions are generated for the application.
All associated masks should use the same dimensions and alignment where
practical, including:
- Foil masks
- Holographic masks
- Metallic masks
- Roughness maps
- Wear masks
- Normal/bump maps
- Printing masks
### Runtime Resolutions
Runtime assets may be generated from the master depending on context:
- High-resolution inspection: 2000 × 2800
- Standard card rendering: 1000 × 1400
- Binder / collection thumbnails: 500 × 700 or smaller
Exact runtime sizes should eventually be determined through performance
testing, particularly on mobile devices.
The master artwork should never be replaced by a lower-resolution
runtime export.
---
# Rarity Art Direction
Rarity should have a major impact on the visual grammar of the card.
A common card should not look almost as impressive as a legendary card.
Rarity should primarily affect:
- Frame complexity.
- Number of ornamental elements.
- Visual storytelling.
- Palette richness.
- Composition complexity.
- Symbolic detail.
- Amount of gold.
- Background complexity.
Rarity should **not** simply mean adding more glow or visual effects.
A useful principle:
> **Higher rarity should add storytelling and ornamentation, not merely more effects.**
Another way to think about it:
> **Common cards should feel like a simple parish stained-glass window. Legendary cards should feel closer to the centerpiece window behind the altar.**
---
## Common
Common cards should be intentionally restrained.
### Border
- Thin and simple.
- Geometric.
- Very little decorative ornament.
- No elaborate corner medallions.
- No complex illuminated-manuscript scrollwork.
- No gold.
### Color
- Limited palette.
- Roughly 2-3 dominant colors plus cream / parchment.
- More muted or restrained jewel tones.
- Gold used mostly for separation or small accents.
### Artwork
- It doesn't need to be just the subject but rather them in the background doing something
- Simple background.
- Larger stained-glass panes.
- Fewer small glass segments.
- Minimal symbolic elements.
- Calm composition.
- No unnecessary visual drama.
- Minimal micro-detail.
### Overall Feel
- Humble.
- Clean.
- Grounded.
- Accessible.
- Still beautiful, but obviously not premium.
Example:
**Timothy**
- Timothy holding a scroll.
- Simple ancient street or landscape.
- Simple arch.
- Blue / green / cream palette.
- Thin brass or gold divider.
- No ornate botanical frame.
- No special corner symbols.
- No heavily gilded title plaque.
![alt text](image-2.png)
---
## Uncommon
Uncommon cards can begin introducing more refinement.
### Border
- Slightly thicker frame.
- Small decorative accents.
- Limited corner ornament.
- Some leaf or manuscript-inspired motifs.
### Color
- Slightly broader palette.
- More saturated jewel tones.
- Small use of gold.
### Artwork
- More detailed backgrounds.
- Additional symbolic element.
- Slightly more complex stained-glass segmentation.
- More deliberate framing around the subject.
### Overall Feel
- Refined.
- Noticeably more interesting than Common.
- Still not highly ornate.
---
## Rare
Rare cards should feel distinctive.
### Border
- Decorative frame.
- More custom ornament.
- Symbolic motifs related to the subject.
### Color
- Richer jewel-tone palette.
- More contrast.
- More use of gold.
### Artwork
- Stronger visual storytelling.
- More complex stained-glass structures.
- Multiple meaningful background elements.
- More deliberate lighting composition.
### Overall Feel
- Distinctive.
- Collectible.
- Clearly above the normal card experience.
---
## Extraordinary
Extraordinary cards should feel prestigious.
### Border
- Elaborate framing.
- Strong illuminated-manuscript influence.
- More bespoke ornamentation.
- Larger use of gold.
### Color
- Deep and saturated jewel tones.
- Broad palette while remaining cohesive.
- Strong visual contrast.
### Artwork
- Complex composition.
- Multiple symbolic elements.
- Richer environments.
- More detailed stained-glass segmentation.
- Greater sense of scale or drama.
### Overall Feel
- Prestigious.
- Elaborate.
- Immediately special.
---
## Legendary
Legendary cards should be visually unmistakable.
They can break some of the normal card-layout rules while still clearly belonging to the same product.
### Border
- Highly bespoke.
- Custom symbolic elements related specifically to the card.
- Extensive but tasteful ornamentation.
- Rich gilding.
### Color
- Full jewel-tone palette where appropriate.
- Strong gold accents.
- Deep color contrast.
### Artwork
- Strong visual storytelling.
- Multiple symbols connected directly to the subject.
- Complex stained-glass composition.
- More dramatic light.
- More detailed environments.
- Unique framing or iconography.
### Overall Feel
- Immediately special.
- Reverent.
- Iconic.
- Worth stopping to inspect.
Example:
**David**
Possible visual elements:
- Crown.
- Harp.
- Shepherd staff.
- Sheep.
- Jerusalem.
- Star / celestial imagery.
- Bespoke gold framing.
- Rich red and blue garments.
- Complex stained-glass composition.
These elements help tell David's story rather than simply adding decoration for decoration's sake.
![alt text](image-3.png)
#### Alt Style - Tapestry
![alt text](image-4.png)
---
# Rarity vs. Physical Treatment
Rarity, material, and finish are separate systems.
This is important.
A Common holographic card should still visually read as a Common card.
A Legendary plain-paper card should still visually read as Legendary.
## Rarity controls
- Graphic design.
- Frame.
- Composition.
- Symbolic storytelling.
- Base art complexity.
- Ornamentation.
## Material controls
- The physical substrate of the card.
- Surface microtexture and roughness.
- Edge and core appearance.
- Base reflectivity and perceived weight.
- Paper, linen, plastic, metal, or wood response.
## Finish controls
- A treatment applied over the material and printed artwork.
- Selective foil reflection.
- Holographic spectral response.
- Coating strength and coverage.
For example:
- Common Paper + Printed Ink Timothy.
- Common Paper + Foil Timothy.
- Common Linen + Holographic Timothy.
- Common Metal + Printed Ink Timothy.
All of them should still use the same underlying Common Timothy card design.
Material and finish should not be treated as an unrestricted Cartesian product. A combination should exist because it has an intentional physical and visual interpretation, not merely because both options are available independently.
---
# Material and Finish Direction
If a collectible property exists, the player should ideally be able to perceive it visually or interactively.
Examples:
- Finish -> visible.
- Material -> visible.
- Wear -> visible.
- Imperfections -> visible.
- Printing -> visible.
- Weight -> indirectly observable.
- Provenance -> inspectable metadata.
- Population -> inspectable metadata.
The material is the card's substrate. The finish is a treatment applied over that substrate. They should remain independently identifiable when the card moves under light.
---
## Paper
- Matte with fine, irregular fibers.
- Broad, weak reflection rather than a sharp sheen.
- Grain should become visible during close inspection without making the artwork noisy.
## Plastic
- Smoother surface.
- Clear-coated dielectric reflection.
- A bounded moving highlight should remain visible even with Printed Ink.
- Cleaner edges.
## Linen
- Raised interlaced warp and weft rather than generic noise.
- Soft diffuse reflection.
- Small shaded recesses should help the weave read under moving light.
- Particularly compatible with tapestry-inspired artwork.
## Metal
- Reflective underprint and a visibly metallic edge.
- Darker artwork values create deeper engraved grooves; the maximum depth should remain low enough that the card still feels printed and collectible rather than sculpted.
- Groove depth should read through surface normals, restrained cavity shading, and fine bevel highlights when the card moves.
- Printed artwork colors must remain recognizable rather than becoming uniformly silver or gold.
- Visually heavier.
- Should still preserve artwork readability.
## Wood
- Warm substrate tint with a darker brown core.
- Longitudinal, slightly warped grain with shallow physical relief.
- Grain should support the card artwork rather than overpowering it.
- Reflection should remain restrained and less polished than plastic or metal.
## Foil
- Selective angle-dependent metallic reflection controlled by an art-directed mask.
- Light should sweep visibly across treated regions without washing out the entire illustration.
- Foil should remain distinguishable from a Metal substrate: foil is a localized surface treatment, while metal changes the whole card body and edge.
- Metal + Foil should preserve the printed colors and read as restrained, slightly raised champagne-metal polishing over etched steel. It should not turn the whole illustration into opaque gold.
## Holographic
- View-dependent spectral response.
- Holographic response should use masks so intentional portions of the artwork react.
- Should remain tasteful and avoid a neon / fantasy appearance.
- Spectral color can be clearly visible, but extreme white sheen at grazing angles should remain controlled.
## Finish Mask Direction
- Finish masks should be authored and reviewed as part of the card art rather than treated as arbitrary technical output.
- Preserve titles, verses, and other critical text unless a specific treatment is intentionally designed for them.
- Do not create obvious circular or elliptical exclusions around faces, hands, animals, or other subjects. Those shapes read as artificial holes when the card moves.
- Avoid isolated mask islands that produce unrelated holographic spots across skin or focal features.
- Prefer coverage that follows stained-glass panes, ornament, borders, garments, environmental color, and other compositional regions.
- Evaluate every mask while rotating the card under multiple lighting angles. A mask that looks acceptable in a still image may look distracting in motion.
---
# Wear
Wear should not make cards ugly to the point that the artwork becomes undesirable.
Even the lowest wear levels should remain visually readable and collectible.
A 0.00 wear card can be noticeably scratched, worn, or damaged while still looking like a cared-for physical collectible rather than a destroyed object.
Possible classifications are still subject to change, but could look something like:
- Mint.
- Near Mint.
- Minimal Wear.
- Moderately Played.
- Worn.
Wear can affect:
- Edge whitening.
- Surface scratches.
- Small scuffs.
- Minor print abrasion.
- Subtle corner wear.
It should not normally obscure:
- Subject identity.
- Important text.
- Major portions of the artwork.
Wear patterns should ideally be seeded per card instance so two cards with the same wear value do not necessarily have identical damage.
---
# Printing Variants
Printing should affect the graphic presentation of the same card identity.
## Normal
- Standard frame.
- Name.
- Subtitle.
- Short verse / quote / fact.
- Normal artwork area.
## Borderless
- Artwork extends farther toward the card edges.
- Reduced frame.
- Minimal text treatment.
## Textless
- Artwork-focused.
- Little or no text.
- Educational information remains available in the inspection panel.
## Boundless
- Full-bleed or near-full-bleed artwork.
- Minimal or absent conventional frame.
- Intended to feel like a special printing rather than a higher rarity.
Printing type should not change the underlying rarity of the card.
---
# Thumbnail Readability
All normal card designs should remain recognizable in a binder or collection grid.
At thumbnail size, the user should ideally still be able to identify:
- The subject or general composition.
- The card rarity through its frame language.
- Major color identity.
- Whether the card has an unusual printing or finish when practical.
Fine text does not need to remain readable at thumbnail size.
The card name should become readable as the card grows larger or when selected.
---
# Pack Opening Art Direction
Pack opening should create anticipation without feeling like a casino.
Rarity can affect reveal pacing and presentation.
Possible progression:
## Common
- Simple lift.
- Quick flip.
- Minimal lighting change.
## Uncommon
- Slight pause.
- Mild environmental emphasis.
## Rare
- More deliberate reveal.
- Stronger lighting transition.
- Small audio / visual flourish.
## Extraordinary
- More dramatic reveal timing.
- Larger environmental shift.
- More pronounced presentation.
## Legendary
- Unique or near-unique reveal treatment.
- Strong visual emphasis.
- Longer anticipation, but still skippable.
The goal is:
> **Rarity can affect anticipation without going full casino.**
All reveal animations should remain skippable.
---
# Things to Avoid
Across all rarities:
- Hyper-photorealistic character portraits.
- Anime styling.
- Comic-book styling.
- Neon fantasy effects.
- Generic fantasy RPG framing.
- Excessive glowing particles.
- Overly busy ornament.
- Illegible typography.
- Decorative detail that makes the subject harder to identify.
- Making every card look premium.
- Using rarity only as a glow / particle intensity slider.
- Turning historical Christian art into parody.
- Making Common cards deliberately ugly.
The distinction should be:
> **Common is simple. Legendary is elaborate.**
Not:
> **Common is bad. Legendary is good.**
---
# MVP Art Goals
For the MVP, I do not need every card to be a full-scale art project.
The interesting part is proving that the entire visual system works.
The MVP should establish:
- A consistent stained-glass-inspired card style.
- A clearly readable rarity system.
- A reusable card layout system.
- At least one working example of each rarity.
- Multiple materials.
- Multiple finishes.
- Multiple printing types.
- Wear.
- 3D card inspection.
- Light-reactive materials.
- Pack-opening presentation.
- Thumbnail / binder representations.
I think it makes more sense to create a smaller number of highly intentional art examples and then build the other cards from the same visual system rather than independently designing all 50 cards.
---
# Open Art Questions
Things that still need to be explored:
- Exact card dimensions / aspect ratio.
- Final typography.
- Exact color palette.
- Whether each rarity has a fixed base frame or a family of frames.
- Whether card categories have their own secondary visual motifs.
- Whether tradition-specific cards alter UI or border accents.
- Exact visual treatment for controversies.
- Whether halos should be used based on historical iconography, card category, tradition, or purely artistic composition.
- How much motion should exist inside holographic cards.
- Exact distinction between Extraordinary and Legendary.
- Whether higher-rarity cards are always visually more complex or occasionally gain prestige through extreme simplicity.
- How much the card artwork itself changes across printing variants.
- Final card back design.
---
# Current Direction Summary
The current visual north star is:
> **Stained glass first. Tapestry and illuminated manuscript second. Sacred and stylized throughout.**
Rarity should be obvious through design language before the user reads a label.
Common cards should be restrained and humble.
Legendary cards should feel bespoke and narratively rich.
Finishes and materials should enhance the physical card without replacing rarity as the primary graphic hierarchy.
The cards should be beautiful enough to want to collect, but the overall product should always remain reverent rather than flashy.