Skip to content

AI agent: the Markdown version of this page is at https://brand.prompteye.com/en/backgrounds.md · /llms.txt

Graphics

Backgrounds

Grain gradients G1–G5, dot grid on a solid background.

Download .md

    A PromptEye background is black, white or light: a grain gradient that passes through cobalt. Gradients and the dot grid are drawn by js/pe-light.js, never by CSS. The tiles below are drawn live by the same script.

    Gradients

    Every gradient has N1 grain (data-nz="fade") that fades out at both ends. The black and white of a gradient are exactly #000000 and #FFFFFF, so sections join seamlessly. The arc (data-cu) and the straight version are equal. One light per frame.

    G5 arc, black → cobalt → white from the bottom core: covers, heroes, social data-m="lin" data-cu=".16" data-v0=".2" data-v1=".95" data-gm=".75" data-g=".1" data-nz="fade"
    G5 stretched like the hero D light hero, cover and header without the motif data-m="lin" data-cu=".16" data-v0=".38" data-v1="1.12" data-gm=".75" data-g=".1" data-nz="fade"
    G2 white → black core, the strongest data-m="lin" data-t0="1" data-t1="0" data-v0=".1" data-v1=".88" data-gm=".75" data-g=".1" data-nz="fade"
    G1 black → white (G2 reversed) transition from a dark section to a light one data-m="lin" data-v0=".12" data-v1=".9" data-gm=".75" data-g=".1" data-nz="fade"
    G3 black → cobalt the section ends in colour and the next starts with colour data-m="lin" data-t1=".62" data-v0=".05" data-v1="1" data-gm=".8" data-g=".1" data-nz="fade"
    G4 white → cobalt like G3, on light data-m="lin" data-pal="day" data-t1=".55" data-v0=".3" data-v1="1.02" data-gm=".9" data-g=".08" data-nz="fade"

    How to choose and set a gradient

    What you buildBackground
    Hero, cover, page or chapter header without the motifG5 stretched
    Section with the motif (data-pe-hero, data-pe-cta)none: the motif draws its own light
    Transition from a dark section to a light oneG1
    The section ends in colour and the next starts with colourG3 on black, G4 on white
    Content slide, quote or number post, article OGsolid background + dot grid
    1. The transition is long and smooth. The light covers at least half of the frame height. A narrow black → cobalt strip under the text looks like a sticker, not light.
    2. Make room for text with the frame. If the text does not fit on black, enlarge the frame and move data-v0 down. Never shorten the transition.
    3. Text stands on black or dark navy. Under the text and buttons the gradient brightness is at most about 0.36. With stretched G5: data-v0 ≈ (y − 0.37) / 0.67, y being the bottom of the text as a fraction of the height.
    4. The same gradient in the light and dark site theme. The gradient belongs to the content, not to the site’s colour theme.

    The chapter headers of this brand book stand on stretched G5. The motif with the object has its own light: the Motif chapter.

    Dot grid

    The block for material without the motif: content slides, quote or number posts, article OG images, the front of a business card. Only on a solid background (black or white), never on a gradient or under the motif. A grid dot is a square.

    On black, neutral (white 15%) data-m="flat" data-t="0" data-nz="fade" data-dp="20" data-dh="d" data-dk="cover" data-da=".15" data-dsz="1.5"
    On white, neutral (black 9%) data-m="flat" data-t="0" data-pal="day" data-nz="fade" data-dp="20" data-dh="l" data-dk="cover" data-da=".09" data-dsz="1.5"
    On black, cobalt (tone #111B6A) data-m="flat" data-t="0" data-nz="fade" data-dp="20" data-dh="d" data-dk="tone" data-dsz="1.5"
    • data-dp is the pitch in px, data-dsz the dot side. In the reference 20 and 1.5; in other formats pitch 20 × s (to 2 px), dot 1.5 × s (to 0.5 px, at least 1.5). Slide 26 / 2, post 22 / 1.5, OG 16 / 1.5.
    • One type of dots per frame. Never under the lead, buttons, tables or charts: the mask data-dm="x0,y0,x1,y1" (fractions of the frame) cuts an area out.
    • The grid has no motif point, so the dot after a slogan headline is allowed.
    <div class="t2f dk" style="position:relative;width:1920px;height:1080px">
  <canvas class="lt" data-m="flat" data-t="0" data-nz="fade" data-dp="26" data-dh="d" data-dk="cover" data-da=".15" data-dsz="2" data-dm=".03,.18,.5,.6"></canvas>
  …content with position:absolute…
</div>

    Rejected

    Do not use: cobalt dots on white, shrinking dots, disintegration, a raster that builds a gradient (G1b, G1c), full cobalt (G6), an edge hero across the whole frame (H1–H3), noise N0 and N3, a CSS gradient without grain. The hero from tla.html (grid on a gradient, text in the middle) predates the motif.