Tokens

Tokens de diseño del Design System de Gstock que proporcionan una base coherente para colores, espaciado, tipografía y otros valores de diseño.

Mostrando todos los tokens

Color

Background

Token (Accent Blue Bolder)	Light	Dark
`--gstock-color-background-accent-blue-bolder`	`#0c66e4ff`	`#579dffff`
`--gstock-color-background-accent-blue-bolder-hovered`	`#0055ccff`	`#85b8ffff`
`--gstock-color-background-accent-blue-bolder-pressed`	`#09326cff`	`#cce0ffff`

Token (Accent Blue Subtle)	Light	Dark
`--gstock-color-background-accent-blue-subtle`	`#579dffff`	`#0055ccff`
`--gstock-color-background-accent-blue-subtle-hovered`	`#85b8ffff`	`#09326cff`
`--gstock-color-background-accent-blue-subtle-pressed`	`#cce0ffff`	`#1c2b41ff`

Token (Accent Blue Subtler)	Light	Dark
`--gstock-color-background-accent-blue-subtler`	`#cce0ffff`	`#09326cff`
`--gstock-color-background-accent-blue-subtler-hovered`	`#85b8ffff`	`#579dffff`
`--gstock-color-background-accent-blue-subtler-pressed`	`#579dffff`	`#1d7afcff`

Token (Accent Blue Subtlest)	Light	Dark
`--gstock-color-background-accent-blue-subtlest`	`#e9f2ffff`	`#1c2b41ff`
`--gstock-color-background-accent-blue-subtlest-hovered`	`#cce0ffff`	`#09326cff`
`--gstock-color-background-accent-blue-subtlest-pressed`	`#85b8ffff`	`#579dffff`

Token (Accent Gray Bolder)	Light	Dark
`--gstock-color-background-accent-gray-bolder`	`#626f86ff`	`#b3b9c4ff`
`--gstock-color-background-accent-gray-bolder-hovered`	`#44546fff`	`#dcdfe4ff`
`--gstock-color-background-accent-gray-bolder-pressed`	`#2c3e5dff`	`#f1f2f4ff`

Token (Accent Gray Subtle)	Light	Dark
`--gstock-color-background-accent-gray-subtle`	`#8590a2ff`	`#44546fff`
`--gstock-color-background-accent-gray-subtle-hovered`	`#b3b9c4ff`	`#2c3e5dff`
`--gstock-color-background-accent-gray-subtle-pressed`	`#dcdfe4ff`	`#172b4dff`

Token (Accent Gray Subtler)	Light	Dark
`--gstock-color-background-accent-gray-subtler`	`#dcdfe4ff`	`#2c3e5dff`
`--gstock-color-background-accent-gray-subtler-hovered`	`#b3b9c4ff`	`#b3b9c4ff`
`--gstock-color-background-accent-gray-subtler-pressed`	`#8590a2ff`	`#758195ff`

Token (Accent Gray Subtlest)	Light	Dark
`--gstock-color-background-accent-gray-subtlest`	`#f1f2f4ff`	`#172b4dff`
`--gstock-color-background-accent-gray-subtlest-hovered`	`#dcdfe4ff`	`#2c3e5dff`
`--gstock-color-background-accent-gray-subtlest-pressed`	`#b3b9c4ff`	`#b3b9c4ff`

Token (Accent Green Bolder)	Light	Dark
`--gstock-color-background-accent-green-bolder`	`#1f845aff`	`#4bce97ff`
`--gstock-color-background-accent-green-bolder-hovered`	`#216e4eff`	`#7ee2b8ff`
`--gstock-color-background-accent-green-bolder-pressed`	`#164b35ff`	`#baf3dbff`

Token (Accent Green Subtle)	Light	Dark
`--gstock-color-background-accent-green-subtle`	`#4bce97ff`	`#216e4eff`
`--gstock-color-background-accent-green-subtle-hovered`	`#7ee2b8ff`	`#164b35ff`
`--gstock-color-background-accent-green-subtle-pressed`	`#baf3dbff`	`#1c3329ff`

Token (Accent Green Subtler)	Light	Dark
`--gstock-color-background-accent-green-subtler`	`#baf3dbff`	`#164b35ff`
`--gstock-color-background-accent-green-subtler-hovered`	`#7ee2b8ff`	`#4bce97ff`
`--gstock-color-background-accent-green-subtler-pressed`	`#4bce97ff`	`#22a06bff`

Token (Accent Green Subtlest)	Light	Dark
`--gstock-color-background-accent-green-subtlest`	`#dcfff1ff`	`#1c3329ff`
`--gstock-color-background-accent-green-subtlest-hovered`	`#baf3dbff`	`#164b35ff`
`--gstock-color-background-accent-green-subtlest-pressed`	`#7ee2b8ff`	`#4bce97ff`

Token (Accent Magenta Bolder)	Light	Dark
`--gstock-color-background-accent-magenta-bolder`	`#ae4787ff`	`#e774bbff`
`--gstock-color-background-accent-magenta-bolder-hovered`	`#943d73ff`	`#f797d2ff`
`--gstock-color-background-accent-magenta-bolder-pressed`	`#50253fff`	`#fdd0ecff`

Token (Accent Magenta Subtle)	Light	Dark
`--gstock-color-background-accent-magenta-subtle`	`#e774bbff`	`#943d73ff`
`--gstock-color-background-accent-magenta-subtle-hovered`	`#f797d2ff`	`#50253fff`
`--gstock-color-background-accent-magenta-subtle-pressed`	`#fdd0ecff`	`#3d2232ff`

Token (Accent Magenta Subtler)	Light	Dark
`--gstock-color-background-accent-magenta-subtler`	`#fdd0ecff`	`#50253fff`
`--gstock-color-background-accent-magenta-subtler-hovered`	`#f797d2ff`	`#e774bbff`
`--gstock-color-background-accent-magenta-subtler-pressed`	`#e774bbff`	`#cd519dff`

Token (Accent Magenta Subtlest)	Light	Dark
`--gstock-color-background-accent-magenta-subtlest`	`#ffecf8ff`	`#3d2232ff`
`--gstock-color-background-accent-magenta-subtlest-hovered`	`#fdd0ecff`	`#50253fff`
`--gstock-color-background-accent-magenta-subtlest-pressed`	`#f797d2ff`	`#e774bbff`

Token (Accent Mint Bolder)	Light	Dark
`--gstock-color-background-accent-mint-bolder`	`#068870ff`	`#09e1c0ff`
`--gstock-color-background-accent-mint-bolder-hovered`	`#056b5aff`	`#9df3e6ff`
`--gstock-color-background-accent-mint-bolder-pressed`	`#044d41ff`	`#cef9f2ff`

Token (Accent Mint Subtle)	Light	Dark
`--gstock-color-background-accent-mint-subtle`	`#09e1c0ff`	`#056b5aff`
`--gstock-color-background-accent-mint-subtle-hovered`	`#9df3e6ff`	`#044d41ff`
`--gstock-color-background-accent-mint-subtle-pressed`	`#cef9f2ff`	`#032f29ff`

