Skip to content
txbrendan/ui

Theme

Pick one brand color. You get a light and a dark theme, checked against the same 81 contrast pairs as ours. Then copy the CSS.

To pick corners and pill shapes too, and get one command for your agent, set up your agent.

Use hex, rgb(), hsl(), oklch(), or a color name.

Checked: all 81 contrast pairs pass in light and dark, and every color fits in sRGB.

light

button · solid

button · soft

button · outline

button · ghost

badge · solid and soft

NeutralBrandDangerSuccessWarning
NeutralBrandDangerSuccessWarning

alert

Try the new editor
It saves as you type, so you never lose a draft.

notice · danger, warning, success, and brand

Declined. The card on file has expired.
Due at 14:40. Later matches on Pitch 3 move with it.
Paid. The receipt went to the email on file.
New. Replies now show who read them.

tabs · solid and ghost

card · label · input · select · textarea · checkbox · switch · separator

Invite your team
They get an email with a link to join.

combobox · calendar

October 2026
SunMonTueWedThuFriSat
123
45678910
11121314151617
18192021222324
25262728293031

popover · menu

dialog · alert dialog · tooltip · toast

Delete this project?

You cannot undo it.

CancelDelete

Discard changes?

Your edits will be lost.

KeepDiscard
Italic

Archived Tuesday training

Undo

Reminder not sent

Check your connection.

Retry

selection card · one answer and several

inline edit · radio group · slider · progress · spinner · kbd

Owner
Place
Volume
60
Uploading
x
LoadingCtrl+K

breadcrumb · accordion · table · pagination

Yes, within 30 days.

InvoiceAmount
INV-001$250.00

skeleton

choice poll · feature voting · step dots

Best day for practice?
  • MondayYour vote12 votes67%
  • Wednesday6 votes33%
18 votes
  • Dark mode
    Planned
  • CSV export
  1. Step 1 of 4: Account, done
  2. Step 2 of 4: Profile, current
  3. Step 3 of 4: Team, upcoming
  4. Step 4 of 4: Invite, upcoming

chart · donut · bar · line · area · beeswarm

  • Chrome275
  • Safari200
  • Firefox187
  • Edge173
  • Other90

  • Desktop
  • Mobile

  • Desktop
  • Mobile

  • Desktop
  • Mobile

  • Mobile
  • Desktop

Visitors could not load.

Visitors could not load.

sparkline

avatar · avatar stack · hover card · peek card · peek person · peek spread · person · status text

Ask about kit.

Josh Tait

Hooker · 1st XV

Josh Tait

Injured

Hooker · 1st XV

Back
Sat 17 Oct

Tuesday training

18:30 · Back pitch

Plan

70 min

  1. Warm-up15 min
  2. Lineouts30 min
  3. Game25 min
Josh TaitHooker · 1st XVRuth GalePhysio
GoingMaybeCouldn’t saveNo reply

action keys · bulk bar · hover actions · response button · row actions · suggestion · tool button

RE
Tom Hale

code field · icon color picker · date picker · field frame · number stepper · search field · time field · token field · unit switch

Icon color

Follows the original color.

Match date

From 1 to 99.

seats
3 players
1 h 30 min
dan.kerr@mail.comtom.hale@, not a valid email address

breakdown list · form guide · funnel chart · heat calendar · period picker · qr code · ring progress · rolling number

Fees collected
  • Under 12s: 92%
  • Under 14s: 81%
  • Under 16s: 64%

WWLDW
Joining
  1. Started a form: 64
  2. Paid: 51, 80% of the first step13 stopped before this step
  3. First session: 46, 72% of the first step5 stopped before this step

Arrow keys move a day or a week. Enter marks the start of a span, and again its end. Escape clears it.

Aug 1 to Sep 29

1,284

back link · section header · sheet · smart pick · motion · stagger · timeline · zoom pan

Members

Members 42

Invite members

Who kicked?

Sam Lee
Ava Patel
U10s
U12s
U14s
U16s
Women
Men

  1. Sam moved training to Pitch 3

    18:20

  2. Ava added 4 players

    17:05

  3. Fees are due Friday

    Mon
