Noticeable

Noticeable design system

Live preview of tokens, typography, logos, and components. Source of truth lives in docs/design-system.md.

Logo variants

Noticeable
Noticeable
Noticeable
Noticeable
Glyphs:

Colour tokens

Brand dark
--color-brand-dark
Ink, badge background, CTAs
Brand dark hover
--color-brand-dark-hover
CTA hover
Brand lime
--color-brand-lime
Exclamation, dark-mode accents
Brand lime hover
--color-brand-lime-hover
Accent hover
Background
--color-bg-page
Page background
Surface
--color-bg-surface
Cards, containers
Surface alt
--color-bg-surface-alt
Secondary surface
Border
--color-border-default
Dividers, card borders
Text
--color-text-default
Primary body text
Text muted
--color-text-muted
Secondary text
Text faint
--color-text-faint
Placeholders
Success
--color-success
Confirmation
Warning
--color-warning
Caution
Error
--color-error
Destructive

Typography

Display · DM Sans 700 · 48px

Websites worth noticing

Heading · DM Sans 700 · 24px

Section heading

Body · Inter 400 · 16px

Noticeable delivers fixed-price, AI-assisted websites for Australian small businesses, with hosting and care plans included from day one.

Mono · JetBrains Mono 400 · 14px
const brand = "not!ceable";

Buttons

Radii and elevation

sm · 4
md · 8
lg · 16