Themes

A theme is a set of tokens for colour, corners, spacing, type and motion. A new theme inherits base and lists only the values it changes. The previews follow the site's light and dark switch.

Base

base

The neutral token set every theme builds on

Terminalbash

npx shadcn@latest add https://dsui.vercel.app/r/base.json

Base Aa 가나다 123

Iconsnotificationsuccess

Hear the sounds

NewDone

NameOn focus, the field fills with the accent colour.

This week's report

Uses the theme's surfaces, lines and corners as they are.

Light

blue-subtle#dbeafe
border#dfe5eb
brand-blue#2563eb
brand-yellow#fbbf24
glow#fbbf24
ink#252729
ink-muted#6b7682
inverse-bg#252729
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
muteComputed from other tokens
on-blue#ffffff
on-blue-mutedComputed from other tokens
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

Dark

blue-subtle#172554
border#2a2f35
brand-blue#6b9bff
brand-yellow#fbbf24
glow#fbbf24
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#252729
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
muteComputed from other tokens
on-blue#0b1220
on-blue-mutedComputed from other tokens
on-yellow#252729
success#59d989
surface#101214
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

Arc tokens and non-colour --ds tokens of the Base theme
Token	Light	Dark
Arc tokens
`--background`	Default (foundation.css)	Default (foundation.css)
`--surface`	Default (foundation.css)	Default (foundation.css)
`--surface-raised`	Default (foundation.css)	Default (foundation.css)
`--surface-muted`	Default (foundation.css)	Default (foundation.css)
`--surface-sunken`	Default (foundation.css)	Default (foundation.css)
`--inverse`	Default (foundation.css)	Default (foundation.css)
`--inverse-foreground`	Default (foundation.css)	Default (foundation.css)
`--foreground`	Default (foundation.css)	Default (foundation.css)
`--text-secondary`	Default (foundation.css)	Default (foundation.css)
`--text-muted`	Default (foundation.css)	Default (foundation.css)
`--border`	Default (foundation.css)	Default (foundation.css)
`--border-subtle`	Default (foundation.css)	Default (foundation.css)
`--border-strong`	Default (foundation.css)	Default (foundation.css)
`--accent`	Default (foundation.css)	Default (foundation.css)
`--accent-strong`	Default (foundation.css)	Default (foundation.css)
`--accent-subtle`	Default (foundation.css)	Default (foundation.css)
`--accent-foreground`	Default (foundation.css)	Default (foundation.css)
`--accent-foreground-muted`	Default (foundation.css)	Default (foundation.css)
`--highlight`	Default (foundation.css)	Default (foundation.css)
`--highlight-strong`	Default (foundation.css)	Default (foundation.css)
`--highlight-subtle`	Default (foundation.css)	Default (foundation.css)
`--highlight-foreground`	Default (foundation.css)	Default (foundation.css)
`--glow`	Default (foundation.css)	Default (foundation.css)
`--control-on`	Default (foundation.css)	Default (foundation.css)
`--control-glyph`	Default (foundation.css)	Default (foundation.css)
`--control-track`	Default (foundation.css)	Default (foundation.css)
`--control-track-hover`	Default (foundation.css)	Default (foundation.css)
`--control-thumb`	Default (foundation.css)	Default (foundation.css)
`--control-thumb-on`	Default (foundation.css)	Default (foundation.css)
`--success`	Default (foundation.css)	Default (foundation.css)
`--warning`	Default (foundation.css)	Default (foundation.css)
`--danger`	Default (foundation.css)	Default (foundation.css)
`--series-1`	Default (foundation.css)	Default (foundation.css)
`--series-2`	Default (foundation.css)	Default (foundation.css)
`--series-3`	Default (foundation.css)	Default (foundation.css)
`--series-4`	Default (foundation.css)	Default (foundation.css)
`--radius-control`	Default (foundation.css)	Default (foundation.css)
`--radius-panel`	Default (foundation.css)	Default (foundation.css)
`--radius-surface`	Default (foundation.css)	Default (foundation.css)
`--radius-pill`	Default (foundation.css)	Default (foundation.css)
`--shadow-resting`	Default (foundation.css)	Default (foundation.css)
`--shadow-raised`	Default (foundation.css)	Default (foundation.css)
`--shadow-floating`	Default (foundation.css)	Default (foundation.css)
Earlier --ds tokens
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

