> For the complete documentation index, see [llms.txt](https://able.bucca.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://able.bucca.com/overview/styles/size.md).

# Ω Size Dictionary

For objects on the screen we want to adhere to sizing standards as much as we can to create a consistent look and feel across our visual elements. To accomplish this we have sizing standards that are associated with different objects (i.e. Grids, Spacing, Icons, Avatars, Images and Button).

There are various sizing types (grid, spacing, radius, object width & height, timing, etc.) that are a part of the design system that are used to design our components and screen layouts. This is where we group those individual sizes together into use case dependent dictionaries. These are then used by our elements and components to provide the sizing options available to that object.

The design system starts with a few base dictionaries (grid, spacing, radius etc.). More can be added as needed to accommodate the needs of the system as it grows. As a sub-category under this "Size" page is where we list each of these base dictionaries with their usage, properties, and JSON details.

### Properties

**Name**: \[textField] The human readable dictionary name for this "Size" option. (i.e. spacing, radius, etc.)

**Type**: \[selectList] The family grouping for this size i.e. Radius, Image, Grid…

**Thumbnail**: \[fileAdd - optional] The visual to represent this object

**Description**: \[textArea - optional] Context to understand what the object is

**Token**: \[textField] The short-code we use to refer to this dictionary (i.e.. #dicSpacing, #dicRadius etc.)

A single dictionary "source of truth" can then be referenced across multiple elements, components and screens to provide the size properties for that object in the design system.

## Add Entry

These are the individual "entries" added to this size dictionary. As an example we have an Icon Size "Dictionary" which is referenced from all icons in the design system. That dictionary has options of Small, Medium, Large. Now when we are building a component with an icon in it, we have those options and only those options available to us, which enforces consistency throughout the design.

### Properties

**Name**: \[textField] The human readable way we refer to this "Size" option in the Dictionary.

**Value**: \[slider-tick(1-99;12)] This is the digital pixel size

**Base**: \[toggle(on,off;off)] Makes this entry the default "base" value.

**Token**: \[textField] The short-code we use to refer to this metaphor (i.e.. #szSm, #szMed, #szLrg, etc.)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://able.bucca.com/overview/styles/size.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.