Design system

City in the frame

Everything below is rendered by the stylesheet the site ships. The colour values and icon list are read out of the source at render time, so this page cannot drift from the build.

Brand

Direction 1b: a rounded device frame holding three skyline bars, the centre one tallest and accented. The mark is inlined as SVG rather than an <img> so the frame and outer bars take currentColor while the centre bar takes --color-accent — which is what lets one file serve both themes.

Lockups

The mark at size

tile · 56 · 24 · 16

The 16px mark is a redraw, not a reduction: 1b drops to two bars and thickens the stroke, because three bars silt up at that size. Use logo-mark-16 below 20px.

Skyline motif

The bars freed from the frame — section breaks and empty states.

Colour

Terracotta is the only brand hue. Teal, ochre and plum exist for categories and platform chips; they are deliberately as earthy as the terracotta so a page of mixed tags still reads as one palette.

Ramps

Warm neutrals

--warm-0 #FFFFFF
--warm-50 #FFFCF7
--warm-100 #F5F1EA
--warm-200 #EAE5DB
--warm-250 #E2DCCF
--warm-300 #D6D0C2
--warm-400 #B8B1A0
--warm-500 #86806F
--warm-600 #635D4E
--warm-700 #55503F
--warm-800 #37332C
--warm-900 #262320
--warm-950 #1B1917
--warm-1000 #14120F

Terracotta

--terracotta-ink #FFF6EE
--terracotta-50 #FDF2EA
--terracotta-100 #F7E5DA
--terracotta-200 #EFC9B4
--terracotta-300 #E5A583
--terracotta-400 #E08A5B
--terracotta-500 #C96A3E
--terracotta-600 #B4542E
--terracotta-700 #8E3F20
--terracotta-800 #6B2F17
--terracotta-900 #46200F

Teal

--teal-50 #EAF4F3
--teal-100 #D5E8E6
--teal-300 #6FB3AC
--teal-600 #2C6E6A
--teal-800 #1B4744

Ochre

--ochre-50 #FBF3E0
--ochre-100 #F3E4C0
--ochre-300 #D9AA53
--ochre-600 #8A6317
--ochre-800 #573D0C

Plum

--plum-50 #F5ECF2
--plum-100 #E8D6E2
--plum-300 #B98AA6
--plum-600 #6E3A5A
--plum-800 #46223A

Olive

--olive-50 #EFF3E7
--olive-100 #DCE6CC
--olive-300 #92B871
--olive-600 #4A6B33
--olive-800 #2E441F

Rust

--rust-50 #FBEDEB
--rust-100 #F3D5D0
--rust-300 #D97A6B
--rust-600 #9B3226
--rust-800 #631E16

Semantic tokens — light / dark

Surfaces

--color-canvas #EAE5DB / #14120F
--color-surface #F5F1EA / #1B1917
--color-surface-raised #FFFFFF / #262320
--color-surface-sunken #E2DCCF / #0E0D0B
--color-surface-inverse #1B1917 / #F5F1EA

Text

--color-text #1B1917 / #F5F1EA
--color-text-body #55503F / #D8D1C2
--color-text-muted #635D4E / #A39C8A
--color-text-subtle #86806F / #86806F
--color-text-inverse #F5F1EA / #1B1917

Lines

--color-border #D6D0C2 / #37332C
--color-border-strong #86806F / #86806F
--color-border-subtle #E2DCCF / #2B2823

Accent

--color-accent #B4542E / #E08A5B
--color-accent-hover #8E3F20 / #E5A583
--color-accent-active #6B2F17 / #EFC9B4
--color-accent-text #8E3F20 / #E08A5B
--color-accent-bg #FDF2EA / #2E211A
--color-accent-border #EFC9B4 / #4A3527
--color-on-accent #FFF6EE / #1B1917
--color-focus #B4542E / #E08A5B

States

--color-success #4A6B33 / #92B871
--color-warning #8A6317 / #D9AA53
--color-danger #9B3226 / #D97A6B
--color-info #2C6E6A / #6FB3AC

Categories

--color-cat-brand #8E3F20 / #E08A5B
--color-cat-teal #2C6E6A / #6FB3AC
--color-cat-ochre #8A6317 / #D9AA53
--color-cat-plum #6E3A5A / #B98AA6

Contrast

Measured from the tokens, in both themes, every time this page renders. test/design/contrast_test.rb asserts the same numbers, so a regression fails the build rather than waiting to be noticed here.

