Salesforce Design Token

MyComponent.cmp

<aura:component
  implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId"
  controller="QueryController"
  access="global"
>
  <ltng:require
    scripts="{!join(',',
              $Resource.babelHelpers,
              $Resource.actions,
              $Resource.reducers)}"
    afterScriptsLoaded="{!c.initMyComponent}"
  />
  <aura:attribute name="search" type="Object" />
  <aura:attribute name="loaded" type="Boolean" default="false" />
  <aura:attribute
    name="pageSize"
    type="Integer"
    default="{!v.search.pageSize}"
  />

  <c:Redux aura:id="store" />

  <aura:if isTrue="{!v.loaded}">
    <div>
      <div>
        <MyNamespace:SearchInput
          search="{!v.search}"
        />
      </div>

      <MyNamespace:TabNavigation
        search="{!v.search}"
      />
    </div>
  </aura:if>
</aura:component>

MyComponent.cmp-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<AuraDefinitionBundle xmlns="urn:metadata.tooling.soap.sforce.com" fqn="MyComponent">
  <apiVersion>41.0</apiVersion>
  <description>A Lightning Component Bundle</description>
</AuraDefinitionBundle>

MyComponent.design

<design:component>
  <design:attribute
    name="pageSize"
    label="{!$Label.c.MyPagesizeLabel}"
    min="1"
    max="100"
    default="{!v.search.pageSize}"
    description="{!$Label.c.MyPagesizeDescription}"
  />
</design:component>

MyComponentController.js

({
  initMyComponent: function(component, event, helper) {
    helper.initMyComponent(component, helper);
  }
})

MyComponentHelper.js

({
  initMyComponent: function (component, helper) {
    var store = component.find('store');
    reducers.initializeReducers(store);
    component.dispatch({
      type: 'REQUEST_RESULTS'
    });

    if (component.get('v.pageSize')) {
      component.dispatch({
        type: 'UPDATE_PAGE_SIZE_SUCCESS',
        pageSize: component.get('v.pageSize')
      });
    }
  }
})