Token (Accent Mint Subtler)	Light	Dark
`--gstock-color-background-accent-mint-subtler`	`#cef9f2ff`	`#044d41ff`
`--gstock-color-background-accent-mint-subtler-hovered`	`#9df3e6ff`	`#09e1c0ff`
`--gstock-color-background-accent-mint-subtler-pressed`	`#09e1c0ff`	`#07a689ff`

Token (Accent Mint Subtlest)	Light	Dark
`--gstock-color-background-accent-mint-subtlest`	`#f0fdfbff`	`#032f29ff`
`--gstock-color-background-accent-mint-subtlest-hovered`	`#cef9f2ff`	`#044d41ff`
`--gstock-color-background-accent-mint-subtlest-pressed`	`#9df3e6ff`	`#09e1c0ff`

Token (Accent Navy Bolder)	Light	Dark
`--gstock-color-background-accent-navy-bolder`	`#17436aff`	`#739fc4ff`
`--gstock-color-background-accent-navy-bolder-hovered`	`#113356ff`	`#a3c1d9ff`
`--gstock-color-background-accent-navy-bolder-pressed`	`#1a334eff`	`#d9e3edff`

Token (Accent Navy Subtle)	Light	Dark
`--gstock-color-background-accent-navy-subtle`	`#739fc4ff`	`#17436aff`
`--gstock-color-background-accent-navy-subtle-hovered`	`#a3c1d9ff`	`#113356ff`
`--gstock-color-background-accent-navy-subtle-pressed`	`#d9e3edff`	`#1a334eff`

Token (Accent Navy Subtler)	Light	Dark
`--gstock-color-background-accent-navy-subtler`	`#d9e3edff`	`#113356ff`
`--gstock-color-background-accent-navy-subtler-hovered`	`#a3c1d9ff`	`#739fc4ff`
`--gstock-color-background-accent-navy-subtler-pressed`	`#739fc4ff`	`#2f6a94ff`

Token (Accent Navy Subtlest)	Light	Dark
`--gstock-color-background-accent-navy-subtlest`	`#f0f4f8ff`	`#1a334eff`
`--gstock-color-background-accent-navy-subtlest-hovered`	`#d9e3edff`	`#113356ff`
`--gstock-color-background-accent-navy-subtlest-pressed`	`#a3c1d9ff`	`#739fc4ff`

Token (Accent Orange Bolder)	Light	Dark
`--gstock-color-background-accent-orange-bolder`	`#c25100ff`	`#fea362ff`
`--gstock-color-background-accent-orange-bolder-hovered`	`#a54800ff`	`#fec195ff`
`--gstock-color-background-accent-orange-bolder-pressed`	`#702e00ff`	`#fedec8ff`

Token (Accent Orange Subtle)	Light	Dark
`--gstock-color-background-accent-orange-subtle`	`#fea362ff`	`#a54800ff`
`--gstock-color-background-accent-orange-subtle-hovered`	`#fec195ff`	`#702e00ff`
`--gstock-color-background-accent-orange-subtle-pressed`	`#fedec8ff`	`#38291eff`

Token (Accent Orange Subtler)	Light	Dark
`--gstock-color-background-accent-orange-subtler`	`#fedec8ff`	`#702e00ff`
`--gstock-color-background-accent-orange-subtler-hovered`	`#fec195ff`	`#fea362ff`
`--gstock-color-background-accent-orange-subtler-pressed`	`#fea362ff`	`#e56910ff`

Token (Accent Orange Subtlest)	Light	Dark
`--gstock-color-background-accent-orange-subtlest`	`#fff3ebff`	`#38291eff`
`--gstock-color-background-accent-orange-subtlest-hovered`	`#fedec8ff`	`#702e00ff`
`--gstock-color-background-accent-orange-subtlest-pressed`	`#fec195ff`	`#fea362ff`

Token (Accent Purple Bolder)	Light	Dark
`--gstock-color-background-accent-purple-bolder`	`#6e5dc6ff`	`#9f8fefff`
`--gstock-color-background-accent-purple-bolder-hovered`	`#5e4db2ff`	`#b8acf6ff`
`--gstock-color-background-accent-purple-bolder-pressed`	`#352c63ff`	`#dfd8fdff`

Token (Accent Purple Subtle)	Light	Dark
`--gstock-color-background-accent-purple-subtle`	`#9f8fefff`	`#5e4db2ff`
`--gstock-color-background-accent-purple-subtle-hovered`	`#b8acf6ff`	`#352c63ff`
`--gstock-color-background-accent-purple-subtle-pressed`	`#dfd8fdff`	`#2b273fff`

Token (Accent Purple Subtler)	Light	Dark
`--gstock-color-background-accent-purple-subtler`	`#dfd8fdff`	`#352c63ff`
`--gstock-color-background-accent-purple-subtler-hovered`	`#b8acf6ff`	`#9f8fefff`
`--gstock-color-background-accent-purple-subtler-pressed`	`#9f8fefff`	`#8270dbff`

Token (Accent Purple Subtlest)	Light	Dark
`--gstock-color-background-accent-purple-subtlest`	`#f3f0ffff`	`#2b273fff`
`--gstock-color-background-accent-purple-subtlest-hovered`	`#dfd8fdff`	`#352c63ff`
`--gstock-color-background-accent-purple-subtlest-pressed`	`#b8acf6ff`	`#9f8fefff`

Token (Accent Red Bolder)	Light	Dark
`--gstock-color-background-accent-red-bolder`	`#c9372cff`	`#f87168ff`
`--gstock-color-background-accent-red-bolder-hovered`	`#ae2e24ff`	`#fd9891ff`
`--gstock-color-background-accent-red-bolder-pressed`	`#5d1f1aff`	`#ffd5d2ff`

Token (Accent Red Subtle)	Light	Dark
`--gstock-color-background-accent-red-subtle`	`#f87168ff`	`#ae2e24ff`
`--gstock-color-background-accent-red-subtle-hovered`	`#fd9891ff`	`#5d1f1aff`
`--gstock-color-background-accent-red-subtle-pressed`	`#ffd5d2ff`	`#42221fff`

Token (Accent Red Subtler)	Light	Dark
`--gstock-color-background-accent-red-subtler`	`#ffd5d2ff`	`#5d1f1aff`
`--gstock-color-background-accent-red-subtler-hovered`	`#fd9891ff`	`#f87168ff`
`--gstock-color-background-accent-red-subtler-pressed`	`#f87168ff`	`#e2483dff`

Token (Accent Red Subtlest)	Light	Dark
`--gstock-color-background-accent-red-subtlest`	`#ffecebff`	`#42221fff`
`--gstock-color-background-accent-red-subtlest-hovered`	`#ffd5d2ff`	`#5d1f1aff`
`--gstock-color-background-accent-red-subtlest-pressed`	`#fd9891ff`	`#f87168ff`