Pair Tokens Needs Light Dark
Body text --color-text
on --color-surface 		4.5:1 15.57:1 AA 15.57:1 AA
Secondary text --color-text-body
on --color-surface 		4.5:1 7.16:1 AA 11.53:1 AA
Muted metadata --color-text-muted
on --color-surface 		4.5:1 5.82:1 AA 6.41:1 AA
Subtle text (18px+) --color-text-subtle
on --color-surface 		3.0:1 3.50:1 meets bar 4.45:1 meets bar
Links --color-accent-text
on --color-surface 		4.5:1 6.47:1 AA 6.64:1 AA
Accent as fill only --color-accent
on --color-surface 		3.0:1 4.39:1 meets bar 6.64:1 AA
Primary button label --color-on-accent
on --color-accent 		4.5:1 4.63:1 AA 6.64:1 AA
Focus ring --color-focus
on --color-surface 		3.0:1 4.39:1 meets bar 6.64:1 AA
Success --color-success
on --color-success-bg 		4.5:1 5.42:1 AA 7.42:1 AA
Warning --color-warning
on --color-warning-bg 		4.5:1 4.90:1 AA 7.74:1 AA
Danger --color-danger
on --color-danger-bg 		4.5:1 6.40:1 AA 5.64:1 AA
Info --color-info
on --color-info-bg 		4.5:1 5.28:1 AA 6.76:1 AA

Why the accent is split in two

1b's accent #B4542E measures 4.39:1 on its own paper — under the 4.5:1 body text needs. It stays as --color-accent for fills, graphics and the logo bar, where the bar is 3:1. Links and accent text use --color-accent-text (#8E3F20, 6.47:1) instead. Same for the exploration's caption grey, which survives only as --color-text-subtle at 18px and above.

Type

Three roles. Newsreader carries the wordmark's voice into headings; IBM Plex Sans does the reading; IBM Plex Mono handles code, metadata and the .community lockup. Plex Sans and Plex Mono are one superfamily, so they sit together without being tuned.

Families

Newsreader · display · --font-display

Shipping to the same small screens

IBM Plex Sans · body & UI · --font-sans

The platforms differ, the problems rhyme. A community for people building on iOS, Android, Flutter and React Native.

IBM Plex Mono · code & metadata · --font-mono

swift build --configuration release

Scale

--text-4xl Mobile developers
--text-3xl Mobile developers
--text-2xl Mobile developers
--text-xl Mobile developers
--text-lg Mobile developers
--text-md Mobile developers
--text-base Mobile developers
--text-sm Mobile developers
--text-xs Mobile developers
--text-2xs Mobile developers

Tracking

Eyebrow · mono · 0.16em

.community · lockup · 0.2em

Icons

Lucide for the workhorse set, Simple Icons for platform marks, and a small custom family drawn on 1b's grid. All compiled into one inline <symbol> sprite by bin/build-icons.mjs — inline rather than external, because an external <use> does not inherit currentColor in Safari or Firefox.

Platform marks are third-party trademarks, used as published rather than redrawn. That means they are not visually uniform: Apple, Android, Flutter and React are shape-only, while Swift and Kotlin are solid tiles with the mark knocked out. Expect the latter two to read heavier in a chip — it is their artwork, not a rendering fault.

android
apple
arrow-right
arrow-up-right
bell
book-open
bookmark
calendar
check
chevron-down
chevron-left
chevron-right
circle-alert
circle-check
clock
code
copy
external-link
file-text
flutter
heart
info
kotlin
link
logo-mark
logo-mark-16
mail
map-pin
menu
message-circle
message-square
monitor
moon
react
rss
search
skyline
star
sun
swift
tag
terminal
triangle-alert
users
x

Buttons

Intents

Sizes, and with icons

On dark

Forms

Shown on your posts and replies.
That doesn't look like an email address.

Cards

The linked variant makes the whole card a target via a pseudo element on the title link, so the accessible name stays the title rather than the whole card's text.

Not a link

A plain card, for content that isn't itself a destination.

Static

Tags & avatars

Colour never carries meaning alone — every chip has a label, and platform chips carry their mark as well.

Platform chips

iOS Android Flutter React Native Swift Kotlin

States, outlines, badges

Resolved Needs info Closed Discussion outline pill 12 99+

Avatars

AL GH KB RP AL GH KB +8 here

Feedback

Heads up

Threads older than a year are archived but stay readable.

Your reply was posted.

You're editing a post from two years ago.

That username is already taken.

Pagination & breadcrumb

Content

Long-form markup with no classes on it, inside .prose — posts, guides, the code of conduct.

Writing a good bug report

The platforms differ, the problems rhyme. A report that helps names the device, the OS version and what you expected instead.

What to include

  • Device and OS version
  • Build number, from Settings → About
  • Whether it reproduces on a clean install
A bug report is a message to someone who cannot see your screen.
swift 
if #available(iOS 17, *) {
  logger.debug("preview crash: \(context.description)")
}

Press ⌘ R to rebuild.