Riverside 24–7Millbrook 15–12Final
Drag or use the arrow keys to move. Plus and minus zoom, and 0 fits it all in view.

champion card · command menu · icon · solid icon · no access · position slot · shirt number · spot icon · team flag

Harbour Town

Champion
FixturesThis season
FeesAdmins only

Harbour Town

Sam Carter owns this

They get an email.

Noah Kerr10 · Fly-half
Not picked6 · Blindside flanker
9 Sam Carter10 Noah Kerr
FixturesEvery match this season
Riverside RFC Harbour Town

data table · hub link · leaderboard · list row · receipt · standings · status strip · sync status

PlayerCaps
Tom Hale42
Mia Okafor31
Fixtures Next: Sat 3 Oct
#PlayerTries
1Mia Okafor9
2Tom Hale7
Your place
3You, Cal Nash4
Sat3 OctHarbour TownHome · 15:00
Sat10 OctRiversideAway · 14:30

October membershipPaid

  • Senior membership£15

Total£15

Method
Visa ending 4242
PlaceTeamPlayedWonDrawnLostPoints differenceBonus pointsPoints
Harbour Town10802+96638
2You, Riverside10613+41531
3Northfield10118−12028
Fees
£15
Paid
18 of 22
Due
Fri 2 Oct
Saved at 18:04Offline · 2 changes will send when you're back onlineCouldn't save · No signal

audience · composer · editor · inline reply · lightbox · media grid · media image · message row

Goes to , Juniors' parents get it instead

Goes to Josh Tait

Newsletter

Kit day is Tuesday at 6. Bring boots.

Enter sends. Shift+Enter starts a new line. Esc cancels.

U14s vs Harbour Town

1 of 1

With Josh Tait and Ella Clarke

Face blurred
Anna Price18:02

Training moves to Pitch 3 on Wednesday.

Josh Tait18:05

Got it, thanks.

access list · call to action · club switcher · notifications · rail · read by · scene · scroll progress · share link

  • Sam CarterHead coachOwner
  • Kate ClarkeCaptain

Invite your coaches

Notifications

Training moves to the back pitch on Thursday.

A guide to getting started

Explore the essentials.

Next steps

View only

agreement · card field · choice chips · file drop · file row · photo field · repeat field · scale question

Club rules

Read them before your first session.
Card
Visa
Days

Drop a file here or

CSV · up to 10 MB

Members 2026.csvUploaded

412 KB · 214 rows

Members 2026.csv uploaded

Your photo

Repeats
On
Until

Every Tue and Thu, 19:00 to 20:30, until Sat 15 May 2027 · 64 sessions

Sleep

bracket match · finals board · knockout bracket · knockout wheel · match card

Cup bracket
Semi-final 1Pitch 1 · 13:00Riverside RFC won.
Riverside RFCHarbour Town
Semi-final 2Pitch 2 · 13:00
Old MillersSt Brendan's
Cup finalPitch 1 · 14:30
Riverside RFC
Semi-final 2 winner

Champion to be decided

Day control
Pitch 1
  • Semi-final 113:00 to 13:40
  • Cup final14:30 to 15:10
Pitch 2
  • Semi-final 213:00 to 13:40

Moves each match on Pitch 1 with no result 15 min later.

Semi-finals
  1. FTRiverside RFC24Harbour Town17 Riverside RFC won.
  2. FTOld Millers7St Brendan's13 St Brendan's won.
Final
  1. Sat 24 Oct · 15:00Riverside RFCSt Brendan's

Arrow keys move between teams: up toward the champion, down to the round before, and left and right around a ring. Enter keeps a team's run lit.

Champion: Riverside RFC.

15:00 · Pitch 1FTRiverside RFC24Harbour Town17 Riverside RFC won.

check in code · duty slot · match clock · reorder list · suspension row · time grid

Scan with your phone camera to check in

TeasHalf-time and afterSue Hale

Second half

Time off

15s

50:00