Token (Accent Teal Bolder)	Light	Dark
`--gstock-color-background-accent-teal-bolder`	`#227d9bff`	`#6cc3e0ff`
`--gstock-color-background-accent-teal-bolder-hovered`	`#206a83ff`	`#9dd9eeff`
`--gstock-color-background-accent-teal-bolder-pressed`	`#164555ff`	`#c6edfbff`

Token (Accent Teal Subtle)	Light	Dark
`--gstock-color-background-accent-teal-subtle`	`#6cc3e0ff`	`#206a83ff`
`--gstock-color-background-accent-teal-subtle-hovered`	`#9dd9eeff`	`#164555ff`
`--gstock-color-background-accent-teal-subtle-pressed`	`#c6edfbff`	`#1e3137ff`

Token (Accent Teal Subtler)	Light	Dark
`--gstock-color-background-accent-teal-subtler`	`#c6edfbff`	`#164555ff`
`--gstock-color-background-accent-teal-subtler-hovered`	`#9dd9eeff`	`#6cc3e0ff`
`--gstock-color-background-accent-teal-subtler-pressed`	`#6cc3e0ff`	`#2898bdff`

Token (Accent Teal Subtlest)	Light	Dark
`--gstock-color-background-accent-teal-subtlest`	`#e7f9ffff`	`#1e3137ff`
`--gstock-color-background-accent-teal-subtlest-hovered`	`#c6edfbff`	`#164555ff`
`--gstock-color-background-accent-teal-subtlest-pressed`	`#9dd9eeff`	`#6cc3e0ff`

Token (Accent Yellow Bolder)	Light	Dark
`--gstock-color-background-accent-yellow-bolder`	`#946f00ff`	`#e2b203ff`
`--gstock-color-background-accent-yellow-bolder-hovered`	`#7f5f01ff`	`#f5cd47ff`
`--gstock-color-background-accent-yellow-bolder-pressed`	`#533f04ff`	`#f8e6a0ff`

Token (Accent Yellow Subtle)	Light	Dark
`--gstock-color-background-accent-yellow-subtle`	`#f5cd47ff`	`#7f5f01ff`
`--gstock-color-background-accent-yellow-subtle-hovered`	`#e2b203ff`	`#533f04ff`
`--gstock-color-background-accent-yellow-subtle-pressed`	`#cf9f02ff`	`#332e1bff`

Token (Accent Yellow Subtler)	Light	Dark
`--gstock-color-background-accent-yellow-subtler`	`#f8e6a0ff`	`#533f04ff`
`--gstock-color-background-accent-yellow-subtler-hovered`	`#f5cd47ff`	`#e2b203ff`
`--gstock-color-background-accent-yellow-subtler-pressed`	`#e2b203ff`	`#b38600ff`

Token (Accent Yellow Subtlest)	Light	Dark
`--gstock-color-background-accent-yellow-subtlest`	`#fff7d6ff`	`#332e1bff`
`--gstock-color-background-accent-yellow-subtlest-hovered`	`#f8e6a0ff`	`#533f04ff`
`--gstock-color-background-accent-yellow-subtlest-pressed`	`#f5cd47ff`	`#e2b203ff`

Token (Brand Bold)	Light	Dark
`--gstock-color-background-brand-bold`	`#113356ff`	`#739fc4ff`
`--gstock-color-background-brand-bold-hovered`	`#17436aff`	`#a3c1d9ff`
`--gstock-color-background-brand-bold-pressed`	`#1f5380ff`	`#d9e3edff`

Token (Brand Boldest)	Light	Dark
`--gstock-color-background-brand-boldest`	`#1a334eff`	`#f0f4f8ff`
`--gstock-color-background-brand-boldest-hovered`	`#113356ff`	`#d9e3edff`
`--gstock-color-background-brand-boldest-pressed`	`#17436aff`	`#a3c1d9ff`

Token (Brand Subtlest)	Light	Dark
`--gstock-color-background-brand-subtlest`	`#f0f4f8ff`	`#1a334eff`
`--gstock-color-background-brand-subtlest-hovered`	`#d9e3edff`	`#113356ff`
`--gstock-color-background-brand-subtlest-pressed`	`#a3c1d9ff`	`#17436aff`

Token (Danger)	Light	Dark
`--gstock-color-background-danger`	`#ffecebff`	`#42221fff`
`--gstock-color-background-danger-hovered`	`#ffd5d2ff`	`#5d1f1aff`
`--gstock-color-background-danger-pressed`	`#fd9891ff`	`#ae2e24ff`

Token (Danger Bold)	Light	Dark
`--gstock-color-background-danger-bold`	`#c9372cff`	`#f87168ff`
`--gstock-color-background-danger-bold-hovered`	`#ae2e24ff`	`#fd9891ff`
`--gstock-color-background-danger-bold-pressed`	`#5d1f1aff`	`#ffd5d2ff`

Token (Disabled)	Light	Dark
`--gstock-color-background-disabled`	`#091e4208`	`#bcd6f00a`

Token (Discovery)	Light	Dark
`--gstock-color-background-discovery`	`#f3f0ffff`	`#352c63ff`
`--gstock-color-background-discovery-hovered`	`#dfd8fdff`	`#9f8fefff`
`--gstock-color-background-discovery-pressed`	`#b8acf6ff`	`#8270dbff`

Token (Discovery Bold)	Light	Dark
`--gstock-color-background-discovery-bold`	`#6e5dc6ff`	`#9f8fefff`
`--gstock-color-background-discovery-bold-hovered`	`#5e4db2ff`	`#b8acf6ff`
`--gstock-color-background-discovery-bold-pressed`	`#352c63ff`	`#dfd8fdff`

Token (Information)	Light	Dark
`--gstock-color-background-information`	`#e9f2ffff`	`#09326cff`
`--gstock-color-background-information-hovered`	`#cce0ffff`	`#09326cff`
`--gstock-color-background-information-pressed`	`#85b8ffff`	`#579dffff`

Token (Information Bold)	Light	Dark
`--gstock-color-background-information-bold`	`#0c66e4ff`	`#579dffff`
`--gstock-color-background-information-bold-hovered`	`#0055ccff`	`#85b8ffff`
`--gstock-color-background-information-bold-pressed`	`#09326cff`	`#cce0ffff`

Token (Input)	Light	Dark
`--gstock-color-background-input`	`#ffffffff`	`#22272bff`
`--gstock-color-background-input-hovered`	`#f7f8f9ff`	`#282e33ff`
`--gstock-color-background-input-pressed`	`#ffffffff`	`#22272bff`

Token (Inverse Subtle)	Light	Dark
`--gstock-color-background-inverse-subtle`	`#00000029`	`#ffffff29`
`--gstock-color-background-inverse-subtle-hovered`	`#0000003d`	`#ffffff3d`
`--gstock-color-background-inverse-subtle-pressed`	`#00000052`	`#ffffff52`

Token (Neutral)	Light	Dark
`--gstock-color-background-neutral`	`#091e420f`	`#a1bdd914`
`--gstock-color-background-neutral-hovered`	`#091e4224`	`#a6c5e229`
`--gstock-color-background-neutral-pressed`	`#091e424f`	`#bfdbf847`

