Add 2a. 2D Visual Style and Palette

Alexander Sellite 2026-07-26 15:17:19 +00:00
parent df7401625d
commit 3fb4f812df

@ -0,0 +1,213 @@
# 2D Visual Style and Palette
NETFISHING uses warm, palette-limited, pixel-style 2D art that complements its chunky low-poly 3D world.
The art does not need to follow a strict historical console limitation. It should still look deliberately constructed at the pixel level rather than like smooth high-resolution art that was reduced afterward.
## Core visual qualities
Assets should generally use:
- Limited color counts
- Clear blocky silhouettes
- Intentional pixel clusters
- Minimal antialiasing
- Simple shadow shapes
- Small selective highlights
- Warm neutral interface colors
- Muted environmental colors
- Brighter accents for interactive or collectible elements
Avoid:
- Smooth vector-like antialiasing in pixel assets
- Soft airbrush shadows
- Large blurred highlights
- Heavy texture noise
- Photorealistic detail
- Excessive gradients
- One-pixel noise scattered without purpose
- Colors that blend into surrounding panels or terrain
## Shared palette
The following colors are a starting reference rather than an absolute restriction.
### Light neutrals
| Name | Hex |
|---|---|
| Cream | `#F3E3C5` |
| Pale panel | `#F8E8CB` |
| Warm highlight | `#FFE8C2` |
| Soft sand | `#D7A35F` |
### Browns and earth
| Name | Hex |
|---|---|
| Warm tan | `#D5AA72` |
| Caramel | `#B77A2E` |
| Dock wood | `#8A4F23` |
| Dark timber | `#4E2816` |
| Deep soil | `#6B2D1A` |
### Greens
| Name | Hex |
|---|---|
| Olive grass | `#A3A62A` |
| Moss green | `#6F7D19` |
| Dark foliage | `#40552C` |
| Muted UI green | `#5D7A61` |
| Deep UI green | `#354C39` |
### Water and cool accents
| Name | Hex |
|---|---|
| Seafoam | `#8FD3C4` |
| Turquoise | `#2F9E9A` |
| Deep teal | `#176F73` |
| Navy outline | `#0D1B2A` |
### Bright accents
| Name | Hex |
|---|---|
| Fox orange | `#D94908` |
| Playful coral | `#F04F73` |
| Strong red | `#C9003D` |
| Golden yellow | `#F0A000` |
| Purple accent | `#55305F` |
## Color hierarchy
Use calmer colors for:
- Large UI panels
- Terrain
- Background decoration
- Common item frames
- Structural elements
Use brighter colors for:
- Characters
- Rare fish
- Important items
- Selected controls
- Notifications
- Bobbers
- Interaction icons
- Shop highlights
- Rarity indicators
Do not make every object equally saturated.
## Shading
Preferred shading is restrained.
Most assets should use:
- Base color
- One shadow color
- Optional highlight color
- Optional outline or edge color
Small icons may use only two or three colors.
Larger fish illustrations may use several colors where species markings require them, but should still avoid smooth painterly rendering.
## Highlights
Highlights should be:
- Small
- Purposeful
- Positioned to describe form
- Drawn as clean pixel clusters
- Limited to important surfaces
The creature references use small cream or white highlight marks rather than broad glossy gradients.
## Outline policy
NETFISHING does not require a heavy full outline around every asset.
Use one of these approaches depending on the asset:
- Selective dark outline on visually important edges
- Dark local color at the shadow-facing edge
- No outline where strong color contrast is sufficient
- Full outline for tiny icons that otherwise lose readability
Avoid inconsistent one-pixel outlines that appear and disappear accidentally.
Dark navy, brown, dark teal, or dark purple may be more appropriate than pure black.
## Pixel clusters
Good pixel art uses connected, intentional shapes.
Prefer:
- Larger coherent clusters
- Clean diagonal rhythms
- Deliberate stair-step edges
- Controlled texture patterns
Avoid:
- Random single-pixel noise
- Dithering everywhere
- Unnecessary checkerboarding
- Jagged shapes caused only by poor resizing
## Background awareness
Contributors should know the likely background.
Common backgrounds include:
- Warm cream UI tiles
- Tan panels
- Olive grass
- Brown soil
- Teal water
- Dark green tabs
An icon that looks good on white may disappear on cream or tan.
Include an in-context screenshot with every submission.
## UI color language
Suggested UI roles:
- Main panel: warm cream
- Inner panel: sandy tan
- Primary tab: muted or deep green
- Text: dark brown
- Secondary text: caramel or muted tan
- Selection: green outline or stronger contrast
- Warning: coral or orange
- Disabled: low-contrast cream, gray, or muted tan
## Environment texture language
Environment textures should use:
- Large angular patches
- Low-frequency patterning
- Limited palettes
- Subtle value variation
- Clearly repeating but not distracting motifs
- No realistic photographic surface detail
The grass reference uses overlapping angular shapes in nearby olive values.
The soil and cliff reference uses dark brown and reddish shapes with sparse marks and denser texture near the base.
The texture should support the 3D form rather than overpower it.