Full time at 80 min

  1. Warm-up15 min
  2. Lineouts30 min
  3. Game25 min
#3Owen PriceBack in 4:00Riverside RFC · Yellow card at 46:30
Pitch 1
Pitch 2
Training, U10s, 09:00–10:30, Pitch 1
Match, U14 v Bath, 09:30–11:00, Pitch 2

approval request · context window · shimmer · thinking state · tool call card

Run migration 0042 on production?

npm run db:migrate -- --to 0042

Context window

167.2Kof 200K tokens
  • System prompt: 4.2K
  • Files: 31K
  • Chat: 132K
Almost full · 32.8K tokens left
Thinking

  1. Read 12 files

  2. Ran the tests (working)

Ran the tests
read_file: Done
edit_file: Done
run_tests: Running

consensus meter · estimate chart · price chart

Buy12 ratings
  • 1Bearish
  • 3Neutral
  • 8Bullish
  1. $240Low
  2. $312Average
  3. $281Current
  4. $360High

Average $312, +11% from current $281. Low $240, -14.6%. High $360, +28.1%.

panel switch · slideshow

Three items are open

One is due this week.

Lake at first light

board · gantt chart

Wireframes
Help center
Payments page
Name
Oct 12 – Nov 8, today Oct 22
In progress 3
Help center
Oct 12 – Oct 24, 60% done
Payments page
Oct 19 – Nov 1, 30% done
Wireframes
Oct 26 – Nov 6, 0% done

button variants

See pricingOpen report

tokens

Focus ringMutedAccent

dark

button · solid

button · soft

button · outline

button · ghost

badge · solid and soft

NeutralBrandDangerSuccessWarning
NeutralBrandDangerSuccessWarning

alert

Try the new editor
It saves as you type, so you never lose a draft.

notice · danger, warning, success, and brand

Declined. The card on file has expired.
Due at 14:40. Later matches on Pitch 3 move with it.
Paid. The receipt went to the email on file.
New. Replies now show who read them.

tabs · solid and ghost

card · label · input · select · textarea · checkbox · switch · separator

Invite your team
They get an email with a link to join.

combobox · calendar

October 2026
SunMonTueWedThuFriSat
123
45678910
11121314151617
18192021222324
25262728293031

popover · menu

dialog · alert dialog · tooltip · toast

Delete this project?

You cannot undo it.

CancelDelete

Discard changes?

Your edits will be lost.

KeepDiscard
Italic

Archived Tuesday training

Undo

Reminder not sent

Check your connection.

Retry

selection card · one answer and several

inline edit · radio group · slider · progress · spinner · kbd

Owner
Place
Volume
60
Uploading
x
LoadingCtrl+K

breadcrumb · accordion · table · pagination

Three to five days.
InvoiceAmount
INV-001$250.00

skeleton

choice poll · feature voting · step dots

Best day for practice?
  • MondayYour vote12 votes67%
  • Wednesday6 votes33%
18 votes
  • Dark mode
    Planned
  • CSV export
  1. Step 1 of 4: Account, done
  2. Step 2 of 4: Profile, current
  3. Step 3 of 4: Team, upcoming
  4. Step 4 of 4: Invite, upcoming

chart · donut · bar · line · area · beeswarm

  • Chrome275
  • Safari200
  • Firefox187
  • Edge173
  • Other90

  • Desktop
  • Mobile

  • Desktop
  • Mobile

  • Desktop
  • Mobile

  • Mobile
  • Desktop

Visitors could not load.

Visitors could not load.

sparkline

avatar · avatar stack · hover card · peek card · peek person · peek spread · person · status text

Ask about kit.

Josh Tait

Hooker · 1st XV

Josh Tait

Injured

Hooker · 1st XV

Back
Sat 17 Oct

Tuesday training

18:30 · Back pitch

Plan

70 min

  1. Warm-up15 min
  2. Lineouts30 min
  3. Game25 min
Josh TaitHooker · 1st XVRuth GalePhysio
GoingMaybeCouldn’t saveNo reply

action keys · bulk bar · hover actions · response button · row actions · suggestion · tool button