Christmas

christmasInherits Base

A warm holiday theme of crimson, pine green and snow white

Terminalbash

npx shadcn@latest add https://dsui.vercel.app/r/christmas.json

Christmas Aa 가나다 123

Iconsnotificationsuccess

Hear the sounds

NewDone

NameOn focus, the field fills with the accent colour.

This week's report

Uses the theme's surfaces, lines and corners as they are.

Light

blue-subtle#dbeafe
border#d9e8dfChanged here
brand-blue#c42b2bChanged here
brand-yellow#fbbf24
glow#2f8f5bChanged here
ink#252729
ink-muted#6b7682
inverse-bg#0f3a28Changed here
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
muteComputed from other tokens
on-blue#ffffffChanged here
on-blue-mutedComputed from other tokens
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

Dark

blue-subtle#172554
border#1c3128Changed here
brand-blue#ff6b6bChanged here
brand-yellow#fbbf24
glow#5fd49aChanged here
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#0d2a1eChanged here
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
muteComputed from other tokens
on-blue#2a0808Changed here
on-blue-mutedComputed from other tokens
on-yellow#252729
success#59d989
surface#0a1511Changed here
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

Arc tokens and non-colour --ds tokens of the Christmas theme
Token	Light	Dark
Arc tokens
`--background` Changed here	`oklch(98.8% .006 160)`	`oklch(15.5% .025 165)`
`--surface` Changed here	`oklch(98.8% .006 160)`	`oklch(15.5% .025 165)`
`--surface-raised` Changed here	`oklch(100% 0 0)`	`oklch(21% .035 160)`
`--surface-muted` Changed here	`oklch(96.2% .012 160)`	`oklch(18.5% .03 160)`
`--surface-sunken` Changed here	`oklch(93.2% .018 160)`	`oklch(12.5% .022 165)`
`--inverse`	Default (foundation.css)	Default (foundation.css)
`--inverse-foreground`	Default (foundation.css)	Default (foundation.css)
`--foreground` Changed here	`oklch(24% .035 160)`	`oklch(96% .01 150)`
`--text-secondary` Changed here	`oklch(48% .045 160)`	`oklch(75% .035 160)`
`--text-muted` Changed here	`oklch(48% .045 160)`	`oklch(75% .035 160)`
`--border` Changed here	`oklch(90% .02 160)`	`oklch(29% .035 160)`
`--border-subtle` Changed here	`oklch(95% .012 160)`	`oklch(24% .03 160)`
`--border-strong` Changed here	`oklch(80% .03 160)`	`oklch(41% .045 160)`
`--accent` Changed here	`oklch(50% .2 25)`	`oklch(66% .2 25)`
`--accent-strong`	Default (foundation.css)	Default (foundation.css)
`--accent-subtle`	Default (foundation.css)	Default (foundation.css)
`--accent-foreground` Changed here	`oklch(100% 0 0)`	`oklch(16% .04 25)`
`--accent-foreground-muted`	Default (foundation.css)	Default (foundation.css)
`--highlight` Changed here	`oklch(40% .11 155)`	`oklch(70% .13 155)`
`--highlight-strong` Changed here	`oklch(33% .1 155)`	`oklch(78% .11 155)`
`--highlight-subtle`	Default (foundation.css)	Default (foundation.css)
`--highlight-foreground` Changed here	`oklch(100% 0 0)`	`oklch(17% .04 155)`
`--glow`	Default (foundation.css)	Default (foundation.css)
`--control-on` Changed here	Default (foundation.css)	`var(--accent)`
`--control-glyph` Changed here	Default (foundation.css)	`var(--accent-foreground)`
`--control-track`	Default (foundation.css)	Default (foundation.css)
`--control-track-hover`	Default (foundation.css)	Default (foundation.css)
`--control-thumb`	Default (foundation.css)	Default (foundation.css)
`--control-thumb-on`	Default (foundation.css)	Default (foundation.css)
`--success`	Default (foundation.css)	Default (foundation.css)
`--warning`	Default (foundation.css)	Default (foundation.css)
`--danger`	Default (foundation.css)	Default (foundation.css)
`--series-1`	Default (foundation.css)	Default (foundation.css)
`--series-2`	Default (foundation.css)	Default (foundation.css)
`--series-3`	Default (foundation.css)	Default (foundation.css)
`--series-4`	Default (foundation.css)	Default (foundation.css)
`--radius-control`	Default (foundation.css)	Default (foundation.css)
`--radius-panel`	Default (foundation.css)	Default (foundation.css)
`--radius-surface`	Default (foundation.css)	Default (foundation.css)
`--radius-pill`	Default (foundation.css)	Default (foundation.css)
`--shadow-resting`	Default (foundation.css)	Default (foundation.css)
`--shadow-raised`	Default (foundation.css)	Default (foundation.css)
`--shadow-floating`	Default (foundation.css)	Default (foundation.css)
Earlier --ds tokens
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