Token (Neutral Bold)	Light	Dark
`--gstock-color-background-neutral-bold`	`#44546fff`	`#9fadbcff`
`--gstock-color-background-neutral-bold-hovered`	`#2c3e5dff`	`#b6c2cfff`
`--gstock-color-background-neutral-bold-pressed`	`#172b4dff`	`#c7d1dbff`

Token (Neutral Subtle)	Light	Dark
`--gstock-color-background-neutral-subtle`	`#00000000`	`#00000000`
`--gstock-color-background-neutral-subtle-hovered`	`#091e420f`	`#a1bdd914`
`--gstock-color-background-neutral-subtle-pressed`	`#091e4224`	`#a6c5e229`

Token (Selected)	Light	Dark
`--gstock-color-background-selected`	`#e9f2ffff`	`#1c2b41ff`
`--gstock-color-background-selected-hovered`	`#cce0ffff`	`#09326cff`
`--gstock-color-background-selected-pressed`	`#85b8ffff`	`#579dffff`

Token (Selected Bold)	Light	Dark
`--gstock-color-background-selected-bold`	`#0c66e4ff`	`#579dffff`
`--gstock-color-background-selected-bold-hovered`	`#0055ccff`	`#85b8ffff`
`--gstock-color-background-selected-bold-pressed`	`#09326cff`	`#cce0ffff`

Token (Success)	Light	Dark
`--gstock-color-background-success`	`#dcfff1ff`	`#1c3329ff`
`--gstock-color-background-success-hovered`	`#baf3dbff`	`#164b35ff`
`--gstock-color-background-success-pressed`	`#7ee2b8ff`	`#4bce97ff`

Token (Success Bold)	Light	Dark
`--gstock-color-background-success-bold`	`#1f845aff`	`#4bce97ff`
`--gstock-color-background-success-bold-hovered`	`#216e4eff`	`#7ee2b8ff`
`--gstock-color-background-success-bold-pressed`	`#164b35ff`	`#baf3dbff`

Token (Warning)	Light	Dark
`--gstock-color-background-warning`	`#fff7d6ff`	`#332e1bff`
`--gstock-color-background-warning-hovered`	`#f8e6a0ff`	`#533f04ff`
`--gstock-color-background-warning-pressed`	`#f5cd47ff`	`#e2b203ff`

Token (Warning Bold)	Light	Dark
`--gstock-color-background-warning-bold`	`#f5cd47ff`	`#e2b203ff`
`--gstock-color-background-warning-bold-hovered`	`#e2b203ff`	`#f5cd47ff`
`--gstock-color-background-warning-bold-pressed`	`#cf9f02ff`	`#f8e6a0ff`

Border

Token	Light	Dark
`--gstock-color-border`	`#091e4224`	`#a6c5e229`
`--gstock-color-border-accent-blue`	`#1d7afcff`	`#1d7afcff`
`--gstock-color-border-accent-gray`	`#758195ff`	`#738496ff`
`--gstock-color-border-accent-green`	`#22a06bff`	`#22a06bff`
`--gstock-color-border-accent-magenta`	`#cd519dff`	`#cd519dff`
`--gstock-color-border-accent-mint`	`#07a689ff`	`#07a689ff`
`--gstock-color-border-accent-navy`	`#2f6a94ff`	`#2f6a94ff`
`--gstock-color-border-accent-orange`	`#e56910ff`	`#e56910ff`
`--gstock-color-border-accent-purple`	`#8270dbff`	`#8270dbff`
`--gstock-color-border-accent-red`	`#e2483dff`	`#e2483dff`
`--gstock-color-border-accent-teal`	`#2898bdff`	`#2898bdff`
`--gstock-color-border-accent-yellow`	`#b38600ff`	`#b38600ff`
`--gstock-color-border-bold`	`#758195ff`	`#738496ff`
`--gstock-color-border-brand`	`#1f5380ff`	`#739fc4ff`
`--gstock-color-border-danger`	`#e2483dff`	`#e2483dff`
`--gstock-color-border-disabled`	`#091e420f`	`#a1bdd914`
`--gstock-color-border-discovery`	`#8270dbff`	`#8270dbff`
`--gstock-color-border-focused`	`#388bffff`	`#85b8ffff`
`--gstock-color-border-information`	`#1d7afcff`	`#1d7afcff`
`--gstock-color-border-input`	`#8590a2ff`	`#738496ff`
`--gstock-color-border-inverse`	`#ffffffff`	`#161a1dff`
`--gstock-color-border-selected`	`#0c66e4ff`	`#579dffff`
`--gstock-color-border-success`	`#22a06bff`	`#22a06bff`
`--gstock-color-border-warning`	`#e56910ff`	`#b38600ff`

Text

Token	Light	Dark
`--gstock-color-text`	`#172b4dff`	`#b6c2cfff`
`--gstock-color-text-accent-blue`	`#0055ccff`	`#85b8ffff`
`--gstock-color-text-accent-blue-bolder`	`#09326cff`	`#cce0ffff`
`--gstock-color-text-accent-gray`	`#44546fff`	`#9fadbcff`
`--gstock-color-text-accent-gray-bolder`	`#091e42ff`	`#dee4eaff`
`--gstock-color-text-accent-green`	`#216e4eff`	`#7ee2b8ff`
`--gstock-color-text-accent-green-bolder`	`#164b35ff`	`#baf3dbff`
`--gstock-color-text-accent-magenta`	`#943d73ff`	`#f797d2ff`
`--gstock-color-text-accent-magenta-bolder`	`#50253fff`	`#fdd0ecff`
`--gstock-color-text-accent-mint`	`#056b5aff`	`#9df3e6ff`
`--gstock-color-text-accent-mint-bolder`	`#044d41ff`	`#cef9f2ff`
`--gstock-color-text-accent-navy`	`#17436aff`	`#a3c1d9ff`
`--gstock-color-text-accent-navy-bolder`	`#113356ff`	`#d9e3edff`
`--gstock-color-text-accent-orange`	`#a54800ff`	`#fec195ff`
`--gstock-color-text-accent-orange-bolder`	`#702e00ff`	`#fedec8ff`
`--gstock-color-text-accent-purple`	`#5e4db2ff`	`#b8acf6ff`
`--gstock-color-text-accent-purple-bolder`	`#352c63ff`	`#dfd8fdff`
`--gstock-color-text-accent-red`	`#ae2e24ff`	`#fd9891ff`
`--gstock-color-text-accent-red-bolder`	`#5d1f1aff`	`#ffd5d2ff`
`--gstock-color-text-accent-teal`	`#206a83ff`	`#9dd9eeff`
`--gstock-color-text-accent-teal-bolder`	`#164555ff`	`#c6edfbff`
`--gstock-color-text-accent-yellow`	`#7f5f01ff`	`#f5cd47ff`
`--gstock-color-text-accent-yellow-bolder`	`#533f04ff`	`#f8e6a0ff`
`--gstock-color-text-brand`	`#1f5380ff`	`#739fc4ff`
`--gstock-color-text-danger`	`#ae2e24ff`	`#fd9891ff`
`--gstock-color-text-disabled`	`#091e424f`	`#bfdbf847`
`--gstock-color-text-discovery`	`#5e4db2ff`	`#b8acf6ff`
`--gstock-color-text-information`	`#0055ccff`	`#85b8ffff`
`--gstock-color-text-inverse`	`#ffffffff`	`#1d2125ff`
`--gstock-color-text-selected`	`#0c66e4ff`	`#579dffff`
`--gstock-color-text-subtle`	`#44546fff`	`#9fadbcff`
`--gstock-color-text-subtlest`	`#626f86ff`	`#8c9babff`
`--gstock-color-text-success`	`#216e4eff`	`#7ee2b8ff`
`--gstock-color-text-warning`	`#a54800ff`	`#f5cd47ff`
`--gstock-color-text-warning-inverse`	`#172b4dff`	`#1d2125ff`