RE
Tom Hale

code field · icon color picker · date picker · field frame · number stepper · search field · time field · token field · unit switch

Icon color

Follows the original color.

Match date

From 1 to 99.

seats
3 players
1 h 30 min
dan.kerr@mail.comtom.hale@, not a valid email address

breakdown list · form guide · funnel chart · heat calendar · period picker · qr code · ring progress · rolling number

Fees collected
  • Under 12s: 92%
  • Under 14s: 81%
  • Under 16s: 64%

WWLDW
Joining
  1. Started a form: 64
  2. Paid: 51, 80% of the first step13 stopped before this step
  3. First session: 46, 72% of the first step5 stopped before this step

Arrow keys move a day or a week. Enter marks the start of a span, and again its end. Escape clears it.

Aug 1 to Sep 29

1,284

back link · section header · sheet · smart pick · motion · stagger · timeline · zoom pan

Members

Members 42

Invite members

Who kicked?

Sam Lee
Ava Patel
U10s
U12s
U14s
U16s
Women
Men

  1. Sam moved training to Pitch 3

    18:20

  2. Ava added 4 players

    17:05

  3. Fees are due Friday

    Mon
Riverside 24–7Millbrook 15–12Final
Drag or use the arrow keys to move. Plus and minus zoom, and 0 fits it all in view.

champion card · command menu · icon · solid icon · no access · position slot · shirt number · spot icon · team flag

Harbour Town

Champion
FixturesThis season
FeesAdmins only

Harbour Town

Sam Carter owns this

They get an email.

Noah Kerr10 · Fly-half
Not picked6 · Blindside flanker
9 Sam Carter10 Noah Kerr
FixturesEvery match this season
Riverside RFC Harbour Town

data table · hub link · leaderboard · list row · receipt · standings · status strip · sync status

PlayerCaps
Tom Hale42
Mia Okafor31
Fixtures Next: Sat 3 Oct
#PlayerTries
1Mia Okafor9
2Tom Hale7
Your place
3You, Cal Nash4
Sat3 OctHarbour TownHome · 15:00
Sat10 OctRiversideAway · 14:30

October membershipPaid

  • Senior membership£15

Total£15

Method
Visa ending 4242
PlaceTeamPlayedWonDrawnLostPoints differenceBonus pointsPoints
Harbour Town10802+96638
2You, Riverside10613+41531
3Northfield10118−12028
Fees
£15
Paid
18 of 22
Due
Fri 2 Oct
Saved at 18:04Offline · 2 changes will send when you're back onlineCouldn't save · No signal

audience · composer · editor · inline reply · lightbox · media grid · media image · message row

Goes to , Juniors' parents get it instead

Goes to Josh Tait

Newsletter

Kit day is Tuesday at 6. Bring boots.

Enter sends. Shift+Enter starts a new line. Esc cancels.

U14s vs Harbour Town

1 of 1

With Josh Tait and Ella Clarke

Face blurred
Anna Price18:02

Training moves to Pitch 3 on Wednesday.

Josh Tait18:05

Got it, thanks.

access list · call to action · club switcher · notifications · rail · read by · scene · scroll progress · share link

  • Sam CarterHead coachOwner
  • Kate ClarkeCaptain

Invite your coaches

Notifications

Training moves to the back pitch on Thursday.

A guide to getting started

Explore the essentials.

Next steps

View only

agreement · card field · choice chips · file drop · file row · photo field · repeat field · scale question

Club rules

Read them before your first session.
Card
Visa
Days

Drop a file here or

CSV · up to 10 MB

Members 2026.csvUploaded

412 KB · 214 rows

Members 2026.csv uploaded

Your photo

Repeats
On
Until

Every Tue and Thu, 19:00 to 20:30, until Sat 15 May 2027 · 64 sessions

Sleep

bracket match · finals board · knockout bracket · knockout wheel · match card

Cup bracket
Semi-final 1Pitch 1 · 13:00Riverside RFC won.
Riverside RFCHarbour Town
Semi-final 2Pitch 2 · 13:00
Old MillersSt Brendan's
Cup finalPitch 1 · 14:30
Riverside RFC
Semi-final 2 winner