Chuseok

chuseokInherits Base

A harvest-moon theme of golden light and persimmon orange

Terminalbash

npx shadcn@latest add https://dsui.vercel.app/r/chuseok.json

Chuseok Aa 가나다 123

Iconsnotificationsuccess

Hear the sounds

NewDone

NameOn focus, the field fills with the accent colour.

This week's report

Uses the theme's surfaces, lines and corners as they are.

Light

blue-subtle#dbeafe
border#efe5c9Changed here
brand-blue#eab52eChanged here
brand-yellow#fbbf24
glow#e8772eChanged here
ink#252729
ink-muted#6b7682
inverse-bg#1f2a4aChanged here
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
muteComputed from other tokens
on-blue#2c1f04Changed here
on-blue-mutedComputed from other tokens
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

Dark

blue-subtle#172554
border#1f2a44Changed here
brand-blue#f6d56aChanged here
brand-yellow#fbbf24
glow#f6d56aChanged here
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#16203aChanged here
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
muteComputed from other tokens
on-blue#2c1f04Changed here
on-blue-mutedComputed from other tokens
on-yellow#252729
success#59d989
surface#0c1220Changed here
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

Arc tokens and non-colour --ds tokens of the Chuseok theme
Token	Light	Dark
Arc tokens
`--background` Changed here	`oklch(98.5% .012 95)`	`oklch(16% .03 260)`
`--surface` Changed here	`oklch(98.5% .012 95)`	`oklch(16% .03 260)`
`--surface-raised` Changed here	`oklch(100% 0 0)`	`oklch(22% .035 260)`
`--surface-muted` Changed here	`oklch(96% .02 92)`	`oklch(19% .032 260)`
`--surface-sunken` Changed here	`oklch(93% .028 88)`	`oklch(12.5% .025 260)`
`--inverse`	Default (foundation.css)	Default (foundation.css)
`--inverse-foreground`	Default (foundation.css)	Default (foundation.css)
`--foreground` Changed here	`oklch(26% .035 60)`	`oklch(95% .02 90)`
`--text-secondary` Changed here	`oklch(48% .05 60)`	`oklch(75% .04 250)`
`--text-muted` Changed here	`oklch(48% .05 60)`	`oklch(75% .04 250)`
`--border` Changed here	`oklch(90% .03 90)`	`oklch(30% .04 260)`
`--border-subtle` Changed here	`oklch(95% .02 90)`	`oklch(24% .035 260)`
`--border-strong` Changed here	`oklch(80% .045 85)`	`oklch(42% .05 260)`
`--accent` Changed here	`oklch(80% .15 88)`	`oklch(86% .14 92)`
`--accent-strong` Changed here	`oklch(54% .12 80)`	`oklch(54% .12 80)`
`--accent-subtle`	Default (foundation.css)	Default (foundation.css)
`--accent-foreground` Changed here	`oklch(26% .06 70)`	`oklch(22% .05 90)`
`--accent-foreground-muted`	Default (foundation.css)	Default (foundation.css)
`--highlight` Changed here	`oklch(52% .17 45)`	`oklch(72% .16 50)`
`--highlight-strong` Changed here	`oklch(45% .16 45)`	`oklch(80% .12 50)`
`--highlight-subtle`	Default (foundation.css)	Default (foundation.css)
`--highlight-foreground` Changed here	`oklch(100% 0 0)`	`oklch(18% .04 50)`
`--glow`	Default (foundation.css)	Default (foundation.css)
`--control-on` Changed here	Default (foundation.css)	`var(--accent)`
`--control-glyph` Changed here	Default (foundation.css)	`var(--accent-foreground)`
`--control-track`	Default (foundation.css)	Default (foundation.css)
`--control-track-hover`	Default (foundation.css)	Default (foundation.css)
`--control-thumb`	Default (foundation.css)	Default (foundation.css)
`--control-thumb-on`	Default (foundation.css)	Default (foundation.css)
`--success`	Default (foundation.css)	Default (foundation.css)
`--warning`	Default (foundation.css)	Default (foundation.css)
`--danger`	Default (foundation.css)	Default (foundation.css)
`--series-1`	Default (foundation.css)	Default (foundation.css)
`--series-2`	Default (foundation.css)	Default (foundation.css)
`--series-3`	Default (foundation.css)	Default (foundation.css)
`--series-4`	Default (foundation.css)	Default (foundation.css)
`--radius-control`	Default (foundation.css)	Default (foundation.css)
`--radius-panel`	Default (foundation.css)	Default (foundation.css)
`--radius-surface`	Default (foundation.css)	Default (foundation.css)
`--radius-pill`	Default (foundation.css)	Default (foundation.css)
`--shadow-resting`	Default (foundation.css)	Default (foundation.css)
`--shadow-raised`	Default (foundation.css)	Default (foundation.css)
`--shadow-floating`	Default (foundation.css)	Default (foundation.css)
Earlier --ds tokens
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