Link

Token	Light	Dark
`--gstock-color-link`	`#0c66e4ff`	`#579dffff`
`--gstock-color-link-pressed`	`#0055ccff`	`#85b8ffff`
`--gstock-color-link-visited`	`#5e4db2ff`	`#b8acf6ff`
`--gstock-color-link-visited-pressed`	`#352c63ff`	`#dfd8fdff`

Icon

Token	Light	Dark
`--gstock-color-icon`	`#44546fff`	`#9fadbcff`
`--gstock-color-icon-accent-blue`	`#1d7afcff`	`#388bffff`
`--gstock-color-icon-accent-gray`	`#758195ff`	`#738496ff`
`--gstock-color-icon-accent-green`	`#22a06bff`	`#2abb7fff`
`--gstock-color-icon-accent-magenta`	`#cd519dff`	`#da62acff`
`--gstock-color-icon-accent-mint`	`#07a689ff`	`#08c7a8ff`
`--gstock-color-icon-accent-navy`	`#2f6a94ff`	`#4c82a8ff`
`--gstock-color-icon-accent-orange`	`#e56910ff`	`#f38a3fff`
`--gstock-color-icon-accent-purple`	`#8270dbff`	`#8f7ee7ff`
`--gstock-color-icon-accent-red`	`#c9372cff`	`#e2483dff`
`--gstock-color-icon-accent-teal`	`#2898bdff`	`#42b2d7ff`
`--gstock-color-icon-accent-yellow`	`#b38600ff`	`#f5cd47ff`
`--gstock-color-icon-brand`	`#1f5380ff`	`#739fc4ff`
`--gstock-color-icon-danger`	`#c9372cff`	`#f15b50ff`
`--gstock-color-icon-disabled`	`#091e424f`	`#bfdbf847`
`--gstock-color-icon-discovery`	`#8270dbff`	`#8f7ee7ff`
`--gstock-color-icon-information`	`#1d7afcff`	`#388bffff`
`--gstock-color-icon-inverse`	`#ffffffff`	`#1d2125ff`
`--gstock-color-icon-selected`	`#0c66e4ff`	`#579dffff`
`--gstock-color-icon-subtle`	`#626f86ff`	`#8c9babff`
`--gstock-color-icon-subtlest`	`#626f86ff`	`#8c9babff`
`--gstock-color-icon-success`	`#22a06bff`	`#2abb7fff`
`--gstock-color-icon-warning`	`#e56910ff`	`#f5cd47ff`
`--gstock-color-icon-warning-inverse`	`#172b4dff`	`#1d2125ff`

Blanket

Token	Light	Dark
`--gstock-color-blanket`	`#091e427d`	`#10121499`
`--gstock-color-blanket-danger`	`#ef5c4814`	`#e3493514`
`--gstock-color-blanket-selected`	`#388bff14`	`#1d7afc14`

Chart