Champion to be decided

Day control
Pitch 1
  • Semi-final 113:00 to 13:40
  • Cup final14:30 to 15:10
Pitch 2
  • Semi-final 213:00 to 13:40

Moves each match on Pitch 1 with no result 15 min later.

Semi-finals
  1. FTRiverside RFC24Harbour Town17 Riverside RFC won.
  2. FTOld Millers7St Brendan's13 St Brendan's won.
Final
  1. Sat 24 Oct · 15:00Riverside RFCSt Brendan's

Arrow keys move between teams: up toward the champion, down to the round before, and left and right around a ring. Enter keeps a team's run lit.

Champion: Riverside RFC.

15:00 · Pitch 1FTRiverside RFC24Harbour Town17 Riverside RFC won.

check in code · duty slot · match clock · reorder list · suspension row · time grid

Scan with your phone camera to check in

TeasHalf-time and afterSue Hale

Second half

Time off

15s

50:00

Full time at 80 min

  1. Warm-up15 min
  2. Lineouts30 min
  3. Game25 min
#3Owen PriceBack in 4:00Riverside RFC · Yellow card at 46:30
Pitch 1
Pitch 2
Training, U10s, 09:00–10:30, Pitch 1
Match, U14 v Bath, 09:30–11:00, Pitch 2

approval request · context window · shimmer · thinking state · tool call card

Run migration 0042 on production?

npm run db:migrate -- --to 0042

Context window

167.2Kof 200K tokens
  • System prompt: 4.2K
  • Files: 31K
  • Chat: 132K
Almost full · 32.8K tokens left
Thinking

  1. Read 12 files

  2. Ran the tests (working)

Ran the tests
read_file: Done
edit_file: Done
run_tests: Running

consensus meter · estimate chart · price chart

Buy12 ratings
  • 1Bearish
  • 3Neutral
  • 8Bullish
  1. $240Low
  2. $312Average
  3. $281Current
  4. $360High

Average $312, +11% from current $281. Low $240, -14.6%. High $360, +28.1%.

panel switch · slideshow

Three items are open

One is due this week.

Lake at first light

board · gantt chart

Wireframes
Help center
Payments page
Name
Oct 12 – Nov 8, today Oct 22
In progress 3
Help center
Oct 12 – Oct 24, 60% done
Payments page
Oct 19 – Nov 1, 30% done
Wireframes
Oct 26 – Nov 6, 0% done

button variants

See pricingOpen report

tokens

Focus ringMutedAccent

Texture

Dither draws charts, meters, buttons, and photos as dots, with a glow on dark pages. An app turns it on everywhere with one class on its body.

CSS

Paste these values over the color tokens in your :root and .dark blocks.

