# Draw the first node

## What you will make

Replace the empty workspace message with one coral Idea card. The card is one
recognizable workflow node, made from a rounded body, a title, a subtitle, and
two small ports.

## How it works

Each [`Rectangle`](/reference/components/rectangle/) and
[`Text`](/reference/components/text/) has an explicit local `style` object. Pibbl
styles do not cascade or inherit through the component tree, so the coral card
body, dark type, border, and font choices live on the primitives that paint
them. This makes the source a useful place to see the exact geometry and paint
choices that form one node.

## Build the change

The card lives in a translated [`Group`](/reference/components/group/). Its workspace
position is `(92, 180)`; after the workspace starts at y=56, the Group is at
root position `(92, 236)`. Inside that Group, the card body starts at local
`(0, 0)`, while the title and subtitle use card-local positions. The Group
applies its translation once to every child.

## Predict and try

Change the Idea color and the `Find the spark` subtitle, then compare the
result with the original card. The card body remains the painted primitive that
can participate in pointer targeting later. Its text and the two 10-pixel ports
are decoration, so each uses `pointerEvents="none"`. That opt-out prevents a
label or port from winning a future click intended for the card body.

## Check your result

The `IDEA` title should paint near root `(176, 270)`, with `Find the spark`
below it. Keep the three spaces distinct: workspace `(92, 180)`, root
`(92, 236)`, and card-local `(0, 0)`. Do not add the Group translation to each
child again, or the card will move twice as far. For more style detail, see
[Style and draw](/guides/style-and-draw/).

## What you learned

Local styles keep the card's paint and geometry explicit, while the translated
Group gives every child one shared coordinate origin. Decorative paint opts out
of targeting so the body can own future node interaction.

[Open the interactive workbench](/playground/#/workbench/diagram-editor-first-node)

## Implementation guidance for agents

Read the [Authoring, signals, and lifecycle companion](/agents/topics/lifecycle/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 2dccb19. ALPHA — NOT FOR PRODUCTION USE.