Colour

These are the OGANIKO colours. Green is the mark.

Brand

Secondary — use sparingly

How we use them

• Page ground is white.
• Body text is black.
• Green is a mark, not decoration.
• Leaf is for buttons and taps.
• Gold is for a rare highlight.
• Error is #E53E3E. Info is #3182CE.

The names in the token file point at these colours. There is one store.

Type

Type is Open Sans. Nothing else.

Space

Space steps in fours.

Shape

Buttons may be round. Grids are not.

Equal-cell grids stay square, white, no radius, hairline gutters.

Icons

Icons are Google Material Symbols. Filled. 24px. Same colour as the text.

• home
• search
• close
• chevron_left
• chevron_right
• check

Do not mix families. The leaf is a mark, not an icon.

Motion

Motion should explain a change. Try the timing, then compare it with reduced motion.

Open the motion examples on their own. These examples use generated ODS tokens and native CSS; no animation library or JavaScript is needed.

Use CSS for ordinary hover, focus and pressed feedback. Use Motion only when presence, layout or direct manipulation needs it. No autoplay, bounce or decorative section entrances.

Rules

• Less is more. Clear type. Plenty of white space.
• Green #109200 is a mark, not decoration.
• Service pages stay still. No motion for forms or pay.
• A product story may move only with a named reason.
• Menus cap at eight items.
• Do not start from the default AI landing (cream, orange, serif hero, three cards, sparkle).
• Do not copy GOV.UK blue, Apple type, Notion doodles, or Orange marks.
• Tokens live in one place. Do not invent a second store.
• New parts must use these tokens. Catalogue never leads.