:root {
  --radius: 0.875rem;

  /* Surfaces and text */
  --background: oklch(0.982 0 0);
  --foreground: oklch(0.163 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.208 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.208 0 0);
  --muted: oklch(0.952 0 0);
  --muted-foreground: oklch(0.502 0 0);
  --accent: oklch(0.955 0 0);
  --accent-foreground: oklch(0.208 0 0);
  --secondary: oklch(0.952 0 0);
  --secondary-foreground: oklch(0.208 0 0);

  /* Tones: solid, text on solid, solid on hover, soft, text on soft */
  --neutral: oklch(0.208 0 0);
  --neutral-foreground: oklch(0.99 0 0);
  --neutral-hover: oklch(0.3 0 0);
  --primary: oklch(0.542 0.212 266);
  --primary-foreground: oklch(0.99 0 0);
  --primary-hover: oklch(0.517 0.199 266);
  --primary-soft: oklch(0.957 0.02 266);
  --primary-soft-foreground: oklch(0.469 0.182 266);
  --destructive: oklch(0.57 0.2 24);
  --destructive-foreground: oklch(0.99 0 0);
  --destructive-hover: oklch(0.545 0.19 24);
  --destructive-soft: oklch(0.949 0.021 15);
  --destructive-soft-foreground: oklch(0.483 0.138 18);
  --success: oklch(0.511 0.12 157);
  --success-foreground: oklch(0.99 0 0);
  --success-hover: oklch(0.485 0.113 157);
  --success-soft: oklch(0.953 0.023 168);
  --success-soft-foreground: oklch(0.452 0.099 160);
  --warning: oklch(0.531 0.113 73);
  --warning-foreground: oklch(0.99 0 0);
  --warning-hover: oklch(0.505 0.106 73);
  --warning-soft: oklch(0.959 0.023 83);
  --warning-soft-foreground: oklch(0.468 0.095 76);

  /* Lines */
  --border: oklch(0.907 0 0);
  --input: oklch(0.64 0 0);
  --ring: oklch(0.542 0.212 266);

  /* Data */
  --chart-1: oklch(0.542 0.212 266);
  --chart-2: oklch(0.58 0.099 193);
  --chart-3: oklch(0.62 0.135 68);
  --chart-4: oklch(0.55 0.18 308);
  --chart-5: oklch(0.58 0.19 23);

  /* Sidebar (kept for shadcn compatibility) */
  --sidebar: oklch(0.973 0 0);
  --sidebar-foreground: oklch(0.163 0 0);
  --sidebar-primary: oklch(0.542 0.212 266);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.955 0 0);
  --sidebar-accent-foreground: oklch(0.208 0 0);
  --sidebar-border: oklch(0.907 0 0);
  --sidebar-ring: oklch(0.542 0.212 266);
}

.dark {
  --background: oklch(0.17 0 0);
  --foreground: oklch(0.97 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.97 0 0);
  --popover: oklch(0.225 0 0);
  --popover-foreground: oklch(0.97 0 0);
  --muted: oklch(0.25 0 0);
  --muted-foreground: oklch(0.72 0 0);
  --accent: oklch(0.28 0 0);
  --accent-foreground: oklch(0.97 0 0);
  --secondary: oklch(0.26 0 0);
  --secondary-foreground: oklch(0.96 0 0);

  --neutral: oklch(0.93 0 0);
  --neutral-foreground: oklch(0.208 0 0);
  --neutral-hover: oklch(0.86 0 0);
  --primary: oklch(0.55 0.191 266);
  --primary-foreground: oklch(0.99 0 0);
  --primary-hover: oklch(0.525 0.191 266);
  --primary-soft: oklch(0.29 0.075 266);
  --primary-soft-foreground: oklch(0.84 0.078 266);
  --destructive: oklch(0.57 0.19 24);
  --destructive-foreground: oklch(0.99 0 0);
  --destructive-hover: oklch(0.545 0.18 24);
  --destructive-soft: oklch(0.3 0.08 25);
  --destructive-soft-foreground: oklch(0.85 0.08 25);
  --success: oklch(0.53 0.12 157);
  --success-foreground: oklch(0.99 0 0);
  --success-hover: oklch(0.505 0.113 157);
  --success-soft: oklch(0.29 0.06 155);
  --success-soft-foreground: oklch(0.86 0.09 155);
  --warning: oklch(0.55 0.113 73);
  --warning-foreground: oklch(0.99 0 0);
  --warning-hover: oklch(0.525 0.106 73);
  --warning-soft: oklch(0.31 0.06 75);
  --warning-soft-foreground: oklch(0.88 0.09 85);

  --border: oklch(1 0 0 / 10%);
  --input: oklch(0.53 0 0);
  --ring: oklch(0.55 0.191 266);

  --chart-1: oklch(0.72 0.14 266);
  --chart-2: oklch(0.74 0.11 193);
  --chart-3: oklch(0.78 0.14 78);
  --chart-4: oklch(0.72 0.15 308);
  --chart-5: oklch(0.72 0.16 23);

  --sidebar: oklch(0.15 0 0);
  --sidebar-foreground: oklch(0.97 0 0);
  --sidebar-primary: oklch(0.55 0.191 266);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.28 0 0);
  --sidebar-accent-foreground: oklch(0.97 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.55 0.191 266);
}