Token	Light	Dark
`--gstock-color-chart-blue-bold`	`#388bffff`	`#1d7afcff`
`--gstock-color-chart-blue-bold-hovered`	`#1d7afcff`	`#388bffff`
`--gstock-color-chart-blue-bolder`	`#1d7afcff`	`#388bffff`
`--gstock-color-chart-blue-bolder-hovered`	`#0c66e4ff`	`#579dffff`
`--gstock-color-chart-blue-boldest`	`#0055ccff`	`#85b8ffff`
`--gstock-color-chart-blue-boldest-hovered`	`#09326cff`	`#cce0ffff`
`--gstock-color-chart-brand`	`#2f6a94ff`	`#4c82a8ff`
`--gstock-color-chart-brand-hovered`	`#1f5380ff`	`#739fc4ff`
`--gstock-color-chart-categorical-1`	`#2898bdff`	`#2898bdff`
`--gstock-color-chart-categorical-1-hovered`	`#227d9bff`	`#42b2d7ff`
`--gstock-color-chart-categorical-2`	`#5e4db2ff`	`#b8acf6ff`
`--gstock-color-chart-categorical-2-hovered`	`#352c63ff`	`#dfd8fdff`
`--gstock-color-chart-categorical-3`	`#e56910ff`	`#e56910ff`
`--gstock-color-chart-categorical-3-hovered`	`#c25100ff`	`#f38a3fff`
`--gstock-color-chart-categorical-4`	`#943d73ff`	`#f797d2ff`
`--gstock-color-chart-categorical-4-hovered`	`#50253fff`	`#fdd0ecff`
`--gstock-color-chart-categorical-5`	`#09326cff`	`#cce0ffff`
`--gstock-color-chart-categorical-5-hovered`	`#1c2b41ff`	`#e9f2ffff`
`--gstock-color-chart-categorical-6`	`#8f7ee7ff`	`#8270dbff`
`--gstock-color-chart-categorical-6-hovered`	`#8270dbff`	`#8f7ee7ff`
`--gstock-color-chart-categorical-7`	`#50253fff`	`#fdd0ecff`
`--gstock-color-chart-categorical-7-hovered`	`#3d2232ff`	`#ffecf8ff`
`--gstock-color-chart-categorical-8`	`#a54800ff`	`#fec195ff`
`--gstock-color-chart-categorical-8-hovered`	`#702e00ff`	`#fedec8ff`
`--gstock-color-chart-danger`	`#f15b50ff`	`#e2483dff`
`--gstock-color-chart-danger-bold`	`#ae2e24ff`	`#fd9891ff`
`--gstock-color-chart-danger-bold-hovered`	`#5d1f1aff`	`#ffd5d2ff`
`--gstock-color-chart-danger-hovered`	`#e2483dff`	`#f15b50ff`
`--gstock-color-chart-discovery`	`#8f7ee7ff`	`#8270dbff`
`--gstock-color-chart-discovery-bold`	`#5e4db2ff`	`#b8acf6ff`
`--gstock-color-chart-discovery-bold-hovered`	`#352c63ff`	`#dfd8fdff`
`--gstock-color-chart-discovery-hovered`	`#8270dbff`	`#8f7ee7ff`
`--gstock-color-chart-gray-bold`	`#8590a2ff`	`#738496ff`
`--gstock-color-chart-gray-bold-hovered`	`#758195ff`	`#8c9babff`
`--gstock-color-chart-gray-bolder`	`#758195ff`	`#8c9babff`
`--gstock-color-chart-gray-bolder-hovered`	`#626f86ff`	`#9fadbcff`
`--gstock-color-chart-gray-boldest`	`#44546fff`	`#9fadbcff`
`--gstock-color-chart-gray-boldest-hovered`	`#2c3e5dff`	`#b6c2cfff`
`--gstock-color-chart-green-bold`	`#22a06bff`	`#2abb7fff`
`--gstock-color-chart-green-bold-hovered`	`#1f845aff`	`#4bce97ff`
`--gstock-color-chart-green-bolder`	`#1f845aff`	`#4bce97ff`
`--gstock-color-chart-green-bolder-hovered`	`#216e4eff`	`#7ee2b8ff`
`--gstock-color-chart-green-boldest`	`#216e4eff`	`#7ee2b8ff`
`--gstock-color-chart-green-boldest-hovered`	`#164b35ff`	`#baf3dbff`
`--gstock-color-chart-information`	`#388bffff`	`#1d7afcff`
`--gstock-color-chart-information-bold`	`#0055ccff`	`#85b8ffff`
`--gstock-color-chart-information-bold-hovered`	`#09326cff`	`#cce0ffff`
`--gstock-color-chart-information-hovered`	`#1d7afcff`	`#388bffff`
`--gstock-color-chart-magenta-bold`	`#da62acff`	`#cd519dff`
`--gstock-color-chart-magenta-bold-hovered`	`#cd519dff`	`#da62acff`
`--gstock-color-chart-magenta-bolder`	`#cd519dff`	`#da62acff`
`--gstock-color-chart-magenta-bolder-hovered`	`#ae4787ff`	`#e774bbff`
`--gstock-color-chart-magenta-boldest`	`#943d73ff`	`#f797d2ff`
`--gstock-color-chart-magenta-boldest-hovered`	`#50253fff`	`#fdd0ecff`
`--gstock-color-chart-mint-bold`	`#07a689ff`	`#08c7a8ff`
`--gstock-color-chart-mint-bold-hovered`	`#068870ff`	`#09e1c0ff`
`--gstock-color-chart-mint-bolder`	`#068870ff`	`#09e1c0ff`
`--gstock-color-chart-mint-bolder-hovered`	`#056b5aff`	`#9df3e6ff`
`--gstock-color-chart-mint-boldest`	`#056b5aff`	`#9df3e6ff`
`--gstock-color-chart-mint-boldest-hovered`	`#044d41ff`	`#cef9f2ff`
`--gstock-color-chart-navy-bold`	`#2f6a94ff`	`#4c82a8ff`
`--gstock-color-chart-navy-bold-hovered`	`#1f5380ff`	`#739fc4ff`
`--gstock-color-chart-navy-bolder`	`#1f5380ff`	`#739fc4ff`
`--gstock-color-chart-navy-bolder-hovered`	`#17436aff`	`#a3c1d9ff`
`--gstock-color-chart-navy-boldest`	`#17436aff`	`#a3c1d9ff`
`--gstock-color-chart-navy-boldest-hovered`	`#113356ff`	`#d9e3edff`
`--gstock-color-chart-neutral`	`#8590a2ff`	`#738496ff`
`--gstock-color-chart-neutral-hovered`	`#758195ff`	`#8c9babff`
`--gstock-color-chart-orange-bold`	`#e56910ff`	`#f38a3fff`
`--gstock-color-chart-orange-bold-hovered`	`#c25100ff`	`#fea362ff`
`--gstock-color-chart-orange-bolder`	`#c25100ff`	`#fea362ff`
`--gstock-color-chart-orange-bolder-hovered`	`#a54800ff`	`#fec195ff`
`--gstock-color-chart-orange-boldest`	`#a54800ff`	`#fec195ff`
`--gstock-color-chart-orange-boldest-hovered`	`#702e00ff`	`#fedec8ff`
`--gstock-color-chart-purple-bold`	`#8f7ee7ff`	`#8270dbff`
`--gstock-color-chart-purple-bold-hovered`	`#8270dbff`	`#8f7ee7ff`
`--gstock-color-chart-purple-bolder`	`#8270dbff`	`#8f7ee7ff`
`--gstock-color-chart-purple-bolder-hovered`	`#6e5dc6ff`	`#9f8fefff`
`--gstock-color-chart-purple-boldest`	`#5e4db2ff`	`#b8acf6ff`
`--gstock-color-chart-purple-boldest-hovered`	`#352c63ff`	`#dfd8fdff`
`--gstock-color-chart-red-bold`	`#f15b50ff`	`#e2483dff`
`--gstock-color-chart-red-bold-hovered`	`#e2483dff`	`#f15b50ff`
`--gstock-color-chart-red-bolder`	`#e2483dff`	`#f15b50ff`
`--gstock-color-chart-red-bolder-hovered`	`#c9372cff`	`#f87168ff`
`--gstock-color-chart-red-boldest`	`#ae2e24ff`	`#fd9891ff`
`--gstock-color-chart-red-boldest-hovered`	`#5d1f1aff`	`#ffd5d2ff`
`--gstock-color-chart-success`	`#22a06bff`	`#2abb7fff`
`--gstock-color-chart-success-bold`	`#216e4eff`	`#7ee2b8ff`
`--gstock-color-chart-success-bold-hovered`	`#164b35ff`	`#baf3dbff`
`--gstock-color-chart-success-hovered`	`#1f845aff`	`#4bce97ff`
`--gstock-color-chart-teal-bold`	`#2898bdff`	`#42b2d7ff`
`--gstock-color-chart-teal-bold-hovered`	`#227d9bff`	`#6cc3e0ff`
`--gstock-color-chart-teal-bolder`	`#227d9bff`	`#6cc3e0ff`
`--gstock-color-chart-teal-bolder-hovered`	`#206a83ff`	`#9dd9eeff`
`--gstock-color-chart-teal-boldest`	`#206a83ff`	`#9dd9eeff`
`--gstock-color-chart-teal-boldest-hovered`	`#164555ff`	`#c6edfbff`
`--gstock-color-chart-warning`	`#b38600ff`	`#cf9f02ff`
`--gstock-color-chart-warning-bold`	`#7f5f01ff`	`#f5cd47ff`
`--gstock-color-chart-warning-bold-hovered`	`#533f04ff`	`#f8e6a0ff`
`--gstock-color-chart-warning-hovered`	`#946f00ff`	`#e2b203ff`
`--gstock-color-chart-yellow-bold`	`#b38600ff`	`#cf9f02ff`
`--gstock-color-chart-yellow-bold-hovered`	`#946f00ff`	`#e2b203ff`
`--gstock-color-chart-yellow-bolder`	`#946f00ff`	`#e2b203ff`
`--gstock-color-chart-yellow-bolder-hovered`	`#7f5f01ff`	`#f5cd47ff`
`--gstock-color-chart-yellow-boldest`	`#7f5f01ff`	`#f5cd47ff`
`--gstock-color-chart-yellow-boldest-hovered`	`#533f04ff`	`#f8e6a0ff`

