Visible pixels
Every square is intentional. Images scale up in whole steps so edges stay crisp, never blurry.
Pictures built one square at a time. Pixel art turns the limits of early screens into a style, where every pixel is placed on purpose and nothing hides behind smoothing.
Press start Copy promptPixel art makes the grid of the screen visible. Crisp squares, a limited palette and hand-placed detail give it a warm, crafted quality.
Every square is intentional. Images scale up in whole steps so edges stay crisp, never blurry.
Early hardware showed only a few colors at once. Designers still choose 8 to 16 colors to keep images coherent.
Borders are drawn with notched corners and shading lines, as if made from blocks.
Animation moves in visible steps, like a game sprite with a handful of frames.
Pixel art began as a technical necessity and became a deliberate art form once screens no longer needed it.
Space Invaders fills arcades with tiny pixel monsters. Low-resolution sprites become the look of video games.
Researchers Adele Goldberg and Robert Flegal at Xerox PARC use the term pixel art in print.
Susan Kare designs the original Macintosh icons on a grid of squares, bringing pixel craft into everyday software.
Home consoles bring pixel worlds into living rooms, with palettes of a few dozen colors.
Games such as Stardew Valley (2016) prove pixel art is a choice, not a limitation. Web and brand design follow.
Pixel motion moves in steps. CSS steps() easing makes a sprite jump from frame to frame instead of gliding.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Indie studios use pixel headers and sprite mascots to match their games.
Habit and fitness apps reward users with pixel badges and progress bars.
Brands use pixel art for anniversaries, error pages and loading screens.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
A strict palette of seven colors, like an old console. Every element uses only these. Tap a swatch to copy its hex value.
:root{
--night: #22234A;
--parchment: #F4EBD9;
--red: #E8413B;
--gold: #F7C548;
--grass: #4DB36A;
--sky: #5DB7E8;
--void: #0E0E1E;
}A bitmap display face for headings at large sizes only, and a pixel-inspired sans that stays readable for body text.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Press Start 2P",ui-monospace,monospace;
--font-b: "Pixelify Sans",ui-monospace,monospace;
--font-m: "Pixelify Sans",ui-monospace,monospace;
--fs-d: clamp(44px, 9vw, 86px);
--fs-1: 43.9px; --fs-2: 35.2px;
--fs-3: 28.1px; --fs-4: 22.5px;
--fs-body: 18px; --fs-sm: 14.4px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
line-height: 1.35;
}
/* fonts: Press Start 2P and Pixelify Sans */Snap every size to a 4 or 8 pixel unit so nothing lands between pixels.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 28px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}No radius and no border property. Outlines are four hard box-shadows that leave the corners notched.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 0px;
--shadow: 0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E,8px 8px 0 0 rgba(0,0,0,.35);
--shadow-sm: 0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E;
--gap: 28px;
--pad: 22px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Pixel Art kit · Anti-Boring */
:root{
--bg:#22234A;
--surface:#F4EBD9;
--surface2:#2E3063;
--fg:#F4EBD9;
--muted:#B9B6D6;
--accent:#E8413B;
--accent-fg:#FFFFFF;
--accent2:#F7C548;
--accent2-fg:#22234A;
--border:#0E0E1E;
--bw:0px;
--radius:0px;
--radius-sm:0px;
--shadow:0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E,8px 8px 0 0 rgba(0,0,0,.35);
--shadow-sm:0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E;
--font-d:"Press Start 2P",ui-monospace,monospace;
--font-b:"Pixelify Sans",ui-monospace,monospace;
--font-m:"Pixelify Sans",ui-monospace,monospace;
--h-weight:400;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1.35;
--gap:28px;
--pad:22px;
--focus:#F7C548;
--ok:#2E8B4A;
--warn:#A0621A;
--danger:#C1272D;
--info:#3469C9;
--field-bg:#FFFFFF;
--field-shadow:none;
--media:linear-gradient(#5DB7E8 0 55%,#4DB36A 55% 70%,#2E7D4A 70% 78%,#8A5A3B 78%);
--code-bg:#0E0E1E;
--code-fg:#F7C548;
--btn-case:none;
--btn-track:0;
--btn-weight:400;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:14.4px;
--fs-body:18px;
--fs-4:22.5px;
--fs-3:28.1px;
--fs-2:35.2px;
--fs-1:43.9px;
--fs-d:clamp(44px, 9vw, 86px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.card,.table-wrap{color:#22234A}
.card{margin:4px}
.btn{font-family:var(--font-d);font-size:.72rem;line-height:1.4;border:0;box-shadow:0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E,inset -4px -4px 0 0 rgba(0,0,0,.3),inset 4px 4px 0 0 rgba(255,255,255,.3);margin:4px}
.btn:hover{transform:none;filter:brightness(1.1)}
.btn:active{transform:translateY(4px);box-shadow:0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E,inset 4px 4px 0 0 rgba(0,0,0,.3)}
.btn-ghost{background:#2E3063;color:#F4EBD9}
.btn-sm{font-size:.6rem}.btn-lg{font-size:.85rem}
.input,.select,.textarea{border:0;box-shadow:0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E,inset 4px 4px 0 0 #D8D2C4;color:#22234A;margin:4px 0}
.input:focus,.select:focus,.textarea:focus{box-shadow:0 -4px 0 0 #F7C548,0 4px 0 0 #F7C548,-4px 0 0 0 #F7C548,4px 0 0 0 #F7C548}
.label{font-family:var(--font-d);font-size:.62rem;font-weight:400}
.check,.radio{border:0;box-shadow:0 -3px 0 0 #0E0E1E,0 3px 0 0 #0E0E1E,-3px 0 0 0 #0E0E1E,3px 0 0 0 #0E0E1E;border-radius:0;background:#fff}
.check::after{border:0;width:.5em;height:.5em;background:#fff;transform:none}
.radio::after{border-radius:0}
.switch{border:0;border-radius:0;box-shadow:0 -3px 0 0 #0E0E1E,0 3px 0 0 #0E0E1E,-3px 0 0 0 #0E0E1E,3px 0 0 0 #0E0E1E;background:#fff}
.switch::before{border-radius:0;background:#0E0E1E}
.badge{font-family:var(--font-d);font-size:.55rem;border:0;border-radius:0;box-shadow:0 -3px 0 0 #0E0E1E,0 3px 0 0 #0E0E1E,-3px 0 0 0 #0E0E1E,3px 0 0 0 #0E0E1E;margin:3px}
.alert{border:0;box-shadow:0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E,inset 8px 0 0 0 var(--c);padding-left:1.6em;color:#22234A;margin:4px 4px 1.2em}
.progress{border:0;border-radius:0;box-shadow:0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E;background:#fff;margin:4px}
.progress i{background:repeating-linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 16px)}
.tab{font-family:var(--font-d);font-size:.6rem;color:var(--muted)}
.tab[aria-selected="true"]{color:var(--accent2);border-bottom:4px solid var(--accent2)}
.pager a{border:0;box-shadow:0 -3px 0 0 #0E0E1E,0 3px 0 0 #0E0E1E,-3px 0 0 0 #0E0E1E,3px 0 0 0 #0E0E1E;border-radius:0;color:#22234A;margin:3px}
.table-wrap{border:0;box-shadow:0 -4px 0 0 #0E0E1E,0 4px 0 0 #0E0E1E,-4px 0 0 0 #0E0E1E,4px 0 0 0 #0E0E1E;margin:4px}
.table th{font-size:.6rem;background:#F7C548}
.card-media{image-rendering:pixelated}
/* light theme: add class="alt" to <html> */
html.alt{
--bg:#F4EBD9;
--surface:#FFFFFF;
--surface2:#E8DDC6;
--fg:#22234A;
--muted:#55557A;
--code-bg:#22234A;
}
html.alt .hero{color:#F4EBD9}html.alt .sec-title,html.alt .tl .yr{color:#E8413B}html.alt .demo{border-color:#B8AE98}html.alt .tab[aria-selected="true"]{color:#E8413B;border-bottom-color:#E8413B}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a cozy farming game studio in an authentic Pixel Art style.
Palette: Night #22234A, Parchment #F4EBD9, Red #E8413B, Gold #F7C548, Grass #4DB36A, Sky #5DB7E8, Void #0E0E1E.
Typography: Press Start 2P for headings only, Pixelify Sans for body text and labels.
Layout: Hero with a pixel headline on the left and a large pixel sprite on the right, ending in a tiled pixel ground strip. Content in chunky framed panels on a 8px-based grid.
Signature details: A seven-color palette, notched corners made from four hard box-shadows, inset highlight and shade on buttons, image-rendering: pixelated.
Components: Game-style buttons that press down 4px, white framed inputs with a yellow focus frame, square checkboxes, striped progress bars, framed tables.
Motion: steps() easing for every animation: walking sprites, spinning coins, blinking cursors.
Avoid: smooth gradients, blur, rounded corners, anti-aliased shadows, pixel fonts in paragraphs.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Scaling by non-whole numbers smears pixels. Use image-rendering: pixelated and whole-number scales.
Bitmap display fonts are hard to read in long text. Keep them for titles and labels.
Gradients and dozens of shades destroy the look. Stay within the palette.
A 4px pixel next to a 6px pixel looks sloppy. Keep one pixel unit everywhere.