Neo-Brutalist Angular Surface
Surface
A directive for turning any host element into a brutalist panel. Use nbSurface for layout shells, callouts, recipe containers, and custom compositions that need the same borders, tones, radius, and offset shadow system as the packaged components.
Preview
Launch deck
Ship the loud version
Surface gives custom layouts the same brutalist frame as the core components.
Usage
Add nbSurface to the element that owns the outer panel. Use nbSection for internal regions, nbStack for vertical rhythm, nbCluster for inline groups, and nbSplit for two-region layouts.
import { NbSurface } from '@ng-brutalism/ui';<article
nbSurface
tone="yellow"
radius="xl"
border="thick"
shadow="heavy"
clip
class="max-w-md"
>
<div class="border-b-2 border-(--nb-border) bg-nb-primary px-5 py-3">
<p class="font-mono text-xs font-black uppercase">Launch deck</p>
</div>
<div class="p-5">
<h3>Ship the loud version</h3>
<p>Surface gives custom layouts the same brutalist frame.</p>
</div>
</article>Tones
default
Uses --nb-surface tokens.
background
Uses the page background tokens.
surface
Explicit component surface tone.
cream
Warm editorial panel.
white
Crisp white panel.
black
High contrast black panel.
yellow
Main brutalist yellow.
pink
Punchy pink accent.
mint
Soft pastel mint.
lavender
Pale lavender surface.
blue
Clear sky blue surface.
primary
Theme primary color.
secondary
Theme secondary color.
accent
Theme accent color.
success
Semantic success tone.
warning
Semantic warning tone.
danger
Semantic danger tone.
Shape
Combine radius, border, and shadow presets for different surface weights.
Compact
sm / thin / sm
Poster
lg / default / hard
Feature
xl / thick / heavy
Clip
Use the boolean clip input when a surface has colored bands, media, or decorative children that should respect the surface radius.
Corners hold
Decorative children stay inside the surface radius.
Customization
Override these CSS variables on :root, a wrapper, or the component element. More local values win, so per-instance styling can sit directly on the element.
| Token | Default | Used for |
|---|---|---|
| --nb-surface-bg | var(--nb-surface-bg-base) | Surface background color. Set inline to override; falls back to the tone-driven base. |
| --nb-surface-bg-base | var(--nb-surface) | Tone-driven background base. Reassigned by the tone input. |
| --nb-surface-fg | var(--nb-surface-fg-base) | Surface foreground color. Set inline to override; falls back to the tone-driven base. |
| --nb-surface-fg-base | var(--nb-surface-foreground) | Tone-driven foreground base. Reassigned by the tone input. |
| --nb-surface-border | var(--nb-border) | Surface border color. Reassigned by the border input. |
| --nb-surface-border-width | var(--nb-border-width) | Surface border width. Reassigned by the border input. |
| --nb-surface-radius | var(--nb-radius) | Surface corner radius. Reassigned by the radius input. |
| --nb-surface-shadow | var(--nb-shadow-offset-x) var(--nb-shadow-offset-y) 0 0 var(--nb-shadow) | Surface box shadow. Reassigned by the shadow input. |
| --nb-border | #000000 | Border color and focus ring color |
| --nb-shadow | #000000 | Offset shadow color |
| --nb-radius | 0rem | Corner radius through the rounded-nb utility |
| --nb-shadow-offset-x | 4px | Horizontal shadow and press offset |
| --nb-shadow-offset-y | 4px | Vertical shadow and press offset |
| --nb-foreground | #000000 | Default foreground text color |
| --nb-background | #ffffff | Default surface background color |
API
| Input | Type | Default | Description |
|---|---|---|---|
| tone | 'default' | 'background' | 'surface' | 'cream' | 'white' | 'black' | 'yellow' | 'pink' | 'mint' | 'lavender' | 'blue' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'default' | Background and foreground color pair. |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'md' | Corner radius preset. |
| border | 'none' | 'thin' | 'default' | 'strong' | 'thick' | 'default' | Border width preset. |
| shadow | 'none' | 'sm' | 'default' | 'hard' | 'heavy' | 'default' | Offset shadow preset. |
| padding | 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none' | Uniform inner padding. Prefer nbSection for region-specific padding inside a surface. |
| size | 'auto' | 'sm' | 'md' | 'lg' | 'xl' | 'auto' | Fixed square size. Use for avatar containers or icon-sized surfaces. 'auto' lets content define the dimensions. |
| layout | 'block' | 'center' | 'row' | 'stack' | 'block' | Inner display mode. center centers content both axes, row aligns children in a row, stack stacks them vertically. |
| edge | 'none' | 'top' | 'bottom' | 'none' | Adds a 2 px accent border on the top or bottom edge using the tone's border color. Useful for callout or notification panels. |
| typography | 'inherit' | 'body' | 'display' | 'accent' | 'mono' | 'inherit' | Sets a font-family role for the surface and all descendant primitives via the cascade. Composes nbTypography. |
| clip | boolean | false | Adds overflow hidden to the surface so child media and decorations respect the surface radius. |