Surface

Token	Light	Dark
`--gstock-color-surface`	`#ffffffff`	`#1f1f21ff`
`--gstock-color-surface-hovered`	`#f0f1f2ff`	`#242528ff`
`--gstock-color-surface-overlay`	`#ffffffff`	`#2b2c2fff`
`--gstock-color-surface-overlay-hovered`	`#f0f1f2ff`	`#303134ff`
`--gstock-color-surface-overlay-pressed`	`#dddee1ff`	`#3d3f43ff`
`--gstock-color-surface-pressed`	`#dddee1ff`	`#2b2c2fff`
`--gstock-color-surface-raised`	`#ffffffff`	`#242528ff`
`--gstock-color-surface-raised-hovered`	`#f0f1f2ff`	`#2b2c2fff`
`--gstock-color-surface-raised-pressed`	`#dddee1ff`	`#303134ff`
`--gstock-color-surface-sunken`	`#f8f8f8ff`	`#18191aff`

Skeleton

Token	Light	Dark
`--gstock-color-skeleton`	`#091e420f`	`#a1bdd914`
`--gstock-color-skeleton-subtle`	`#091e4208`	`#bcd6f00a`

Interaction

Token	Light	Dark
`--gstock-color-interaction-hovered`	`#00000029`	`#ffffff33`
`--gstock-color-interaction-pressed`	`#00000052`	`#ffffff5c`

Espaciado

Gap

Los tokens de gap definen las distancias entre elementos en layouts flexibles y grid.

Token and Description	REM	PX
`--gstock-space-gap-xs`	`0.125rem`	`2px`
`--gstock-space-gap-sm`	`0.25rem`	`4px`
`--gstock-space-gap-md`	`0.5rem`	`8px`
`--gstock-space-gap-lg`	`0.75rem`	`12px`
`--gstock-space-gap-xl`	`1rem`	`16px`
`--gstock-space-gap-2xl`	`1.5rem`	`24px`
`--gstock-space-gap-3xl`	`2rem`	`32px`

Margin

Los tokens de margin definen los espacios exteriores alrededor de elementos.

Block: Los tokens de margin block definen los espacios exteriores en el eje vertical (arriba y abajo).

Token and Description	REM	PX
`--gstock-space-margin-block-2xs`	`0.125rem`	`2px`
`--gstock-space-margin-block-xs`	`0.25rem`	`4px`
`--gstock-space-margin-block-sm`	`0.5rem`	`8px`
`--gstock-space-margin-block-md`	`1rem`	`16px`
`--gstock-space-margin-block-lg`	`1.5rem`	`24px`
`--gstock-space-margin-block-xl`	`2rem`	`32px`
`--gstock-space-margin-block-2xl`	`2.5rem`	`40px`
`--gstock-space-margin-block-3xl`	`3rem`	`48px`

Inline: Los tokens de margin inline definen los espacios exteriores en el eje horizontal (izquierda y derecha).

Token and Description	REM	PX
`--gstock-space-margin-inline-2xs`	`0.125rem`	`2px`
`--gstock-space-margin-inline-xs`	`0.25rem`	`4px`
`--gstock-space-margin-inline-sm`	`0.5rem`	`8px`
`--gstock-space-margin-inline-md`	`1rem`	`16px`
`--gstock-space-margin-inline-lg`	`1.5rem`	`24px`
`--gstock-space-margin-inline-xl`	`2rem`	`32px`
`--gstock-space-margin-inline-2xl`	`2.5rem`	`40px`
`--gstock-space-margin-inline-3xl`	`3rem`	`48px`

Padding

Los tokens de padding definen los espacios interiores dentro de elementos.

Block: Los tokens de padding block definen los espacios interiores en el eje vertical (arriba y abajo).

Token and Description	REM	PX
`--gstock-space-padding-block-2xs`	`0.125rem`	`2px`
`--gstock-space-padding-block-xs`	`0.25rem`	`4px`
`--gstock-space-padding-block-sm`	`0.375rem`	`6px`
`--gstock-space-padding-block-md`	`0.5rem`	`8px`
`--gstock-space-padding-block-lg`	`0.75rem`	`12px`
`--gstock-space-padding-block-xl`	`1rem`	`16px`
`--gstock-space-padding-block-2xl`	`1.5rem`	`24px`

Inline: Los tokens de padding inline definen los espacios interiores en el eje horizontal (izquierda y derecha).

Token and Description	REM	PX
`--gstock-space-padding-inline-2xs`	`0.125rem`	`2px`
`--gstock-space-padding-inline-xs`	`0.25rem`	`4px`
`--gstock-space-padding-inline-sm`	`0.5rem`	`8px`
`--gstock-space-padding-inline-md`	`0.75rem`	`12px`
`--gstock-space-padding-inline-lg`	`1rem`	`16px`
`--gstock-space-padding-inline-xl`	`1.5rem`	`24px`
`--gstock-space-padding-inline-2xl`	`2rem`	`32px`

Tipografía

Los tokens de tipografía definen las propiedades de texto organizadas por contexto de uso y propiedades específicas.

Heading

Los tokens de heading definen estilos tipográficos para títulos y encabezados.

Token and Description	Valor	Preview
`--gstock-typography-font-heading-2xl`	`700 2.125rem/1.1 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Heading
`--gstock-typography-font-heading-xl`	`700 1.875rem/1.1 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Heading
`--gstock-typography-font-heading-lg`	`700 1.75rem/1.2 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Heading
`--gstock-typography-font-heading-md`	`600 1.625rem/1.25 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Heading
`--gstock-typography-font-heading-sm`	`600 1.5rem/1.3 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Heading
`--gstock-typography-font-heading-xs`	`600 1.375rem/1.3 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Heading
`--gstock-typography-font-heading-2xs`	`600 1.25rem/1.4 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Heading

Body

Los tokens de body definen estilos tipográficos para texto de contenido.

Token and Description	Valor	Preview
`--gstock-typography-font-body`	`400 1rem/1.5 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Body
`--gstock-typography-font-body-sm`	`400 0.875rem/1.4 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Body
`--gstock-typography-font-body-lg`	`400 1.125rem/1.5 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Body

Metric

Los tokens de metric definen estilos tipográficos para datos y métricas.

Token and Description	Valor	Preview
`--gstock-typography-font-metric-lg`	`600 1.375rem/1.1 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Metric
`--gstock-typography-font-metric-md`	`600 1.25rem/1.2 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Metric
`--gstock-typography-font-metric-sm`	`500 1.125rem/1.3 'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Metric

Code

Los tokens de code definen estilos tipográficos para código y elementos monoespaciados.

Token and Description	Valor	Preview
`--gstock-typography-font-code`	`400 0.875rem/1.4 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Consolas', 'Courier New', monospace`	code()

Family

Los tokens de family definen las familias tipográficas utilizadas en el sistema.

