what pollen is made of

the whole palette lives at golden hour. amber is pollen's voice, coral is the warm second, sage says thank you, and pink, lavender and sky drift through the background. neutrals are tinted toward brown so nothing reads as cold.

the tinted-neutral rule

never #000, never #fff. every neutral leans amber or brown. white is a bug, not a colour.

the one-cool-dot rule

sky is the only cool colour, and only as atmosphere. a cool foreground element is a defect.

the sage-for-thanks rule

sage confirms and attributes: reposts, from-chips, added-by chains. primary actions are amber's job.

two text faces and one emoji face, all self-hosted. pp eiko is the display serif, usually light. pp museum is the humanist body face. gt maru emoji draws the emoji: it sits first in every stack but is scoped by unicode-range to emoji codepoints, so letters fall straight through to the text face and only the emoji change.

the lowercase rule

system chrome is lowercase. post, not Post. explore, not Explore. headings inside posts may use title case.

the gt maru emoji rule

every emoji the site shows, in chrome or in a post, is drawn by gt maru when it has the glyph. the platform's emoji font fills the gaps. chrome uses emoji as punctuation: a leaf on the from-chip, a blossom in the logo.

the no-em-dash rule

commas, colons, semicolons, periods, parentheses. not em dashes, and not two hyphens either.

depth comes from translucency and warm tint, not from heavy drop shadows. three shadow tiers, all tinted toward amber and brown, all diffuse. glass is allowed because cream-on-cream needs separation; the saturate() in the blur is what keeps it warm instead of gray.

the sun-cast-shadow rule

shadows are warm, low-opacity, large-radius. an rgba(0, 0, 0, x) shadow is cold against cream and does not ship.

the glass-is-earned rule

glass ships on header chrome, modals and post cards. not on buttons, inputs, chips or list items.

the lift-on-hover rule

cards rise 2px on hover with a spring, the shadow steps up one tier, and on pollen-chrome cards the shimmer border fades in.

spacing steps from a quarter rem to six rem. corners run 8, 12, 20 and 24px, with 9999px for pills. reading columns sit at min(680px, 90vw), inside the 65 to 75 character measure that body text wants.

the full-edge rule

a card border wraps all four sides at 1px or not at all. no side stripes as colour accents.

the pill rule

buttons and chips are fully round. cards are 24px, smaller cards 20px, chips 12px.

state changes use the spring curve: fast out, soft landing, no bounce. the default duration is a quarter second. the repost burst is the one long moment at just under a second. reduced-motion collapses everything to a single frame.

the transform-only rule

animate transform, opacity and filter. never width, height, padding or margin. the one exception is an inline card collapsing, and it springs out in a third of a second.

the one-moment rule

a surface gets one authored motion, orchestrated, not a hover effect on every element.

hover a row below and its dot travels on that curve or timing.

an unstyled button is already the secondary tier: cream, hairline border, pill shape. primary wears the coral-to-amber gradient and an amber glow, and is reserved for the main action on a surface. ghost is for cancel and dismiss. danger is for delete and block only.

the one-primary rule

one primary button per surface. two primaries is a layout asking for a decision it should have made.

these are real buttons: hover, focus, and press them.

inputs sit in a translucent cream well with an amber border at 20%. on focus the well goes opaque, the border goes solid amber, and the focus ring adds a 3px amber halo. placeholders speak in lowercase and use the muted ink.

the visible-focus rule

every interactive element shows the focus ring under keyboard focus. focus:not(:focus-visible) may stay quiet.

the logo is the wordmark with a pixel flower beside it, picked at random from the flower set and kept for a few page views (it is drawn by the logo component, not by a token). away from the site, pollen is a california poppy: coral petals, amber heart, sage stem. it is the favicon, the touch icon, and the icon to use in directories and link lists. avatars sit on an amber-to-pink gradient with an amber glow. links are coral, hover to amber, and underline in pink.

the quiet-metrics rule

counts and follower numbers stay small and secondary. no hero stats, no centred numbers.

the poppy ships as svg, a 512px png for directories, a favicon, and a cream-backed touch icon. keep its proportions and colours and give it room.

the post card is the workhorse of the whole site. its background chains through --surface so palette vibes cascade into it. the author chooses one of six chromes in their card studio: pollen, pop, y2k, manuscript, neon and memphis. each chrome is a peer, scoped to its own data-post-style attribute, with a handful of bounded knobs.

the peer-chrome rule

a new chrome ships as a peer of the six, with its own knobs, never as a one-off.

the inline-first rule

notes, reposts and edits open inline inside the card. a modal means the inline pattern was exhausted.

sample posts by a made-up account, shown with each chrome's default knobs.

every variable on this page can be overridden from a profile's custom css, and these are the ones made for it. column or masonry or grid, how many columns, whether the banner shows, how the header aligns. the token system is the design system, and every token is a creative lever.

the lever rule

a new token should make sense as something a person would want to turn. if it would not, it is a value, not a token.

paste any token into your custom css under :root to change it on your profile.