Style Guide

Internal UI reference — Nuxt UI components + tokens

Playground Controls

Adjust these to see changes in Button and Input examples below.

Tokens & Palette

Core design tokens used throughout the portfolio.

Charcoal BG#0f0f10
Off-white Text#f2f2f2
Brand Orange#FF7300
Orange Secondary#FB9A49
Gold/Amber#FFC252
Blue#4D66DF
Grey#4D4D4D
Amethyst#9D91E9
Glass BGrgba(255,255,255,0.06)
Glass Borderrgba(255,255,255,0.08)

Nuxt UI Colour Scales

Semantic colour tokens resolved by Nuxt UI.

primary--ui-color-primary-500
secondary--ui-color-secondary-500
success--ui-color-success-500
info--ui-color-info-500
warning--ui-color-warning-500
error--ui-color-error-500
neutral--ui-color-neutral-500

Buttons

UButton with playground-controlled props.

All Variants × All Colors

primary
secondary
success
info
warning
error
neutral

Sizes

States

Links

NuxtLink styled as buttons.

Home LinkWork Link External Link

Inputs

UInput and UTextarea with playground-controlled props.

Textarea

Selects

USelect and USelectMenu components.

SelectMenu

Toggles

USwitch, UCheckbox, and URadio components.

Badges

UBadge with various colors and variants.

PrimarySecondarySuccessWarningErrorNeutral
SolidOutlineSoftSubtle

Alerts

UAlert for notifications and messages.

Info alert
This is an informational message.
Success alert
Operation completed successfully.
Warning alert
Please review before proceeding.
Error alert
Something went wrong.

Cards

UCard with header, body, and footer slots.

Card Title

This is the card body content. Cards are useful for grouping related information.

Simple card without header or footer. Just body content.

Tabs

UTabs for tabbed navigation.

Accordion

UAccordion for collapsible content.

Modal

UModal triggered by button.

Dropdown / Popover / Tooltip

UDropdownMenu, UPopover, and UTooltip components.

Table

UTable with dummy data.

IDNameRoleStatus
1AliceDesignerActive
2BobDeveloperActive
3CharlieManagerAway

Avatar

UAvatar with initials and sizes.

RGRGRGRGRG