Token and Description	Valor	Preview
`--gstock-typography-font-family-body`	`'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Font Family
`--gstock-typography-font-family-brand`	`'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Font Family
`--gstock-typography-font-family-code`	`'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Consolas', 'Courier New', monospace`	Font Family
`--gstock-typography-font-family-heading`	`'Euclid Circular B', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif`	Font Family

Size

Los tokens de size definen los tamaños de fuente base del sistema.

Token and Description	REM	PX	Preview
`--gstock-typography-font-size-xs`	`0.75rem`	`12px`	Aa
`--gstock-typography-font-size-sm`	`0.875rem`	`14px`	Aa
`--gstock-typography-font-size-md`	`1rem`	`16px`	Aa
`--gstock-typography-font-size-lg`	`1.125rem`	`18px`	Aa
`--gstock-typography-font-size-xl`	`1.25rem`	`20px`	Aa
`--gstock-typography-font-size-2xl`	`1.5rem`	`24px`	Aa
`--gstock-typography-font-size-3xl`	`1.875rem`	`30px`	Aa
`--gstock-typography-font-size-4xl`	`2.125rem`	`34px`	Aa

Weight

Los tokens de weight definen los pesos de fuente disponibles.

Token and Description	Valor	Preview
`--gstock-typography-font-weight-regular`	`400`	Text
`--gstock-typography-font-weight-medium`	`500`	Text
`--gstock-typography-font-weight-semibold`	`600`	Text
`--gstock-typography-font-weight-bold`	`700`	Text

Border

Los tokens de border definen las propiedades de borde para elementos de la interfaz.

Width

Los tokens de border width definen los grosores de borde para elementos de la interfaz.

Token and Description	REM	PX
`--gstock-border-width`	`0.0625rem`	`1px`
`--gstock-border-width-selected`	`0.125rem`	`2px`
`--gstock-border-width-focused`	`0.125rem`	`2px`

Radius

Define and standardize the corner roundness for visual elements.

Token and Description	REM	PX
`--gstock-border-radius-xs`	`0.125rem`	`2px`
`--gstock-border-radius-sm`	`0.25rem`	`4px`
`--gstock-border-radius-md`	`0.375rem`	`6px`
`--gstock-border-radius-lg`	`0.5rem`	`8px`
`--gstock-border-radius-xl`	`0.75rem`	`12px`
`--gstock-border-radius-2xl`	`1rem`	`16px`
`--gstock-border-radius-full`	`624.9375rem`	`9999px`

Elevación

Los tokens de elevación definen las sombras y efectos de profundidad utilizados en la interfaz.

Surface

Token	Light	Dark
`--gstock-elevation-surface`	`#ffffffff`	`#1d2125ff`
`--gstock-elevation-surface-hovered`	`#f1f2f4ff`	`#22272bff`
`--gstock-elevation-surface-overlay`	`#ffffffff`	`#282e33ff`
`--gstock-elevation-surface-overlay-hovered`	`#f1f2f4ff`	`#2c333aff`
`--gstock-elevation-surface-overlay-pressed`	`#dcdfe4ff`	`#38414aff`
`--gstock-elevation-surface-pressed`	`#dcdfe4ff`	`#282e33ff`
`--gstock-elevation-surface-raised`	`#ffffffff`	`#22272bff`
`--gstock-elevation-surface-raised-hovered`	`#f1f2f4ff`	`#282e33ff`
`--gstock-elevation-surface-raised-pressed`	`#dcdfe4ff`	`#2c333aff`
`--gstock-elevation-surface-sunken`	`#f7f8f9ff`	`#161a1dff`

Shadow

Token	Light	Dark
`--gstock-elevation-shadow-overflow`	`0 0 0 #091e42, 0 0 0 #091e42`	`0 0 0 #030404, 0 0 0 #030404`
`--gstock-elevation-shadow-overflow-perimeter`	`#091e421f`	`#03040480`
`--gstock-elevation-shadow-overflow-spread`	`#091e4229`	`#0304048f`
`--gstock-elevation-shadow-overlay`	`0 0 0 #091e42, 0 0 0 #091e42`	`0 0 0 1px #39424a, 0 0 0 #03040442, 0 0 0 1px #03040442`
`--gstock-elevation-shadow-raised`	`0 0 0 #091e42, 0 0 0 #091e42`	`0 0 0 1px #000000, 0 0 0 #03040442, 0 0 0 #03040442`

Tamaño

Tokens de tamaño para dimensiones, anchos, altos, etc.

Height

Tokens de altura para elementos de la interfaz.

Token and Description	REM	PX
`--gstock-size-height-2xs`	`1rem`	`16px`
`--gstock-size-height-xs`	`1.25rem`	`20px`
`--gstock-size-height-sm`	`1.75rem`	`28px`
`--gstock-size-height-md`	`2.25rem`	`36px`
`--gstock-size-height-lg`	`2.75rem`	`44px`
`--gstock-size-height-xl`	`3.25rem`	`52px`
`--gstock-size-height-2xl`	`3.75rem`	`60px`
`--gstock-size-height-3xl`	`3.75rem`	`60px`
`--gstock-size-height-4xl`	`4.25rem`	`68px`
`--gstock-size-height-5xl`	`4.75rem`	`76px`
`--gstock-size-height-6xl`	`5.25rem`	`84px`
`--gstock-size-height-7xl`	`5.75rem`	`92px`

Icon

Tokens de tamaño para iconos y elementos gráficos.

Token and Description	REM	PX
`--gstock-size-icon-xs`	`0.75rem`	`12px`
`--gstock-size-icon-sm`	`1rem`	`16px`
`--gstock-size-icon-md`	`1.25rem`	`20px`
`--gstock-size-icon-lg`	`1.5rem`	`24px`
`--gstock-size-icon-xl`	`2rem`	`32px`
`--gstock-size-icon-2xl`	`3.5rem`	`56px`
`--gstock-size-icon-3xl`	`5rem`	`80px`

Movimiento

Tokens de transición y motion para animaciones y efectos.

Token and Description	Valor
`--gstock-transition-duration-instant`	`0ms`
`--gstock-transition-easing-linear`	`linear`
`--gstock-transition-easing-ease`	`ease`
`--gstock-transition-easing-ease-in`	`ease-in`
`--gstock-transition-easing-ease-out`	`ease-out`
`--gstock-transition-easing-ease-in-out`	`ease-in-out`
`--gstock-transition-easing-standard`	`cubic-bezier(0.4, 0, 0.2, 1)`
`--gstock-transition-easing-decelerated`	`cubic-bezier(0, 0, 0.2, 1)`
`--gstock-transition-easing-accelerated`	`cubic-bezier(0.4, 0, 1, 1)`
`--gstock-transition-easing-emphasized`	`cubic-bezier(0.2, 0, 0, 1)`
`--gstock-transition-duration-x-fast`	`50ms`
`--gstock-transition-duration-fast`	`150ms`
`--gstock-transition-duration-normal`	`250ms`
`--gstock-transition-duration-medium`	`350ms`
`--gstock-transition-duration-slow`	`500ms`
`--gstock-transition-duration-x-slow`	`750ms`
`--gstock-transition-duration-deliberate`	`1000ms`