Halloween

halloweenInherits Base

A spooky but playful theme of pumpkin orange and midnight violet

Terminalbash

npx shadcn@latest add https://dsui.vercel.app/r/halloween.json

Halloween Aa 가나다 123

Iconsnotificationsuccess

Hear the sounds

NewDone

NameOn focus, the field fills with the accent colour.

This week's report

Uses the theme's surfaces, lines and corners as they are.

Light

blue-subtle#dbeafe
border#eadcd0Changed here
brand-blue#ec7a2aChanged here
brand-yellow#fbbf24
glow#8b3fd1Changed here
ink#252729
ink-muted#6b7682
inverse-bg#2a1740Changed here
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
muteComputed from other tokens
on-blue#2a1204Changed here
on-blue-mutedComputed from other tokens
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

Dark

blue-subtle#172554
border#2c1f3aChanged here
brand-blue#ff9a3dChanged here
brand-yellow#fbbf24
glow#b57bffChanged here
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#1d1030Changed here
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
muteComputed from other tokens
on-blue#2a1204Changed here
on-blue-mutedComputed from other tokens
on-yellow#252729
success#59d989
surface#120a1aChanged here
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

Arc tokens and non-colour --ds tokens of the Halloween theme
Token	Light	Dark
Arc tokens
`--background` Changed here	`oklch(98% .012 70)`	`oklch(15% .03 305)`
`--surface` Changed here	`oklch(98% .012 70)`	`oklch(15% .03 305)`
`--surface-raised` Changed here	`oklch(100% 0 0)`	`oklch(21% .04 305)`
`--surface-muted` Changed here	`oklch(95.5% .02 65)`	`oklch(18.5% .035 305)`
`--surface-sunken` Changed here	`oklch(92% .028 60)`	`oklch(12% .025 305)`
`--inverse`	Default (foundation.css)	Default (foundation.css)
`--inverse-foreground`	Default (foundation.css)	Default (foundation.css)
`--foreground` Changed here	`oklch(24% .03 300)`	`oklch(95% .015 70)`
`--text-secondary` Changed here	`oklch(48% .05 300)`	`oklch(75% .04 300)`
`--text-muted` Changed here	`oklch(48% .05 300)`	`oklch(75% .04 300)`
`--border` Changed here	`oklch(89% .03 60)`	`oklch(30% .04 305)`
`--border-subtle` Changed here	`oklch(94% .02 60)`	`oklch(24% .035 305)`
`--border-strong` Changed here	`oklch(78% .045 60)`	`oklch(42% .05 305)`
`--accent` Changed here	`oklch(70% .17 52)`	`oklch(76% .16 55)`
`--accent-strong` Changed here	`oklch(54% .17 45)`	`oklch(54% .17 45)`
`--accent-subtle`	Default (foundation.css)	Default (foundation.css)
`--accent-foreground` Changed here	`oklch(22% .05 40)`	`oklch(20% .05 40)`
`--accent-foreground-muted`	Default (foundation.css)	Default (foundation.css)
`--highlight` Changed here	`oklch(48% .19 305)`	`oklch(72% .17 305)`
`--highlight-strong` Changed here	`oklch(40% .18 305)`	`oklch(80% .13 305)`
`--highlight-subtle`	Default (foundation.css)	Default (foundation.css)
`--highlight-foreground` Changed here	`oklch(100% 0 0)`	`oklch(18% .04 305)`
`--glow`	Default (foundation.css)	Default (foundation.css)
`--control-on` Changed here	Default (foundation.css)	`var(--accent)`
`--control-glyph` Changed here	Default (foundation.css)	`var(--accent-foreground)`
`--control-track`	Default (foundation.css)	Default (foundation.css)
`--control-track-hover`	Default (foundation.css)	Default (foundation.css)
`--control-thumb`	Default (foundation.css)	Default (foundation.css)
`--control-thumb-on`	Default (foundation.css)	Default (foundation.css)
`--success`	Default (foundation.css)	Default (foundation.css)
`--warning`	Default (foundation.css)	Default (foundation.css)
`--danger`	Default (foundation.css)	Default (foundation.css)
`--series-1`	Default (foundation.css)	Default (foundation.css)
`--series-2`	Default (foundation.css)	Default (foundation.css)
`--series-3`	Default (foundation.css)	Default (foundation.css)
`--series-4`	Default (foundation.css)	Default (foundation.css)
`--radius-control`	Default (foundation.css)	Default (foundation.css)
`--radius-panel`	Default (foundation.css)	Default (foundation.css)
`--radius-surface`	Default (foundation.css)	Default (foundation.css)
`--radius-pill`	Default (foundation.css)	Default (foundation.css)
`--shadow-resting`	Default (foundation.css)	Default (foundation.css)
`--shadow-raised`	Default (foundation.css)	Default (foundation.css)
`--shadow-floating`	Default (foundation.css)	Default (foundation.css)
Earlier --ds tokens
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

