# Chromatic Aberration / RGB Split

> White type on near-black, with every edge split into red and cyan ghosts — scanlines, slice glitches and misaligned colour channels.

- Nickname: RGB glitch
- Also called: Glitch UI, RGB Shift, Channel Split
- Category: Retro & Nostalgia
- Moods: Edgy, Techy, Bold
- Industries: Gaming, Media & Entertainment, Creative & Portfolio, Web3 & Crypto
- Style page: https://uilingo.dev/styles/chromatic-aberration-rgb-split/

Chromatic Aberration fakes a lens or signal that cannot focus all colours at once: content is a monochrome white-on-black signal, and every headline, icon, card edge and button carries a hard red ghost to the left and a cyan ghost to the right. CRT scanlines run over the page, horizontal slice glitches tear the hero now and then, and labels read like channel diagnostics in a mono. Shapes are square and flat, with no neon bloom — the colour lives only in the misregistered channels.

## Best for
- Game launches, esports and streaming overlays
- Music releases, festivals and nightlife
- Film/series teasers and trailers
- Hacker-themed events and creative portfolios

## Avoid for
- Long reading, forms people must fill accurately
- Users sensitive to flicker or motion
- Healthcare, finance and anything needing calm trust

## Do
- Keep the base strictly monochrome (#07070B / #F4F4F8) so the split is the only colour
- Offset ghosts ±0.045em on display type (≈5-7px), ±2px on smaller headings, icons and boxes: red (#FF2E55) left, cyan (#00E5FF) right
- Thai labels and buttons: body font (Bai Jamjuree), no tracking, no uppercase
- Run glitch animation briefly (≤ 8% of a 4–6s loop) and only under prefers-reduced-motion: no-preference

## Don't
- Don’t split body text — only headings, numbers, icons and edges
- Don’t add soft neon glow or blur; ghosts are hard-edged
- Don’t animate continuously or flash faster than 3 times a second

## Audit
Passed after 3 rounds · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Chromatic Aberration / RGB Split" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark

## The style in one line
White type on near-black, with every edge split into red and cyan ghosts — scanlines, slice glitches and misaligned colour channels.
Design keywords: RGB split, red/cyan ghosting, chromatic aberration, scanlines, slice glitch, misaligned channels, dark base, condensed uppercase (Latin), signal error.

## Visual language
A broken-signal look: the interface itself is strictly monochrome — near-black #07070B ground, white #F4F4F8 type and hairline #2C2C3A borders — and all colour comes from misregistered channels. Headlines, numbers, icons, card edges and buttons carry a hard red ghost (#FF2E55) offset to the left and a cyan ghost (#00E5FF) to the right, with zero blur. Fine CRT scanlines run over the whole page, torn horizontal signal bars cross the hero, and every few seconds the headline slices and jumps sideways. Type is condensed, heavy and uppercase, labels read like channel diagnostics in a mono; the attitude is loud, nocturnal and gamer-native, but square and disciplined rather than neon.

## Signature details (must be visible)
- Text RGB split: display/h1 ghost = ±0.045em (≈5px at the base clamp, ≈7px at the 1.3× poster size): text-shadow -0.045em 0 0 rgba(255,46,85,.9), 0.045em 0 0 rgba(0,229,255,.9); h2/h3 = ±2px; KPI numbers/icons = ±1.5px
- Box RGB split instead of drop shadows: box-shadow -3px 0 0 rgba(255,46,85,.8), 3px 0 0 rgba(0,229,255,.8) on primary buttons, active items, the logo and highlight cards. Icons and chart lines split the same way via filter: drop-shadow(-1.5px 0 0 #FF2E55) drop-shadow(1.5px 0 0 #00E5FF) — lines stay white, ghosts do the colour
- Full-page scanline overlay: body::after repeating-linear-gradient(180deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px), opacity .55, pointer-events none
- Slice glitch on the hero headline (the demo clips the real text span .ui-display__text, no pseudo copies): animation 5s steps(1,end) infinite; 0-91% still with the normal split; 92% clip-path inset(18% 0 52% 0) + translateX(-10px) with ghosts widened to ±0.12em; 94% inset(58% 0 12% 0) + translateX(12px); 96% clip-path none, settle translateX(-3px) with ±0.08em ghosts; 100% still. About 5% of the loop is active, under the ≤8% rule. Only under prefers-reduced-motion: no-preference
- Torn signal bars: two static 8px bars on ::before/::after of the whole hero section (position relative, overflow hidden; the section holds the copy AND the product shot below it) at top 18% and 64%, full width — bar 1 crosses the headline, bar 2 crosses the top edge of the product shot, never the lead or buttons; mix-blend-mode screen, not animated. Bar 1: linear-gradient(90deg, transparent 0 8%, rgba(255,46,85,.55) 8% 31%, transparent 31% 56%, rgba(0,229,255,.5) 56% 83%, transparent 83%). Bar 2: transparent 0 14%, rgba(0,229,255,.45) 14% 38%, transparent 38% 61%, rgba(255,46,85,.5) 61% 79%, transparent 79%
- Square everything: 0px radius on buttons, inputs, chips, avatars, progress bars and status dots (every radius token is 0)
- R/G/B channel tag: a 24×8px three-band swatch (#FF2E55 / #3DFF8A / #00E5FF) before eyebrows and as a 28×3px tick on card corners
- Thai strategy (JetBrains Mono has no Thai glyphs; the mono stack is "JetBrains Mono", ui-monospace, Menlo, "Bai Jamjuree", monospace so Thai mono falls back to Bai Jamjuree): Thai mono/label/button text uses Bai Jamjuree with letter-spacing: 0 and no uppercase. Thai poster headline = calc(clamp(3.5rem, 9vw, 7.25rem) * 0.95), line-height 1.25-1.3; Latin = the same clamp × 1.3, line-height .88. Thai keeps the poster feel through size and the RGB ghost, not tracking. The page is lang="th": wrap Latin-only labels in <span lang="en"> if a :lang(th) reset would otherwise remove their uppercase or tracking

## Design tokens — use these exact values
Colours (dark mode):
  - background #07070B
  - surface #0F0F16
  - surface-2 #16161F
  - text #F4F4F8
  - text-muted #A4A4B8
  - primary #F4F4F8 (text on it #07070B)
  - secondary #00E5FF (text on it #07070B)
  - accent #FF2E55
  - border #2C2C3A
  - success #3DFF8A · warning #FFD23F · danger #FF2E55
  - chart series #F4F4F8, #00E5FF, #FF2E55, #3DFF8A, #7C6BFF
Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px
Border width: 1px
Shadows: sm `-2px 0 0 rgba(255,46,85,0.75), 2px 0 0 rgba(0,229,255,0.75)`, md `-3px 0 0 rgba(255,46,85,0.8), 3px 0 0 rgba(0,229,255,0.8)`, lg `-5px 0 0 rgba(255,46,85,0.7), 5px 0 0 rgba(0,229,255,0.7), 0 24px 60px rgba(0,0,0,0.6)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 0.95 density
Motion: 90ms steps(3, end)

## Typography (Latin + Thai)
- Headings: Barlow Condensed 700/800 with Thai fallback Kanit 600/800
- Body: Barlow 400/500/600 with Thai fallback Bai Jamjuree 400/500/600
- Mono: JetBrains Mono
- Google Fonts URL: https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800&family=Barlow:wght@400;500;600&family=JetBrains+Mono:wght@400;700&family=Kanit:wght@600;800&family=Bai+Jamjuree:wght@400;500;600&display=swap
- CSS stacks: heading `"Barlow Condensed", "Kanit", system-ui, sans-serif`; body `"Barlow", "Bai Jamjuree", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Bai Jamjuree — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(3.5rem, 9vw, 7.25rem), heading weight 800, heading tracking 0.005em (Latin only), uppercase small labels (Latin only).
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: Kanit’s heavy loopless strokes hold the RGB ghosts as well as condensed Barlow; squarish Bai Jamjuree echoes Barlow’s engineered, DIN-like body.

## Components
- Primary button: white fill, black uppercase JetBrains Mono 700 label, 0.08em tracking (Thai: Bai Jamjuree, no tracking, no uppercase), red/cyan 3px box ghosts; hover widens the ghosts to 6px, active skews -6deg and jumps 2px left
- Secondary button: transparent with a 1px white border; hover adds 2px ghosts to the box and the label
- Cards: #0F0F16, 1px #2C2C3A border, no shadow, 0 radius, an RGB tick on the top-left corner; hover turns the border white and adds 2px ghosts
- Inputs: #16161F fill, 1px border, 0 radius; focus turns the border white and adds 2px red/cyan side ghosts; labels in uppercase mono
- Badges: transparent, 1px currentColor border, uppercase mono 0.68rem; solid badge is cyan with a red left ghost
- Highlight/pricing card and CTA: inverted white surface #F4F4F8 with text #07070B (the bg token) and muted #4D4D5C; the secondary button on white becomes a black fill with white text. Headline and price ghosts are removed on white (text-shadow: none); the box ghost stays. The CTA slab also carries fine scanlines
- Charts: white primary line with red/cyan drop-shadow ghosts, dashed cyan comparison line, white bars with ±2px red/cyan side ghosts (never solid colour fills), square legend dots — series colour lives only on the legend squares
- Dashboard rail: black, icons with split filter; active item is a white tile with ghosts
- Mobile tab bar: black, 1px top border with a red under-ghost, mono uppercase labels, active label and icon split
- Hero product shot (.ui-mock): a main bordered card holding a white primary line chart with red/cyan ghosts and a dashed cyan comparison line, plus two KPI cards with split numerals — never an empty grid

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: poster-sized headline that fills the viewport width, visual below. Navigation: bar style. Sections in order: hero → logos → features → stats → showcase → testimonials → pricing → cta. Feature section as grid.
Poster hero: a giant condensed uppercase headline at the display clamp size scaled for the poster: calc(clamp(3.5rem, 9vw, 7.25rem) * 1.3), line-height .88 (Thai: the same clamp × 0.95, line-height 1.25-1.3) with RGB split and an occasional slice glitch, a short lead, two square buttons, and the product shot below as flat bordered cards. Logos row: partner names are Latin brand names in Barlow Condensed uppercase, 0.08em tracking, 70% opacity; a Thai intro label uses Bai Jamjuree without tracking. A 3-up feature grid of bordered cells (6 features = two full rows), a big-number stats strip, a showcase with tabs (CSS-only radio tabs are fine; no JS required), quote cards, pricing with an inverted middle plan and an inverted CTA slab. Dashboards use a narrow icon rail, mono uppercase labels, big split KPI numerals and white-on-black charts whose colour lives in the ghosts.

## Content
Use realistic product copy (fictional brand) suited to: Game launches, esports and streaming overlays. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## Do
- Keep the base strictly monochrome (#07070B / #F4F4F8) so the split is the only colour
- Offset ghosts ±0.045em on display type (≈5-7px), ±2px on smaller headings, icons and boxes: red (#FF2E55) left, cyan (#00E5FF) right
- Thai labels and buttons: body font (Bai Jamjuree), no tracking, no uppercase
- Run glitch animation briefly (≤ 8% of a 4–6s loop) and only under prefers-reduced-motion: no-preference

## Don't
- Don’t split body text — only headings, numbers, icons and edges
- Don’t add soft neon glow or blur; ghosts are hard-edged
- Don’t animate continuously or flash faster than 3 times a second
- Soft neon glow, bloom or blur around text — ghosts are hard, unblurred offsets (that is cyberpunk otherwise)
- Splitting body paragraphs or form values — it destroys legibility
- Pastel pink/purple gradients or sunsets — that reads as vaporwave
- Rounded corners, pills or chamfered HUD frames
- Continuous flicker or glitching more than ~3 times per second; always respect prefers-reduced-motion
- Adding brand colours to the base UI — the only colour is in the misregistered channels and status hues; chart series and the R/G/B tag are the only exceptions

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Chromatic Aberration / RGB Split" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```