Alpha

타이포그래피

Typography

Font

font-family
font(Inter) font-family:Inter
font-size
font(16) font-size:16px
font(1rem) font-size:1rem
font-weight
600
700
bold font-weight:700
font-combined
font(16/24) font-size:16px;line-height:24px
font(16/24/-2%) font-size:16px;line-height:24px;letter-spacing:-0.02em
500 font(Inter/16/24/-2%)

Font Family Presets

font-family-presets
font-family(sf-mono) font-family:'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace
font-family(inter) font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif
font-family(system) font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif
font-family(mono) font-family:'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace
font-family(serif) font-family:Georgia, 'Times New Roman', Times, serif

Color

color
c(#000) color:var(--#000, #000)
c(#000.5) color:var(--#000, #000)
color-gradient
c(red..blue) background:linear-gradient(90deg, #ef4444, #3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent
c(#ff0000..#0000ff)
c(white..#e0e7ff)

Text Shadow

text-shadow
text-shadow(0/2px/4px/rgba(0,0,0,0.1)) text-shadow:0 2px 4px rgba(0,0,0,0.1)
text-shadow(2/4) text-shadow:2px 4px 4px rgba(0,0,0,0.1)
text-shadow(1) text-shadow:1px 2px 4px rgba(0,0,0,0.1)

Alignment

text-align
text(left) text-align:left
text(center) text-align:center
text(right) text-align:right

Decoration

text-decoration
underline text-decoration:underline
strike text-decoration:line-through
no-underline

Transform

text-transform
uppercase text-transform:uppercase
lowercase text-transform:lowercase
capitalize text-transform:capitalize

Style

font-style
italic font-style:italic
not-italic

Whitespace

white-space
nowrap white-space:nowrap
pre
pre-wrap

Overflow

text-overflow
truncate overflow:hidden;text-overflow:ellipsis;white-space:nowrap
max-lines(3) display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis

Word Break

word-break
break(all)
break(word)

List Style

list-style
list(disc) list-style-type:disc
list(decimal) list-style-type:decimal
list(none) list-style-type:none

레이아웃

Layout

Display

display
block display:block
inline-block display:inline-block
inline display:inline
none display:none
flexbox
hbox display:flex;flex-direction:row;align-items:center;justify-content:flex-start
vbox display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:justify
grid
grid display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:var(--spacing-lg, 1rem)

Flexbox

flex-wrap
wrap display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap
nowrap white-space:nowrap
hbox-alignment
hbox(pack) display:flex;flex-direction:row;align-items:center;justify-content:center
hbox(end) display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end
hbox(around) display:flex;flex-direction:row;align-items:center;justify-content:space-around
gap(auto) gap:auto;justify-content:space-between;align-content:space-between
hbox-combined
hbox(center+center) display:flex;flex-direction:row;align-items:center;justify-content:center
hbox(end+fill) display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end
gap(auto) gap:auto;justify-content:space-between;align-content:space-between
vbox-alignment
vbox(center) display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center
vbox(end) display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start
vbox(around) display:flex;flex-direction:column;align-items:stretch;justify-content:space-around;text-align:justify
gap(auto) gap:auto;justify-content:space-between;align-content:space-between
center-alignment
pack display:flex;flex-direction:row;align-items:center;justify-content:center
justify-content
hbox(pack) display:flex;flex-direction:row;align-items:center;justify-content:center
vbox(around) display:flex;flex-direction:column;align-items:stretch;justify-content:space-around;text-align:justify
gap(auto) gap:auto;justify-content:space-between;align-content:space-between

Pack Shorthand

pack-shorthand
hbox(pack) display:flex;flex-direction:row;align-items:center;justify-content:center
vbox(pack) display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center
layout-combinations
vbox(around+fill) display:flex;flex-direction:column;align-items:stretch;justify-content:space-around;text-align:justify
hbox(end+end) display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-end
gap(auto) gap:auto;justify-content:space-between;align-content:space-between

Grid

grid-template
grid-cols(3) grid-template-columns:repeat(3, minmax(0, 1fr))
grid-rows(2) grid-template-rows:repeat(2, minmax(0, 1fr))
grid-span
col-span(2) grid-column:span 2 / span 2
row-span(3) grid-row:span 3 / span 3
grid-position
col-start(2)
row-end(4)

Position

position
static position:static
relative position:relative
absolute position:absolute
fixed position:fixed
coordinates
(10,20) position:absolute;left:10px;top:20px
(50%, 100) position:absolute;left:50%;top:100px
top(10px) top:10px
left(50%) left:50%
right(0) right:0
bottom(0) bottom:0
z-index
z(10) z-index:10
z(999) z-index:999

Spacing

padding
p(lg) padding:var(--spacing-lg)
p(16/24) padding-top:16px;padding-right:24px;padding-bottom:16px;padding-left:24px
p(10/20/10/20) padding-top:10px;padding-right:20px;padding-bottom:10px;padding-left:20px
padding-directional
px(lg) padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)
py(2xl) padding-top:var(--spacing-2xl);padding-bottom:var(--spacing-2xl)
pt(10px) padding-top:10px
margin
m(lg) margin:var(--spacing-lg)
m(auto) margin:auto
m(10/20) margin-top:10px;margin-right:20px;margin-bottom:10px;margin-left:20px
margin-directional
mx(auto) margin-left:auto;margin-right:auto
my(lg) margin-top:var(--spacing-lg);margin-bottom:var(--spacing-lg)
mt(10px) margin-top:10px
gap
gap(lg) gap:var(--spacing-lg)
gap(16/24) gap:0

크기 및 제한

Size & Constraints

Width

width
w(300px) width:300px
w(fill) flex:1
w(hug) width:fit-content
w(auto) width:auto

Height

height
h(200px) height:200px
h(fill) flex:1
h(hug) height:fit-content
h(screen) height:100vh

Size

size
300x200

Min/Max Size

constraints
w(300px) width:300px
h(200px) height:200px
w(hug) width:fit-content
w(fill) flex:1

Aspect Ratio

aspect-ratio
16:9
1:1
4:3

시각적 속성

Visuals

Background

background-color
bg(#fff) background-color:var(--#fff, #fff)
bg(#000.5) background-color:var(--#000, #000)
bg(transparent) background-color:transparent
background-gradient
bg(#f00..#00f/45deg)
bg(#f00..#00f/radial-circle)
background-simple-gradient
bg(#667eea..#764ba2)
bg(red..blue) background:linear-gradient(135deg, var(--red-500), var(--blue-500))
bg(#667eea..#764ba2/135deg)
background-image
bg('url.png') background-color:var(--'url, 'url)

Border

border
b(1) border:1px solid currentColor
r(8) border-radius:8px
border(1/solid/#333) border:1px solid var(--#333, #333)

Directional Borders

border-directional
border(top/1/#333) border-top:1px solid var(--#333, #333)
border(right/2/dashed/red) border-right:2px dashed var(--red-500)
border(bottom/3) border-bottom:3px solid currentColor
border(left/1/dotted/#666) border-left:1px dotted var(--#666, #666)

Radius

border-radius
r(8) border-radius:8px
r(8/0) border-radius:8px 0
r(8/0/16/0) border-radius:8px 0 16px 0
r() border-radius:8px

Shadow

box-shadow
shadow(md) box-shadow:0 4px 8px -2px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04)
shadow(lg) box-shadow:0 10px 20px -3px rgb(0 0 0 / 0.08), 0 4px 8px -3px rgb(0 0 0 / 0.04)
shadow(0/4/16/#000.1) box-shadow:0 4px 16px var(--#000, #000)
shadow(inner/...)

Opacity

opacity
opacity(.5) opacity:.5
opacity(0) opacity:0
opacity(1) opacity:1

Filters

filter
blur(4) filter:blur(4px)
brightness(.8) filter:brightness(.8)
contrast(1.2) filter:contrast(1.2)
grayscale
sepia filter:sepia()
saturate(1.5) filter:saturate(1.5)

Backdrop Filter

backdrop-filter
backdrop(blur/10) backdrop-filter:blur(10px)
backdrop(blur/5) backdrop-filter:blur(5px)
backdrop(brightness(1.2)) backdrop-filter:brightness(1.2)

Blend Mode

blend-mode
mix-blend(multiply)
bg-blend(screen)

인터랙션 제어

Interaction Control

Cursor

cursor
cursor(pointer) cursor:pointer
cursor(not-allowed) cursor:not-allowed
cursor-shorthand
pointer cursor:pointer

Pointer Events

pointer-events
pointer(none) cursor:pointer
pointer(auto) cursor:pointer

User Select

user-select
select(none) user-select:none
select(text) user-select:text
select(all) user-select:all
user-select-shorthand
select-none user-select:none

Resize

resize
resize resize:both
resize(x) resize:horizontal
resize(y) resize:vertical
resize-none

Appearance

appearance
appearance(none) appearance:none

Inert

inert
inert

상태, 전환, 애니메이션

States, Transitions & Animations

State

hover-states
hover:bg(blue) background-color:var(--blue-500)
active:scale(.98) transform:scale(.98)
focus-states
focus:b(blue) border:1px solid var(--blue-500)
disabled:opacity(.5) opacity:.5
checked-states
checked:bg(blue) background-color:var(--blue-500)
first:r(0) border-radius:0
last:r(0) border-radius:0
group-states
group-hover:c(#fff) color:var(--#fff, #fff)
peer-checked:b(blue) border:1px solid var(--blue-500)

Responsive

responsive
sm:vbox display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;text-align:justify
md:p(3xl) padding:var(--spacing-3xl)
lg:hbox display:flex;flex-direction:row;align-items:center;justify-content:flex-start

Dark Mode

dark-mode
.dark:bg(#000) background-color:var(--#000, #000)

Transition

transition
transition transition:all 0.2s ease
transition(colors) transition:all 0.2s ease
transition-timing
duration(300) transition-duration:300ms
delay(100) animation-delay:100ms
ease(in-out) transition-timing-function:ease-in-out
ease(linear) transition-timing-function:linear

Animation

animation
animate(spin)
animate(ping)
animation-custom
animate(float/6s/ease-in-out/infinite) animation:float 6s ease-in-out 0s infinite normal forwards
animate(fade/2s)
animate(bounce)

Transform

transform
scale(1.1) transform:scale(1.1)
rotate(45) transform:rotate(45deg)
translate(10/20)
skew(x/12)
skew(y/12)
transform-origin
origin(center)
origin(top+left)

고급 및 유틸리티

Advanced & Utilities

Stacking

z-index
z(0) z-index:0
z(10) z-index:10
z(auto) z-index:auto
z(top) z-index:9999

Size Utilities

size-utilities
fit
fill
center

Scroll

overflow
scroll
scroll(x) scroll-behavior:x
scroll(y) scroll-behavior:y
clip overflow:hidden
scrollbar
scrollbar(none) scrollbar-width:none;-ms-overflow-style:none
scrollbar(thin) scrollbar-width:thin
scroll-behavior
scroll(smooth) scroll-behavior:smooth
scroll-snap
snap scroll-snap-type:both mandatory
snap(x) scroll-snap-type:x mandatory
snap-item scroll-snap-align:start

Accessibility

screen-reader
sr-only position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0

SVG

svg
fill(currentColor)
stroke(1/#fff)

Object Fit

object-fit
object(cover) object-fit:cover
object(contain) object-fit:contain
object-position
object(top) object-fit:top
object(center) object-fit:center
Class Inspector: ⌘ + hover