Seollal

seollalInherits Base

A New Year theme of hanji cream, vermilion and gold

Terminalbash

npx shadcn@latest add https://dsui.vercel.app/r/seollal.json

Seollal Aa 가나다 123

Iconsnotificationsuccess

Hear the sounds

NewDone

NameOn focus, the field fills with the accent colour.

This week's report

Uses the theme's surfaces, lines and corners as they are.

Light

blue-subtle#dbeafe
border#eee2cfChanged here
brand-blue#d6342cChanged here
brand-yellow#fbbf24
glow#f2c14eChanged here
ink#252729
ink-muted#6b7682
inverse-bg#4a1410Changed here
inverse-fg#ffffff
market-down#1a5fd1
market-up#cc1f29
muteComputed from other tokens
on-blue#ffffffChanged here
on-blue-mutedComputed from other tokens
on-yellow#252729
success#37b66c
surface#ffffff
surface-subtle#f5f7fa
surface-sunken#e7ebf0
yellow-subtle#fef3c7

Dark

blue-subtle#172554
border#3a2420Changed here
brand-blue#ff6b5cChanged here
brand-yellow#fbbf24
glow#f2c14eChanged here
ink#f3f5f7
ink-muted#9aa5b1
inverse-bg#2c1411Changed here
inverse-fg#f3f5f7
market-down#5c9dff
market-up#ff6b6b
muteComputed from other tokens
on-blue#2a0806Changed here
on-blue-mutedComputed from other tokens
on-yellow#252729
success#59d989
surface#1a0e0cChanged here
surface-subtle#171a1d
surface-sunken#0b0d0f
yellow-subtle#422006

