Inner Circle

/styleguide

Phase 1 primitives

Toggle the theme in the header and tab through this page. Every interactive element must show a visible focus ring in both themes.

Colour tokens

  • bg
  • surface
  • surface-2
  • border
  • border-strong
  • text
  • text-muted
  • text-faint
  • accent
  • accent-press
  • accent-ink
  • accent-wash
  • ok

Type scale

Page display, 30/600

Section heading, 15/600

Item name, 15/600

Body and my-take copy, 15/400 at 1.55. Why this one, in one line.

Mono label, 11/500, 0.06em

Button, 14/550

Theme toggle

Cycles system, then light, then dark. The dot marks system.

Buttons

Chips and mono labels

Patagoniaaffiliateowned since 2019
TravelTrainingEveryday carry

Avatar

Form fields

myic.dev/

Lowercase letters, numbers, hyphens and underscores.

edit is reserved. Try edit1 or mike-edit.

0/240

One line is enough. This is the personality of the card.

Toast and confirm dialog

Delete this item?

It disappears from your public page immediately. This cannot be undone.

ItemCard, the Spec 7.1 degradation cases

No image

A typographic tile at the same square. Never a broken image, never a generic icon.

  • SEED

    SEED item, no image

No take

The card tightens. No filler copy, no "No description".

  • SEED

    SEED item, no take, Black

    $349Owned since 2019
No link

The button is omitted, not disabled.

  • SEED

    SEED item, no link

    A one-line take sits here, in muted body copy.

Affiliate link

A mono chip beside the button, and rel="nofollow sponsored". A plain link gets neither, because absence is not a claim.

Plain link, for contrast

A link with no affiliate relationship. No chip, no badge, no label of any kind.

Surfaces

surface

Cards sit on surface with a hairline border. No drop shadows in either theme.

surface 2

Chips, tiles and the typographic image fallback.