Arc tokens and non-colour --ds tokens of the Seollal theme
Token	Light	Dark
Arc tokens
`--background` Changed here	`oklch(98.5% .01 85)`	`oklch(17% .025 25)`
`--surface` Changed here	`oklch(98.5% .01 85)`	`oklch(17% .025 25)`
`--surface-raised` Changed here	`oklch(100% 0 0)`	`oklch(23% .035 25)`
`--surface-muted` Changed here	`oklch(96% .018 80)`	`oklch(20% .03 25)`
`--surface-sunken` Changed here	`oklch(93% .025 78)`	`oklch(13.5% .02 25)`
`--inverse`	Default (foundation.css)	Default (foundation.css)
`--inverse-foreground`	Default (foundation.css)	Default (foundation.css)
`--foreground` Changed here	`oklch(25% .03 30)`	`oklch(96% .012 85)`
`--text-secondary` Changed here	`oklch(48% .05 35)`	`oklch(76% .04 40)`
`--text-muted` Changed here	`oklch(48% .05 35)`	`oklch(76% .04 40)`
`--border` Changed here	`oklch(90% .03 80)`	`oklch(31% .04 25)`
`--border-subtle` Changed here	`oklch(95% .02 80)`	`oklch(25% .035 25)`
`--border-strong` Changed here	`oklch(80% .04 70)`	`oklch(43% .05 25)`
`--accent` Changed here	`oklch(54% .21 28)`	`oklch(68% .19 28)`
`--accent-strong`	Default (foundation.css)	Default (foundation.css)
`--accent-subtle`	Default (foundation.css)	Default (foundation.css)
`--accent-foreground` Changed here	`oklch(100% 0 0)`	`oklch(18% .04 25)`
`--accent-foreground-muted`	Default (foundation.css)	Default (foundation.css)
`--highlight` Changed here	`oklch(82% .15 88)`	`oklch(82% .14 88)`
`--highlight-strong` Changed here	`oklch(70% .15 85)`	`oklch(88% .11 88)`
`--highlight-subtle`	Default (foundation.css)	Default (foundation.css)
`--highlight-foreground` Changed here	`oklch(27% .05 80)`	`oklch(25% .05 80)`
`--glow`	Default (foundation.css)	Default (foundation.css)
`--control-on` Changed here	Default (foundation.css)	`var(--accent)`
`--control-glyph` Changed here	Default (foundation.css)	`var(--accent-foreground)`
`--control-track`	Default (foundation.css)	Default (foundation.css)
`--control-track-hover`	Default (foundation.css)	Default (foundation.css)
`--control-thumb`	Default (foundation.css)	Default (foundation.css)
`--control-thumb-on`	Default (foundation.css)	Default (foundation.css)
`--success`	Default (foundation.css)	Default (foundation.css)
`--warning`	Default (foundation.css)	Default (foundation.css)
`--danger`	Default (foundation.css)	Default (foundation.css)
`--series-1`	Default (foundation.css)	Default (foundation.css)
`--series-2`	Default (foundation.css)	Default (foundation.css)
`--series-3`	Default (foundation.css)	Default (foundation.css)
`--series-4`	Default (foundation.css)	Default (foundation.css)
`--radius-control`	Default (foundation.css)	Default (foundation.css)
`--radius-panel`	Default (foundation.css)	Default (foundation.css)
`--radius-surface`	Default (foundation.css)	Default (foundation.css)
`--radius-pill`	Default (foundation.css)	Default (foundation.css)
`--shadow-resting`	Default (foundation.css)	Default (foundation.css)
`--shadow-raised`	Default (foundation.css)	Default (foundation.css)
`--shadow-floating`	Default (foundation.css)	Default (foundation.css)
Earlier --ds tokens
`--ds-dur-base`	`240ms`	`240ms`
`--ds-ease-out`	`cubic-bezier(0.22, 1, 0.36, 1)`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ds-font-sans`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`	`'Pretendard Variable', Pretendard, -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', system-ui, sans-serif`
`--ds-radius-full`	`9999px`	`9999px`
`--ds-radius-lg`	`20px`	`20px`
`--ds-radius-md`	`12px`	`12px`
`--ds-radius-sm`	`8px`	`8px`
`--ds-radius-xl`	`28px`	`28px`
`--ds-space-1`	`4px`	`4px`
`--ds-space-12`	`48px`	`48px`
`--ds-space-2`	`8px`	`8px`
`--ds-space-3`	`12px`	`12px`
`--ds-space-4`	`16px`	`16px`
`--ds-space-6`	`24px`	`24px`
`--ds-space-8`	`32px`	`32px`

Base

This week's report

Colours

Light

Dark

Token table

Christmas

This week's report

Colours

Light

Dark

Token table

Chuseok

This week's report

Colours

Light

Dark

Token table

Halloween

This week's report

Colours

Light

Dark

Token table

Seollal

This week's report

Colours

Light

Dark

Token table